Vista de lista e vista de grelha

A maioria dos aplicativos manipula e exibe conjuntos de dados, como uma galeria de imagens ou um conjunto de mensagens de e-mail. A estrutura da interface do usuário XAML fornece controles ListView e GridView que facilitam a exibição e a manipulação de dados em seu aplicativo.

Os controles ListView e GridView oferecem muitos benefícios à medida que você trabalha com coleções. Ambos são fáceis de implementar e fornecem interface do usuário básica, interação e rolagem, sendo facilmente personalizáveis. E ambos podem ser vinculados a fontes de dados dinâmicas existentes ou a dados codificados fornecidos no próprio XAML ou no code-behind.

Ambos os controles são flexíveis para uso em uma variedade de cenários, mas, no geral, funcionam melhor com coleções nas quais todos os itens têm a mesma estrutura básica e aparência, bem como o mesmo comportamento de interação. Ou seja, todos eles devem executar a mesma ação quando são clicados (por exemplo, para abrir um link ou navegar).

Compare ListView e GridView

Visão de Lista

O controle ListView exibe dados empilhados verticalmente em uma única coluna. ListView funciona melhor para itens que têm texto como ponto focal e para coleções que devem ser lidas de cima para baixo (por exemplo, ordenadas alfabeticamente). Alguns casos de uso comuns para ListView incluem listas de mensagens e resultados de pesquisa. Se você precisar exibir coleções em várias colunas ou em um formato de tabela, não deve usar ListView. Em vez disso, considere usar um DataGrid controle.

Vista de grelha

O controle GridView apresenta uma coleção de itens em linhas e colunas que podem ser roladas verticalmente. Os dados são empilhados horizontalmente até preencherem uma coluna e, em seguida, continuam com a próxima linha na coluna. O GridView funciona melhor para coleções que têm imagens como ponto focal ou cujos itens podem ser lidos lado a lado ou não são classificados em uma ordem específica. Um caso de uso comum do GridView é uma galeria de fotos ou produtos.

Que controle de recolha deve utilizar? Uma comparação com ItemsRepeater

É importante entender as diferenças entre esses tipos de controles antes de decidir qual usar.

ListView e GridView

Os controles ListView e GridView, ricos em recursos, funcionam prontos para uso. Eles não exigem personalização, mas podem ser personalizados facilmente. Cada um tem sua própria interface do usuário e UX integrados e foi projetado para exibir praticamente qualquer tipo de coleção como está.

ItemsRepeater

O controlo ItemsRepeater também é usado para exibir coleções, mas foi projetado como um bloco de construção para criar um controlo personalizado que satisfaça os seus requisitos específicos de interface do utilizador. Ele não tem os mesmos recursos e funcionalidades internos que ListView e GridView, portanto, você precisará implementar todos os recursos ou interações necessários. Use ItemsRepeater se você tiver uma interface do usuário altamente personalizada que não pode criar usando ListView ou GridView, ou se sua fonte de dados exigir um comportamento diferente para cada item.

Saiba mais sobre o ItemsRepeater lendo as diretrizes e a documentação da API.

Criar uma vista de lista ou de grelha

O aplicativo WinUI 3 Gallery inclui exemplos interativos da maioria dos controles, recursos e funcionalidades do WinUI 3. Obtenha o aplicativo no da Microsoft Store ou obtenha o código-fonte em do GitHub

ListView e GridView são tipos de ItemsControl, portanto, podem conter uma coleção de itens de qualquer tipo. Um controle ListView ou GridView deve ter itens em sua coleção Items antes de poder exibir qualquer coisa na tela. Para preencher a vista, pode adicionar itens diretamente à coleção ou definir a propriedade ItemsSource como uma fonte de dados.

Muitos dos exemplos neste artigo preenchem a coleção Items diretamente por uma questão de simplicidade. No entanto, é mais comum que os itens de uma lista venham de uma fonte dinâmica, como uma lista de livros de um banco de dados online. Você usa a propriedade ItemsSource para essa finalidade.

Adicionar itens a um controle ListView ou GridView

Você pode adicionar itens à coleção ListView ou GridView Items usando XAML ou código para produzir o mesmo resultado. Normalmente, você adicionaria itens por meio de XAML se tiver um pequeno número de itens que não são alterados e são facilmente definidos, ou se gerar os itens em código em tempo de execução.

Método 1: Adicionar itens à coleção Items

• Opção 1: Adicionar itens por meio de XAML

  <!-- No corresponding C# code is needed for this example. -->
  
  <ListView x:Name="Fruits">
  <x:String>Apricot</x:String>
  <x:String>Banana</x:String>
  <x:String>Cherry</x:String>
  <x:String>Orange</x:String>
  <x:String>Strawberry</x:String>
  </ListView>
  

• Opção 2: Adicionar itens através do código

  <StackPanel Name="FruitsPanel"></StackPanel>
  

  // Create a new ListView and add content.
  ListView Fruits = new ListView();
  Fruits.Items.Add("Apricot");
  Fruits.Items.Add("Banana");
  Fruits.Items.Add("Cherry");
  Fruits.Items.Add("Orange");
  Fruits.Items.Add("Strawberry");
  
  // Add the ListView to a parent container in the visual tree (which you created in the corresponding XAML file).
  FruitsPanel.Children.Add(Fruits);
  

Ambas as opções produzem a mesma exibição de lista, conforme mostrado aqui:

Método 2: Adicionar itens definindo a propriedade ItemsSource

Normalmente, você usaria um ListView ou GridView para exibir dados de uma fonte, como um banco de dados ou a Internet. Para preencher um controle ListView ou GridView de uma fonte de dados, defina sua propriedade ItemsSource como uma coleção de itens de dados. Esse método funciona melhor se ListView ou GridView vai conter objetos de classe personalizados, conforme mostrado nos exemplos a seguir.

• Opção 1: Definir ItemsSource no código

  Aqui, a propriedade ListView ItemsSource é definida em código diretamente para uma instância de uma coleção.

  <StackPanel x:Name="ContactPanel"></StackPanel>
  

  // Class definition should be provided within the namespace being used, outside of any other classes.
  
  this.InitializeComponent();
  
  // Instead of adding hard coded items to an ObservableCollection as shown here,
  //the data could be pulled asynchronously from a database or the internet.
  ObservableCollection<Contact> Contacts = new ObservableCollection<Contact>();
  
  // You create Contact objects by providing a first name, last name, and company for the Contact constructor.
  // They are then added to the ObservableCollection Contacts.
  Contacts.Add(new Contact("John", "Doe", "Contoso, LTD."));
  Contacts.Add(new Contact("Jane", "Doe", "Fabrikam, Inc."));
  Contacts.Add(new Contact("Santa", "Claus", "Alpine Ski House"));
  
  // Create a new ListView (or GridView) for the UI, and add content by setting ItemsSource
  ListView ContactsLV = new ListView();
  ContactsLV.ItemsSource = Contacts;
  
  // Add the ListView to a parent container in the visual tree (which you created in the corresponding XAML file)
  ContactPanel.Children.Add(ContactsLV);
  

• Opção 2: Definir ItemsSource em XAML

  Você também pode vincular a propriedade ItemsSource a uma coleção no XAML. Aqui, ItemsSource está vinculado a uma propriedade pública chamada Contacts, que expõe a coleção de dados privados da página, chamada _contacts.

  <ListView x:Name="ContactsLV" ItemsSource="{x:Bind Contacts}"/>
  

  // Provide a class definition within the namespace being used, outside of any other classes.
  // These two declarations belong outside the main page class.
  private ObservableCollection<Contact> _contacts = new ObservableCollection<Contact>();
  
  public ObservableCollection<Contact> Contacts
  {
      get { return this._contacts; }
  }
  
  // Define this method within your main page class.
  protected override void OnNavigatedTo(NavigationEventArgs e)
  {
      base.OnNavigatedTo(e);
  
      // Instead of hard coded items, the data could be pulled
      // asynchronously from a database or the internet.
      Contacts.Add(new Contact("John", "Doe", "Contoso, LTD."));
      Contacts.Add(new Contact("Jane", "Doe", "Fabrikam, Inc."));
      Contacts.Add(new Contact("Santa", "Claus", "Alpine Ski House"));
  }
  

Ambas as opções produzirão a mesma exibição de lista, conforme mostrado na captura de tela a seguir. (O modo de exibição de lista mostra a representação de cadeia de caracteres de cada item, porque um modelo de dados não está definido para este exercício.)

A próxima seção entra em maiores detalhes sobre como representar visualmente itens de classe simples e personalizados corretamente em um modelo ListView ou GridView.

Para obter mais informações sobre vinculação de dados, consulte Visão geral da vinculação de dados.

Personalizar a aparência com um modelo de dados

Usando um modelo de dados em um controle ListView ou GridView, você pode definir como os itens e dados devem ser visualizados. Por padrão, um item de dados é exibido no modo de exibição de lista como a representação de cadeia de caracteres do objeto de dados ao qual está vinculado. Você pode mostrar a representação de cadeia de caracteres de uma propriedade específica do item de dados definindo DisplayMemberPath a essa propriedade.

No entanto, normalmente você pode querer mostrar uma apresentação mais rica de seus dados. Para especificar como os itens no modo de exibição de lista ou no modo de exibição de grade devem ser exibidos, crie um classe de DataTemplate. O XAML em DataTemplate define o layout e a aparência dos controles usados para exibir um item individual. Os controles no layout podem ser vinculados às propriedades de um objeto de dados ou podem ter conteúdo estático definido embutido.

Um modelo de dados ListView simples

Neste exemplo, o item de dados é uma cadeia de caracteres simples. Para adicionar uma imagem à esquerda da cadeia de caracteres e exibi-la em azul-escuro, defina DataTemplate embutido dentro da definição ListView. Este é o mesmo controle ListView que você criou anteriormente usando a opção 1 no método 1.

<!--No corresponding code is needed for this example.-->
<ListView x:Name="FruitsList">
                <ListView.ItemTemplate>
                    <DataTemplate x:DataType="x:String">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="47"/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            <Image Source="Assets/placeholder.png" Width="32" Height="32"
                                HorizontalAlignment="Left" VerticalAlignment="Center"/>
                            <TextBlock Text="{x:Bind}" Foreground="Teal" FontSize="14"
                                Grid.Column="1" VerticalAlignment="Center"/>
                        </Grid>
                    </DataTemplate>
                </ListView.ItemTemplate>
                <x:String>Apricot</x:String>
                <x:String>Banana</x:String>
                <x:String>Cherry</x:String>
                <x:String>Orange</x:String>
                <x:String>Strawberry</x:String>
            </ListView>

Veja como os itens de dados são exibidos quando você aplica um modelo de dados ListView simples:

Um modelo de dados ListView para objetos de classe personalizados

No exemplo a seguir, o item de dados é um objeto Contact. Para adicionar a imagem de contato à esquerda do nome do contato e da empresa, defina o DataTemplate como inline na definição do ListView. Este modelo de dados ListView foi criado na opção 2 no método 2, como mostrado anteriormente.

<ListView x:Name="ContactsLV" ItemsSource="{x:Bind Contacts}">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="local:Contact">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Image Grid.Column="0" Grid.RowSpan="2" Source="Assets/grey-placeholder.png" Width="32"
                    Height="32" HorizontalAlignment="Center" VerticalAlignment="Center"></Image>
                <TextBlock Grid.Column="1" Text="{x:Bind Name}" Margin="12,6,0,0"
                    Style="{ThemeResource BaseTextBlockStyle}"/>
                <TextBlock  Grid.Column="1" Grid.Row="1" Text="{x:Bind Company}" Margin="12,0,0,6"
                    Style="{ThemeResource BodyTextBlockStyle}"/>
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Veja como os itens de dados são exibidos quando você aplica um modelo de dados ListView para objetos de classe personalizados:

Os modelos de dados são a principal maneira de definir a aparência do seu ListView. Eles também podem afetar significativamente o desempenho se sua lista tiver um grande número de itens.

Você pode definir seu modelo de dados embutido na definição ListView ou GridView, conforme mostrado no código anterior, ou separadamente em uma seção Recursos. Se você defini-lo fora da definição ListView ou GridView, deverá dar ao modelo de dados um atributo x:Key e atribuí-lo à propriedade ItemTemplate do ListView ou GridView usando essa chave.

Para obter mais informações e exemplos de como usar modelos de dados e contêineres de itens para definir a aparência dos itens em sua lista ou grade, consulte Contêineres e modelos de item.

Alterar o layout dos itens

Quando você adiciona itens a um controle ListView ou GridView, ele encapsula automaticamente cada item em um contêiner de item e, em seguida, estabelece todos os contêineres de item. Como esses contentores de item são dispostos depende da ItemsPanel propriedade do controle.

• ListView, por padrão, usa ItemsStackPanel, que produz uma lista vertical:

  

• GridView usa ItemsWrapGrid, que adiciona itens horizontalmente e quebra e rola verticalmente:

  

Você pode modificar o layout dos itens ajustando as propriedades no painel de itens ou pode substituir o painel padrão por outro painel.

Este exemplo mostra como fazer um controle ListView dispor seus contêineres de item em uma lista horizontal alterando a propriedade Orientation de ItemsStackPanel.

Como o modo de exibição de lista rola verticalmente, por padrão, você também precisa ajustar algumas propriedades no interno do ScrollViewer do modo de exibição de lista para fazê-lo rolar horizontalmente.

• Altere ScrollViewer.HorizontalScrollMode para Ativado ou Automático.
• Altere ScrollViewer.HorizontalScrollBarVisibility de para Auto.
• Altere ScrollViewer.VerticalScrollMode para Desativado.
• Altere ScrollViewer.VerticalScrollBarVisibility para Hidden.

<ListView Height="60"
          ScrollViewer.HorizontalScrollMode="Enabled"
          ScrollViewer.HorizontalScrollBarVisibility="Auto"
          ScrollViewer.VerticalScrollMode="Disabled"
          ScrollViewer.VerticalScrollBarVisibility="Hidden">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsStackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <x:String>Apricot</x:String>
    <x:String>Banana</x:String>
    <x:String>Cherry</x:String>
    <x:String>Orange</x:String>
    <x:String>Strawberry</x:String>
</ListView>

Veja como a lista é exibida:

No próximo exemplo, o ListView dispõe os itens numa lista vertical que se ajusta, utilizando ItemsWrapGrid em vez de ItemsStackPanel.

<ListView Height="100"
          ScrollViewer.HorizontalScrollMode="Enabled"
          ScrollViewer.HorizontalScrollBarVisibility="Auto"
          ScrollViewer.VerticalScrollMode="Disabled"
          ScrollViewer.VerticalScrollBarVisibility="Hidden">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsWrapGrid/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <x:String>Apricot</x:String>
    <x:String>Banana</x:String>
    <x:String>Cherry</x:String>
    <x:String>Orange</x:String>
    <x:String>Strawberry</x:String>
</ListView>

Veja como a lista é exibida:

Se você mostrar dados agrupados em seu modo de exibição de lista, ItemsPanel determinará como os grupos de itens são dispostos, não como os itens individuais são dispostos. Por exemplo, se você usar o ItemsStackPanel horizontal mostrado anteriormente para mostrar dados agrupados, os grupos serão organizados horizontalmente, mas os itens em cada grupo ainda serão empilhados verticalmente, conforme mostrado aqui:

.

Seleção e interação de itens

Você pode escolher entre várias maneiras de permitir que os usuários interajam com um modo de exibição de lista. Por padrão, os usuários podem selecionar um único item. Você pode alterar a propriedade SelectionMode para habilitar a seleção múltipla ou desabilitar a seleção. Você pode definir a propriedade IsItemClickEnabled para que os usuários cliquem em um item (por exemplo, um botão) para invocar uma ação em vez de selecionar o item.

Esta tabela mostra as maneiras como um usuário pode interagir com um modo de exibição de lista e como você pode responder à interação.

Você pode definir essas propriedades em XAML ou em código, conforme mostrado aqui:

<ListView x:Name="myListView" SelectionMode="Multiple"/>

<GridView x:Name="myGridView" SelectionMode="None" IsItemClickEnabled="True"/>

myListView.SelectionMode = ListViewSelectionMode.Multiple;

myGridView.SelectionMode = ListViewSelectionMode.None;
myGridView.IsItemClickEnabled = true;

Read-only

Você pode definir a propriedade SelectionMode como ListViewSelectionMode.None para desabilitar a seleção de itens. Isso coloca o controle no modo somente leitura, para que ele seja usado para exibir dados, mas não para interagir com ele. Ou seja, a seleção de itens está desativada, mas o controle em si não.

Seleção única

Esta tabela descreve as interações de teclado, rato e toque quando SelectionMode está definido como Single.

Quando SelectionMode é definido como Single, você pode obter o item de dados selecionado da propriedade SelectedItem. Você pode obter o índice na coleção do item selecionado usando a propriedade SelectedIndex. Se nenhum item for selecionado, SelectedItem será nulo e SelectedIndex será -1.

Se você tentar definir um item que não está na coleção Items como SelectedItem, a operação será ignorada e SelectedItem será nulo. No entanto, se você tentar definir SelectedIndex para um índice que está fora do intervalo dos itens na lista, ocorrerá uma exceção System.ArgumentException.

Seleção múltipla

Esta tabela descreve as interações de teclado, mouse e toque quando SelectionMode está definido como Múltiplo.

Seleção alargada

Esta tabela descreve as interações de teclado, mouse e toque quando SelectionMode está definido como Extended.

Quando SelectionMode está definido como Multiple ou Extended, você pode obter os itens de dados selecionados da propriedade SelectedItems.

As propriedades SelectedIndex, SelectedItem e SelectedItems são sincronizadas. Por exemplo, se você definir SelectedIndex como -1, SelectedItem será definido como nulo e SelectedItems estará vazio. E se você definir SelectedItem como nulo, SelectedIndex será definido como -1 e SelectedItems estará vazio.

No modo de seleção múltipla, SelectedItem contém o item que foi selecionado primeiro e Selectedindex contém o índice do item que foi selecionado primeiro.

Responder a alterações de seleção

Para responder a alterações de seleção numa lista, manipule o evento SelectionChanged. No código do manipulador de eventos, você pode obter a lista de itens selecionados da propriedade SelectionChangedEventArgs.AddedItems. Você pode obter todos os itens que foram desmarcados da propriedade SelectionChangedEventArgs.RemovedItems. As coleções AddedItems e RemovedItems contêm no máximo um item, a menos que os usuários selecionem um intervalo de itens mantendo pressionada a tecla Shift.

O exemplo a seguir mostra como manipular o evento SelectionChanged e acessar as várias coleções Item:

<StackPanel HorizontalAlignment="Right">
    <ListView x:Name="listView1" SelectionMode="Multiple"
              SelectionChanged="ListView1_SelectionChanged">
        <x:String>Apricot</x:String>
        <x:String>Banana</x:String>
        <x:String>Cherry</x:String>
        <x:String>Orange</x:String>
        <x:String>Strawberry</x:String>
    </ListView>
    <TextBlock x:Name="selectedItem"/>
    <TextBlock x:Name="selectedIndex"/>
    <TextBlock x:Name="selectedItemCount"/>
    <TextBlock x:Name="addedItems"/>
    <TextBlock x:Name="removedItems"/>
</StackPanel>

private void ListView1_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if (listView1.SelectedItem != null)
    {
        selectedItem.Text =
            "Selected item: " + listView1.SelectedItem.ToString();
    }
    else
    {
        selectedItem.Text =
            "Selected item: null";
    }
    selectedIndex.Text =
        "Selected index: " + listView1.SelectedIndex.ToString();
    selectedItemCount.Text =
        "Items selected: " + listView1.SelectedItems.Count.ToString();
    addedItems.Text =
        "Added: " + e.AddedItems.Count.ToString();
    removedItems.Text =
        "Removed: " + e.RemovedItems.Count.ToString();
}

Modo de clique

Você pode alterar um modo de exibição de lista para que os usuários cliquem em botões e outros itens em vez de selecioná-los. Por exemplo, isso é útil se seu aplicativo abrir uma nova página quando os usuários clicarem em um item em uma lista ou grade.

Para habilitar esse comportamento:

• Defina SelectionMode como Nenhum.
• Defina IsItemClickEnabled como True.
• Manipule o evento ItemClick para fazer algo quando os usuários clicam em um item.

Aqui está uma exibição de lista com itens clicáveis. O código no manipulador de eventos ItemClick abre uma nova página no aplicativo.

<ListView SelectionMode="None"
          IsItemClickEnabled="True"
          ItemClick="ListView1_ItemClick">
    <x:String>Page 1</x:String>
    <x:String>Page 2</x:String>
    <x:String>Page 3</x:String>
    <x:String>Page 4</x:String>
    <x:String>Page 5</x:String>
</ListView>

private void ListView1_ItemClick(object sender, ItemClickEventArgs e)
{
    switch (e.ClickedItem.ToString())
    {
        case "Page 1":
            this.Frame.Navigate(typeof(Page1));
            break;

        case "Page 2":
            this.Frame.Navigate(typeof(Page2));
            break;

        case "Page 3":
            this.Frame.Navigate(typeof(Page3));
            break;

        case "Page 4":
            this.Frame.Navigate(typeof(Page4));
            break;

        case "Page 5":
            this.Frame.Navigate(typeof(Page5));
            break;

        default:
            break;
    }
}

Selecionar um intervalo de itens programaticamente

Às vezes, talvez seja necessário manipular uma seleção de item ListView programaticamente. Por exemplo, pode exibir um botão Selecionar tudo para que os utilizadores possam selecionar todos os itens de uma lista. Nesse caso, geralmente não é muito eficiente adicionar e remover itens da coleção SelectedItems um por um. Cada alteração de item causa um evento SelectionChanged e, quando você trabalha com os itens diretamente em vez de trabalhar com valores de índice, o item é desvirtualizado.

É mais eficiente usar os métodos SelectAll, SelectRangee DeselectRange para modificar a seleção do que usar a propriedade SelectedItems. Esses métodos selecionam (ou desmarcam) itens usando intervalos de índices de itens. Os itens virtualizados permanecem virtualizados, porque apenas o índice é usado. Todos os itens no intervalo especificado são selecionados (ou desmarcados), independentemente do seu estado de seleção original. O evento SelectionChanged ocorre apenas uma vez para cada chamada para esses métodos.

Ao selecionar itens usando intervalos de índice, use a propriedade SelectedRanges para obter todos os intervalos selecionados na lista.

Se a propriedade ItemsSource implementar IItemsRangeInfoe você usar esses métodos para modificar a seleção, as propriedades AddedItems e RemovedItems não serão definidas em SelectionChangedEventArgs. A definição dessas propriedades requer a desvirtualização do objeto do item. Utilize a propriedade SelectedRanges para obter os itens.

Você pode selecionar todos os itens em uma coleção chamando o método SelectAll. No entanto, não há nenhum método correspondente para desmarcar todos os itens. Você pode cancelar a seleção de todos os itens chamando DeselectRange e passando um ItemIndexRange com um valor de FirstIndex igual a 0 e um valor de Length igual ao número de itens na coleção. Isso é mostrado no exemplo a seguir, juntamente com uma opção para selecionar todos os itens.

<StackPanel Width="160">
    <Button Content="Select all" Click="SelectAllButton_Click"/>
    <Button Content="Deselect all" Click="DeselectAllButton_Click"/>
    <ListView x:Name="listView1" SelectionMode="Multiple">
        <x:String>Apricot</x:String>
        <x:String>Banana</x:String>
        <x:String>Cherry</x:String>
        <x:String>Orange</x:String>
        <x:String>Strawberry</x:String>
    </ListView>
</StackPanel>

private void SelectAllButton_Click(object sender, RoutedEventArgs e)
{
    if (listView1.SelectionMode == ListViewSelectionMode.Multiple ||
        listView1.SelectionMode == ListViewSelectionMode.Extended)
    {
        listView1.SelectAll();
    }
}

private void DeselectAllButton_Click(object sender, RoutedEventArgs e)
{
    if (listView1.SelectionMode == ListViewSelectionMode.Multiple ||
        listView1.SelectionMode == ListViewSelectionMode.Extended)
    {
        listView1.DeselectRange(new ItemIndexRange(0, (uint)listView1.Items.Count));
    }
}

Para obter informações sobre como alterar a aparência dos itens selecionados, consulte Contêineres e modelos de item.

Arrastar e soltar

Os controles ListView e GridView oferecem suporte ao arrastar e soltar itens dentro de seus próprios controles e entre eles e outros controles ListView e GridView. Para obter mais informações sobre como implementar a funcionalidade de arrastar e soltar, consulte Arrastar e soltar.

UWP e WinUI 2

As APIs para esses controles existem no namespace Windows.UI.Xaml.Controls.

Obter o código de exemplo

• exemplo de ListView e GridView XAML: demonstra os controles ListView e GridView.
• exemplo de arrastar e soltar XAML: Demonstra arrastar e soltar com o controle ListView.

Recomendamos usar a WinUI 2 mais recente para obter os estilos e modelos mais atuais para todos os controles.

Artigos relacionados

• Listas
• Recipientes e modelos de itens
• Arraste e solte