Entries:
Comments:
Posts:

Loading User Information from Channel 9

Something went wrong getting user information from Channel 9

Latest Achievement:

Loading User Information from MSDN

Something went wrong getting user information from MSDN

Visual Studio Achievements

Latest Achievement:

Loading Visual Studio Achievements

Something went wrong getting the Visual Studio Achievements

Controles avançados (GridView, ListView e FlipView)

Por Vinícius Souza

Microsoft Technical Evangelist

Fabebook: http://aka.ms/facevisouza

Blog: http://aka.ms/visouza

Twitter: @vbs_br

 

Os controles GridView, ListView e FlipView não são fáceis de entender logo no primeiro contato, e essa dificuldade está relacionada ao comportamento diferente dos outros controles do tipo ItemsControl. Espero com esse artigo, ajudar você a entender e customizar estes controles.

A classe ItemsControl é a classe pai para uma série de controles que exibem coleções de itens. Neste grupo você encontrará o ListBox e ComboBox, assim como os novos controles Windows GridView, FlipView e ListView.

GridView

Utilizem o GridView para apresentar dados que rolam horizontalmente, se quiser que os dados rolem verticalmente utilizem o ListView abordado na próxima seção.

 

Por padrão, o item de dados é apresentado no GridView como uma representação de um objeto String do objeto que está ligado. Para especificar exatamente como os items de um GridView serão apresentados é necessário criar um DataTemplate para definir quais controles de layout serão utilizados para apresentar um item. Os controles no layout podem ser ligados (utilizando o binding)  para as propriedades de um objeto, ou ainda ter seu conteúdo definido diretamente no código. Você atribui o DataTemplate para a propriedade ItemTemplate do GridView.

Um usuário pode selecionar um único item de um GridView, por padrão. Para alterar este comportamente alteramos o valor da propriedade SelectionMode para um dos possíveis valores da enumeração ListViewSelectionMode, permitindo assim, multipla seleção ou ainda desabilitar a seleção. O GridView ainda permite que seus itens comportam-se como botões, ao invez de ser selecionados.

A tabela a seguir apresenta os possíveis comportamentos de um GridView e como responder a cada iteração:

Para habilitar o comportamento

Utilize esta configuração

Manipule o evento

Utilize esta propriedade para recuperar o item selecionado

Sem interação

SelectionMode = None

IsItemClickEnabled = False

--

--

Seleção simples

SelectionMode = Single

IsItemCliclEnabled = True

SelectionChanged

SelectedItem

SelectedIndex

Seleção multipla contínua

SelectionMode = Multiple,

IsItemClickEnabled = False

SelectionChanged

SelectedItems

Seleção multipla não contínua

SelectionMode = none

IsItemClickEnabled = true

ItemClick

--

 

O GridView suporta virtualização dos dados para melhorar a performance quando estiver utilizando grande quantidades de dados. Virtualização de acesso aleatório é suportado quando a fonte de dados implementar a interface IObservableVector ou INotifyCollectionChanged. Virtualização de carga incremental é suportado quando a fonte de dados implementar a interface ISupportIncrementalLoading, neste caso você pode utilizar os membros para controlar o carregamento: DataFetchSize, IncrementalLoadingThreshold, IncrementalLoadingTrigger, LoadMoreItemsAsync.

GridView implementa a interface ISemanticZoomInformation, o que possibilita sua utilização como uma visão do controle SemanticZoom. Quando utilizado em um controle SemanticZoom, sempre atualize a propriedade ScrollViewer.IsHorizontalScrollChainingEnabled para false, desta forma  <GridView ScrollViewer.IsHorizontalScrollChainingEnabled="False">. Os seguintes membros tem efeito somente quando utilizado em um GridView dentro de um SemanticZoom:  IsActiveView, IsZoomedInView, SemanticZoomOwner, CompleteViewChange, CompleteViewChangeFrom, CompleteViewChangeTo, InitializeViewChange, MakeVisible, StartViewChangeFrom, StartViewChangeTo.

No trecho de código abaixo, o GridView está vinculado a uma coleção agrupada CollectionViewSource chamada cvsProjects. A aparência dos itens individuais de cada grupo é definida por um ItemTemplate. Os ItemsPanel especifica como o grupo será organizado na GridView. O GroupStyle.Panel especifica como itens individuais serão organizados em cada grupo.

<GridView ItemsSource="{Binding Source={StaticResource cvsProjects}}"

  Margin="0,120,0,0" MaxHeight="500" Grid.Column="1">

    <GridView.ItemTemplate>

        <DataTemplate>

            <StackPanel Margin="20">

                <TextBlock Text="{Binding Name}" FontWeight="Bold"

                           Style="{StaticResource ItemTextStyle}"/>

                <TextBlock Text="{Binding DueDate}" TextWrapping="NoWrap"

                           Style="{StaticResource BodyTextStyle}" />

                <CheckBox Content="Complete" IsChecked="{Binding Complete}"

                          IsEnabled="False"/>

            </StackPanel>

        </DataTemplate>

    </GridView.ItemTemplate>

    <GridView.ItemsPanel>

        <ItemsPanelTemplate>

            <StackPanel Orientation="Horizontal"/>

        </ItemsPanelTemplate>

    </GridView.ItemsPanel>



    <GridView.GroupStyle>

        <GroupStyle HidesIfEmpty="True">

            <GroupStyle.HeaderTemplate>

                <DataTemplate>

                    <Grid Background="LightGray" Margin="0">

                        <TextBlock Text='{Binding Name}'

                                   Foreground="Black" Margin="30"

                                   Style="{StaticResource HeaderTextStyle}"/>

                    </Grid>

                </DataTemplate>

            </GroupStyle.HeaderTemplate>



            <GroupStyle.ContainerStyle>

                <Style TargetType="GroupItem">

                    <Setter Property="MinWidth" Value="600"/>

                    <Setter Property="BorderBrush" Value="DarkGray"/>

                    <Setter Property="BorderThickness" Value="2"/>

                    <Setter Property="Margin" Value="3,0"/>

                </Style>

            </GroupStyle.ContainerStyle>



            <GroupStyle.Panel>

                <ItemsPanelTemplate>

                    <VariableSizedWrapGrid/>

                </ItemsPanelTemplate>

            </GroupStyle.Panel>

        </GroupStyle>

    </GridView.GroupStyle>

</GridView>[

ListView

Como dito anteriormente o ListView é utilizado para apresentar listas verticais, assim como o GridView o ListView é um controle do tipo ItemsControls, assim ele pode conter uma coleção de itens de um tipo. Para popular a visualização, adicione itens para a coleção Items, ou atualize a propriedade ItemsSource com a origem de dados a serem utilizados.

 

O ListView é geralmente utilizado para apresentar dados na visão Snapped, um exemplo desta utilização pode ser encontrada no template de Grid fornecido no Visual Studio.

Tirando o fato que um ListView apresenta os dados na vertical, não há maiores diferenças com o GridView os controles fornecem as mesmas funcionalidades como carga incremental, acesso aleatório e zoom semântico.

<ListView x:Name="itemListView"
          Margin="120,0,0,60"
          ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
          SelectionChanged="ItemListView_SelectionChanged">
    <ListView.ItemTemplate>
        <DataTemplate>
            <Grid Height="110" Margin="6">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="110" Height="110">
                    <Image Source="{Binding Image}" Stretch="UniformToFill"/>
                </Border>
                <StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="10,0,0,0">
                    <TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextStyle}" TextWrapping="NoWrap"/>
                    <TextBlock Text="{Binding Subtitle}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap"/>
                    <TextBlock Text="{Binding Description}" Style="{StaticResource BodyTextStyle}" MaxHeight="60"/>
                </StackPanel>
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>          
</ListView>

 

FlipView

Utilizem o controle FlipView para apresentar um coleção de itens sequencialmente, uma por vez. Este controle é muito utilizado para apresentar uma galeria de imagens, por exemplo.

Galeria com o FlipView

 

O FlipView também é um controle do tipo ItemsControl, assim ele possui uma coleção de itens de qualquer tipo. Para populá-lo adicione itens para a coleção Items, ou atribua uma fonte de dados para a propriedade ItemsSource.

O controle permite que seja utilizada todo o espaço disponível na tela para apresentar um item. Ele apresenta dois botões, um na esquerda e outro na direita que permite o usuário navegar entre os itens que serão apresentados, se você utilizar um dispositivo com suporte a touch as setas não serão apresentadas e você pode realizar movimentos do tipo swipe horizontais para avançar ou voltar.

Por padrão, os dados de um FlipView é apresentado como uma representação de String de um objeto. Para especificar exatamente como os itens em um FlipView são apresentados, é necessário criar um DataTemplate para definir os controles de layout utilizados para cada item. Os controles no layout podem ser vinculados  utilizando Binding para os dados de objetos.

 

<FlipView x:Name="flipView1" Width="480" Height="270" 
              BorderBrush="Black" BorderThickness="1">
            <FlipView.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Image Width="480" Height="270" Source="{Binding Image}" Stretch="UniformToFill"/>
                        <Border Background="#A5000000" Height="80" VerticalAlignment="Bottom">
                            <TextBlock Text="{Binding Name}" FontFamily="Segoe UI" FontSize="26.667" 
                                       Foreground="#CCFFFFFF" Padding="15,20"/>
                        </Border>
                    </Grid>
                </DataTemplate>
            </FlipView.ItemTemplate>
        </FlipView>

Conclusão

O desafio de criar uma interface de usuário completamente nova, baseada em toque para aplicações metro style, requer um conjunto completo de novos controles que simplificam a nossa vida. Por essa razão, metro oferece alguns controles que implementam novos tipos de interações.

Tags:

Follow the Discussion

  • Bruno Juliãobrunojuliao7 Here we go!

    "como botões, ao invez de ser selecionados."

    "ao invés" seria a expressão correta.

    Desculpa ser chato, mas eu gosto quando me corrigem em meus textos. É fácil e normal passar alguma coisa.

  • Julio Cunha SilvaJulio Cunha Silva

    Tenho o Windows 7 e gostava de mudar para o windows 8 gratuitamente, uma vez que ja sou vosso cçiente ha varios anos, seguramente 8 anos a passar.
    Sem outro assunto me despesso
    Julio Cunha Silva

  • @brunojuliao7:Legal vc corrigir o texto, mas acho que foi muito deselegante a forma como o fez. Deveria mandar um email para a pessoa que escreveu o artigo. 

Remove this comment

Remove this thread

close

Comments Closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums,
or Contact Us and let us know.