Idioma: HTML | XAML

Início rápido: adicionando controles ListView e GridView (XAML)

Applies to Windows and Windows Phone

Você pode usar um controle ListView ou GridView em XAML para exibir as suas coleções de dados, como uma lista de contratos, imagens em uma galeria ou o conteúdo de uma caixa de entrada de email.

Objetivo: Para saber como adicionar controles ListView e GridView a um aplicativo da Windows Store.

Pré-requisitos

Nós supomos que você saiba adicionar controles a um aplicativo básico do Tempo de Execução do Windows em C++, C# ou Visual Basic. Para obter instruções sobre adicionar um controle, consulte Guia de início rápido: adicionando controles e manipulando eventos.

Instruções

1. Escolhendo um ListView ou GridView

Os controles ListView e GridView são usados para exibir coleções de dados em seu aplicativo. Eles possuem funcionalidade semelhantes, mas exibem dados diferentemente. Os dois são derivados da classe ItemsControl. Quando falamos sobre uma classe ItemsControl, as informações são aplicáveis aos controles ListView e GridView.

O ListView exibe dados empilhados verticalmente. Ele é frequentemente usado para mostrar uma lista ordenada de itens, como uma lista de emails ou resultados de pesquisa. É também útil em cenários mestre-detalhes, onde os itens da lista só contêm uma pequena quantidade de informações e os detalhes do item selecionado são mostrados separadamente.

O GridView exibe os dados empilhados horizontalmente. Ele é frequentemente usado quando você precisa mostrar uma visualização rica de cada item que ocupa mais espaço, como uma galeria de fotos.

Você pode preencher um ItemsControl adicionando itens diretamente em sua coleção de Items ou associando sua propriedade ItemsSource a uma origem de dados. É comum ter um ListView e GridView associados à mesma origem de dados. Em seguida, você pode mostrar um e ocultar o outro para adaptar a sua interface do usuário a orientações e resoluções diferentes.

Aqui está uma ListView mostrando itens em um aplicativo que é ajustado quando fica ao lado de outro aplicativo e uma GridView mostrando os mesmos itens quando o aplicativo está na tela inteira.

ListView e GridView

2. Adicionando itens à coleção de itens

Você pode adicionar itens à coleção Items usando a linguagem XAML ou código. Normalmente você adiciona itens dessa maneira, quando você tem um pequeno número de itens que não mudam e são facilmente definidos em XAML, ou quando você gera os itens em código no tempo de execução. Veja um ListView com itens definidos inline usando XAML e um GridView com itens adicionados em código.


<ListView x:Name="listView1" SelectionChanged="ListView_SelectionChanged">
    <x:String>Item 1</x:String>
    <x:String>Item 2</x:String>
</ListView>



// Create a new grid view, add content, 
// and add a SelectionChanged event handler.
GridView gridView1 = new GridView();
gridView1.Items.Add("Item 1");
gridView1.Items.Add("Item 2");
gridView1.SelectionChanged += GridView_SelectionChanged;

// Add the grid view to a parent container in the visual tree.
stackPanel1.Children.Add(gridView1);


Quando você adiciona itens em um ItemsControl eles são automaticamente colocados em um contêiner de item. O contêiner do item para um ListView é ListViewItem e o contêiner do item para um GridView é GridViewItem. Para alterar como um item é exibido, você pode aplicar um estilo ao contêiner de item definindo a propriedade ItemContainerStyle.

Quando você define os itens no XAML, eles também são adicionados automaticamente à coleção Items.

3. Definindo a origem dos itens

A maioria dos aplicativos usa um ListView ou GridView para exibir dados de uma origem como um banco de dados ou internet. Para preencher um ItemsControl a partir de uma fonte de dados, defina sua propriedade ItemsSource como uma coleção de itens de dados.

Observação  Você pode preencher um ItemsControl adicionando itens a sua coleção Items ou definindo sua propriedade ItemsSource, mas você não pode usar as duas formas ao mesmo tempo. Se você definir a propriedade ItemsSource e adicionar um item no XAML, o item será ignorado. Se você definir a propriedade ItemsSource e adicionar um item à coleção Items no código, uma exceção será gerada.

Veja alguns tipos de coleção comuns que permitem associação em um ItemsControl.

Tipo de coleçãoQuando usar
List(Of T) Quando a coleção não mudar no tempo de execução. O conteúdo da lista ou grade fica estático após ser criado.
ObservableCollection(Of T) Quando a coleção puder mudar no tempo de execução. A lista ou grade é notificada sobre mudanças na coleção e atualiza o vídeo.
FileInformationFactory.GetVirtualizedFilesVector Associar a uma coleção de arquivos.
FileInformationFactory.GetVirtualizedFoldersVector Associar a uma coleção de pastas.
FileInformationFactory.GetVirtualizedItemsVector Associar a uma coleção de itens de armazenamento.

 

Aqui, o ItemsSource é definido em código diretamente em uma instância de uma coleção.


// Data source.
List<String> itemsList = new List<string>();
itemsList.Add("Item 1");
itemsList.Add("Item 2");

// Create a new grid view, add content, 
// and add a SelectionChanged event handler.
GridView gridView1 = new GridView();
gridView1.ItemsSource = itemsList;
gridView1.SelectionChanged += GridView_SelectionChanged;

// Add the grid view to a parent container in the visual tree.
stackPanel1.Children.Add(gridView1);


Você também pode associar a propriedade ItemsSource a um CollectionViewSource. CollectionViewSource age como um proxy para a classe da coleção para habilitar o suporte a agrupamento e a moeda. Se você tiver os mesmos dados associados a ListView e GridView para permitir a alternância entre os modos de exibição estreito e largo, deverá associar a um CollectionViewSource para que os dois modos de exibição tenham o mesmo item atual. Para saber mais, veja Vinculação de dados com XAML.

Para mostrar os itens agrupados em uma lista ou grade, a origem de dados deve permitir agrupamento e você deve associar o ItemsSource a um CollectionViewSource com sua propriedade IsSourceGrouped definida como True. Para saber mais, veja Como agrupar itens em um controle de dados.

Aqui, ItemsSource é associado a um CollectionViewSource chamado itemsViewSource. Para ver o código completo para este exemplo e os próximos, crie um aplicativo usando o modelo Aplicativo Dividido no Microsoft Visual Studio.


<Page.Resources>
    <!-- Collection of items displayed by this page -->
    <CollectionViewSource x:Name="itemsViewSource" Source="{Binding Items}"/>
</Page.Resources>



<ListView x:Name="itemListView" 
          ItemsSource="{Binding Source={StaticResource itemsViewSource}}"/>


4. Especificando a aparência dos itens

Por padrão, o item de dados é exibido em uma lista ou grade como a representação da cadeia de caracteres do objeto de dados ao qual ele está associado. Você pode mostrar a representação da cadeia de caracteres de uma propriedade particular do item de dados definindo DisplayMemberPath para a propriedade.

Normalmente você deseja exibir mais de uma propriedade de seu item de dados. Para especificar exatamente como os itens na lista ou grade são exibidos, crie um DataTemplate. O XAML no DataTemplate define o layout de controles usado para exibir cada item. Os controles no layout podem ser associados a propriedades de um objeto de dados ou ter conteúdo definido em linha. O DataTemplate é atribuído à propriedade ItemTemplate de ListView ou GridView.

Neste exemplo, o ItemTemplate de um ListView é definido em linha. O próximo exemplo mostra um GridView com seu ItemTemplate definido como um recurso estático chamado Standard250x250ItemTemplate.


<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>


Veja a aparência do layout definido pelo modelo de dados.

Modelo de dados ListView

5. Especificando o layout da exibição

Para especificar como os itens são dispostos em uma exibição de grade ou lista, defina a propriedade ItemsPanel para especificar um ItemsPanelTemplate que é definido como um Panel de layout. Por padrão, GridView usa um painel WrapGrid como seu ItemsPanel, e ListView usa um VirtualizingStackPanel como seu ItemsPanel.

Veja como usar um WrapGrid para alterar o layout dos itens em um ListView. O WrapGrid substitui o VirtualizingStackPanel padrão, que organiza itens em uma única coluna. Definimos a propriedade WrapGrid.MaximumRowsOrColumns para que os itens sejam organizados em duas colunas.


<ListView Height="320" Width="260">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapGrid Orientation="Horizontal" MaximumRowsOrColumns="2"/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>

    <Rectangle Height="100" Width="100" Fill="Blue" />
    <Rectangle Height="100" Width="100" Fill="Red" />
    <Rectangle Height="100" Width="100" Fill="Yellow" />
    <Rectangle Height="100" Width="100" Fill="Green" />
    <Rectangle Height="100" Width="100" Fill="Gray" />
    <Rectangle Height="100" Width="100" Fill="LightBlue" />
    <Rectangle Height="100" Width="100" Fill="Pink" />
    <Rectangle Height="100" Width="100" Fill="YellowGreen" />
</ListView>


Esta é a aparência do ListView quando usa um WrapGrid com duas colunas como seu ItemsPanel.

ListView com duas colunas

6. Adicionando um cabeçalho ao modo de exibição

Você pode adicionar um cabeçalho a um ListView ou GridView atribuindo uma cadeia de caracteres ou um objeto à propriedade Header. Você pode usar um modelo de dados para definir o layout do Header definindo a propriedade HeaderTemplate.

Por padrão, o cabeçalho é mostrado na borda inicial do modo de exibição. É mostrado na parte superior de um ListView e à esquerda de um GridView. Se a propriedade FlowDirection for definida como RightToLeft, o cabeçalho será mostrado à direita de um GridView.

Veja um GridView com um cabeçalho que contém um StackPanel com texto e imagem. Este XAML é uma versão simplificada do GridView usado na página GroupDetail do modelo Aplicativo de Grade do Visual Studio.


<GridView x:Name="itemGridView"
          Margin="0,-14,0,0"
          Padding="120,0,120,50"
          ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
          ItemTemplate="{StaticResource Standard500x130ItemTemplate}">

    <GridView.Header>
        <StackPanel Width="480" Margin="0,4,14,0">
            <TextBlock Text="{Binding Subtitle}" Margin="0,0,18,20" 
                       Style="{StaticResource SubheaderTextStyle}" MaxHeight="60"/>
            <Image Source="{Binding Image}" Height="400" Margin="0,0,18,20" 
                   Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
            <TextBlock Text="{Binding Description}" Margin="0,0,18,0" 
                       Style="{StaticResource BodyTextStyle}"/>
        </StackPanel>
    </GridView.Header>
</GridView>


Aqui, o cabeçalho do GridView é a parte destacada em amarelo.

Modelo de dados ListView.

7. Definindo o modo de interação da exibição

Por padrão, um usuário pode selecionar um item único em um ListView ou GridView. Para alterar este comportamento, você pode definir a propriedade SelectionMode em um valor de enumeração ListViewSelectionMode para permitir seleção múltipla ou para desativar seleção.

Veja aqui um ListView com seleção desativada e um GridView com seleção múltipla ativada.


<ListView x:Name="itemList"
          ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
          SelectionMode="None"/>

<GridView x:Name="itemGrid"
          ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
          SelectionChanged="ItemView_SelectionChanged"
          SelectionMode="Extended"/>


Para responder às mudadas de seleção em uma lista ou grade, manipule o evento SelectionChanged. No código do manipulador de eventos, você pode obter a lista de itens selecionados a partir da propriedade SelectionChangedEventArgs.AddedItems. Fora do evento SelectionChanged, obtenha os itens selecionados das propriedades SelectedItem e SelectedItems, no código ou através da associação de dados.

Veja o manipulador de eventos SelectionChanged para GridView no exemplo anterior.


List<object> selectedItems;

private void ItemView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    // Use e.AddedItems to get the items that are selected in the ItemsControl.
    selectedItems = (List<object>)e.AddedItems;
}


Você também pode mudar um ListView ou GridView para que um usuário clique nos itens como botões em vez de selecioná-los. Por exemplo, isso é útil quando o seu aplicativo navega para uma nova página quando o seu usuário clica em um item em uma lista ou grade. Para habilitar este comportamento, defina o SelectionMode como None, defina IsItemClickEnabled como true e manipule o evento ItemClick para fazer algo quando o seu usuário clicar em um item.

Veja um GridView com itens clicáveis. O código no manipulador ItemClick navega para uma nova página e passa o item clicado como os dados para a nova página.


<GridView x:Name="itemGridView"
          Margin="116,0,116,46"
          ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
          ItemTemplate="{StaticResource Standard250x250ItemTemplate}"
          SelectionMode="None"
          IsItemClickEnabled="True"
          ItemClick="ItemView_ItemClick"/>



private void ItemView_ItemClick(object sender, ItemClickEventArgs e)
{
    // Navigate to the split page, configuring the new page
    // by passing required information as a navigation parameter
    this.Frame.Navigate(typeof(SplitPage), e.ClickedItem);
}


Resumo e próximas etapas

Você aprendeu como criar controles ListView e GridView para exibir coleções de dados.

Para obter uma lista de modelos de item predefinidos que você pode usar em seu aplicativo, veja modelos de item para layouts de lista e modelos de item para layouts de grade. Para saber como agrupar itens, veja Como agrupar itens em uma lista ou grade.

Para obter mais exemplos de código que mostrem os controles ListView e GridView, veja esses exemplos:

Tópicos relacionados

Mapa de aplicativos do Tempo de Execução do Windows em C# ou Visual Basic
Mapa de aplicativos do Tempo de Execução do Windows em C++

 

 

Mostrar:
© 2014 Microsoft