Controles avançados (GridView, ListView e FlipView)

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:

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.