Contêineres e modelos de itens

Os controles ListView e GridView gerenciam como seus itens são organizados (horizontal, vertical, encapsulamento etc...) e como um usuário interage com os itens, mas não como os itens individuais são mostrados na tela. A visualização de item é gerenciada por contêineres de itens. Quando você adiciona itens a uma exibição de lista, eles são colocados automaticamente em um contêiner. O contêiner de item padrão para ListView é ListViewItem; para GridView, é GridViewItem.

APIs importantes: classe ListView, classe GridView, classe ListViewItem, classe GridViewItem, propriedade ItemTemplate, propriedade ItemContainerStyle

Itens de ListView e itens de GridView

Conforme mencionado acima, os itens ListView são colocados automaticamente no contêiner ListViewItem e os itens gridView são colocados no contêiner GridViewItem. Esses contêineres de itens são controles que têm seu próprio estilo interno e interação, mas também podem ser altamente personalizados. No entanto, antes da personalização, certifique-se de se familizar com o estilo e as diretrizes recomendados para ListViewItem e GridViewItem:

• ListViewItems - Os itens são principalmente focados em texto e alongados em forma. Ícones ou imagens podem aparecer à esquerda do texto.
• GridViewItems - Os itens geralmente são quadrados ou têm forma menos alongada, mais próxima de um quadrado. Os itens são focados em imagem e podem ter texto aparecendo ao redor ou sobreposto na imagem.

Introdução à personalização

Os controles de contêiner (como ListViewItem e GridViewItem) consistem em duas partes importantes que se combinam para criar os visuais finais mostrados para um item: o modelo de dados e o modelo de controle.

• Modelo de dados – Você atribui um DataTemplate à propriedade ItemTemplate da exibição de lista para especificar como itens de dados individuais são mostrados.
• Modelo de controle – O modelo de controle fornece a parte da visualização do item pela qual a estrutura é responsável, como estados visuais. Você pode usar a propriedade ItemContainerStyle para modificar o modelo de controle. Normalmente, você faz isso para modificar as cores da exibição de lista para corresponder à sua identidade visual ou alterar a forma como os itens selecionados são mostrados.

Esta imagem mostra como o modelo de controle e o modelo de dados se combinam para criar o visual final para um item.

Aqui está o XAML que cria este item. Explicaremos os modelos mais tarde.

<ListView Width="220" SelectionMode="Multiple">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="x:String">
            <Grid Background="Yellow">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="54"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <Image Source="Assets/placeholder.png" Width="44" Height="44"
                       HorizontalAlignment="Left"/>
                <TextBlock Text="{x:Bind}" Foreground="Black"
                           FontSize="14" Grid.Column="1"
                           VerticalAlignment="Center"
                           Padding="0,0,54,0"/>
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="Background" Value="LightGreen"/>
        </Style>
    </ListView.ItemContainerStyle>
    <x:String>Item 1</x:String>
    <x:String>Item 2</x:String>
    <x:String>Item 3</x:String>
    <x:String>Item 4</x:String>
    <x:String>Item 5</x:String>
</ListView>

Pré-requisitos

• Presumimos que você saiba como usar um controle de exibição de lista. Para obter mais informações, consulte o artigo ListView e GridView .
• Também presumimos que você entenda os estilos de controle e os modelos, incluindo como usar um estilo embutido ou como um recurso. Para obter mais informações, consulte Controles de estilo e modelos de controle.

Os dados

Antes de examinarmos mais detalhadamente como mostrar itens de dados em uma exibição de lista, precisamos entender os dados a serem mostrados. Neste exemplo, criamos um tipo de dados chamado NamedColor. Ele combina um nome de cor, um valor de cor e um SolidColorBrush para a cor, que são apresentados como três propriedades: Name, Color e Brush.

Em seguida, populamos uma lista com um NamedColor objeto para cada cor nomeada na classe Colors . A lista é definida como ItemsSource para a visualização de lista.

Aqui está o código para definir a classe e preencher a NamedColors lista.

C#

using System.Collections.Generic;
using System.Linq;
using System.Reflection;
using Windows.UI;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;

namespace ColorsListApp
{
    public sealed partial class MainPage : Page
    {
        // The list of colors won't change after it's populated, so we use List<T>. 
        // If the data can change, we should use an ObservableCollection<T> intead.
        List<NamedColor> NamedColors = new List<NamedColor>();

        public MainPage()
        {
            this.InitializeComponent();

            // Use reflection to get all the properties of the Colors class.
            IEnumerable<PropertyInfo> propertyInfos = typeof(Colors).GetRuntimeProperties();

            // For each property, create a NamedColor with the property name (color name),
            // and property value (color value). Add it the NamedColors list.
            for (int i = 0; i < propertyInfos.Count(); i++)
            {
                NamedColors.Add(new NamedColor(propertyInfos.ElementAt(i).Name,
                                    (Color)propertyInfos.ElementAt(i).GetValue(null)));
            }

            colorsListView.ItemsSource = NamedColors;
        }
    }

    class NamedColor
    {
        public NamedColor(string colorName, Color colorValue)
        {
            Name = colorName;
            Color = colorValue;
        }

        public string Name { get; set; }

        public Color Color { get; set; }

        public SolidColorBrush Brush
        {
            get { return new SolidColorBrush(Color); }
        }
    }
}

Modelo de dados

Especifique um modelo de dados para informar à exibição de lista como seu item de dados deve ser mostrado.

Por padrão, o item de dados aparece na exibição de lista como a representação em cadeia de caracteres do objeto de dados ao qual ele está associado. Se você mostrar os dados 'NamedColors' em um modo de exibição de lista sem dizer ao modo de exibição de lista como ela deve parecer, ele apenas mostrará o que o método ToString retorna.

XAML

<ListView x:Name="colorsListView"/>

Você pode mostrar a representação de cadeia de caracteres de uma propriedade específica do item de dados definindo o DisplayMemberPath como essa propriedade. Aqui, você define DisplayMemberPath como a Name propriedade do NamedColor item.

XAML

<ListView x:Name="colorsListView" DisplayMemberPath="Name" />

A exibição de lista agora exibe itens por nome, conforme mostrado aqui. É mais útil, mas não é muito interessante e deixa muitas informações ocultas.

Você geralmente quer mostrar uma apresentação mais sofisticada de seus dados. Para especificar exatamente como os itens na exibição de lista são exibidos, crie um DataTemplate. O XAML no DataTemplate define o layout e a aparência dos controles usados para exibir cada item. Os controles no layout podem ser associados a propriedades de um objeto de dados ou ter conteúdo estático definido embutido. Você atribui o DataTemplate à propriedade ItemTemplate do controle de lista.

Aqui, você define um DataTemplate que mostra um Retângulo na cor do item, juntamente com o nome de cor e os valores RGB.

XAML

<ListView x:Name="colorsListView">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="local:NamedColor">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition MinWidth="54"/>
                    <ColumnDefinition Width="32"/>
                    <ColumnDefinition Width="32"/>
                    <ColumnDefinition Width="32"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <Rectangle Width="44" Height="44" Fill="{x:Bind Brush}" Grid.RowSpan="2"/>
                <TextBlock Text="{x:Bind Name}" Grid.Column="1" Grid.ColumnSpan="4"/>
                <TextBlock Text="{x:Bind Color.R}" Grid.Column="1" Grid.Row="1" Foreground="Red"/>
                <TextBlock Text="{x:Bind Color.G}" Grid.Column="2" Grid.Row="1" Foreground="Green"/>
                <TextBlock Text="{x:Bind Color.B}" Grid.Column="3" Grid.Row="1" Foreground="Blue"/>
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Veja a aparência dos itens de dados quando são exibidos com esse modelo de dados.

<ListView.ItemContainerStyle>
    <Style TargetType="ListViewItem">
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    </Style>
</ListView.ItemContainerStyle>

Talvez você queira mostrar os dados em um GridView. Aqui está outro modelo de dados que exibe os dados de uma maneira mais apropriada para um layout de grade. Desta vez, o modelo de dados é definido como um recurso em vez de embutido com o XAML para o GridView.

XAML

<Page.Resources>
    <DataTemplate x:Key="namedColorItemGridTemplate" x:DataType="local:NamedColor">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="32"/>
                <ColumnDefinition Width="32"/>
                <ColumnDefinition Width="32"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="96"/>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>
    
            <Rectangle Width="96" Height="96" Fill="{x:Bind Brush}" Grid.ColumnSpan="3" />
            <!-- Name -->
            <Border Background="#AAFFFFFF" Grid.ColumnSpan="3" Height="40" VerticalAlignment="Top">
                <TextBlock Text="{x:Bind Name}" TextWrapping="Wrap" Margin="4,0,0,0"/>
            </Border>
            <!-- RGB -->
            <Border Background="Gainsboro" Grid.Row="1" Grid.ColumnSpan="3"/>
            <TextBlock Text="{x:Bind Color.R}" Foreground="Red"
                   Grid.Column="0" Grid.Row="1" HorizontalAlignment="Center"/>
            <TextBlock Text="{x:Bind Color.G}" Foreground="Green"
                   Grid.Column="1" Grid.Row="1" HorizontalAlignment="Center"/>
            <TextBlock Text="{x:Bind Color.B}" Foreground="Blue" 
                   Grid.Column="2" Grid.Row="1" HorizontalAlignment="Center"/>
            <!-- HEX -->
            <Border Background="Gray" Grid.Row="2" Grid.ColumnSpan="3">
                <TextBlock Text="{x:Bind Color}" Foreground="White" Margin="4,0,0,0"/>
            </Border>
        </Grid>
    </DataTemplate>
</Page.Resources>

...

<GridView x:Name="colorsGridView" 
          ItemTemplate="{StaticResource namedColorItemGridTemplate}"/>

Quando os dados são mostrados em uma grade usando esse modelo de dados, ele tem esta aparência.

Considerações sobre desempenho

Os modelos de dados são a maneira principal de você definir a aparência do modo de exibição de lista. Eles também podem ter um impacto significativo no desempenho se sua lista exibir um grande número de itens.

Uma instância de cada elemento XAML em um modelo de dados é criada para cada item no modo de exibição de lista. Por exemplo, o modelo de grade no exemplo anterior tem 10 elementos XAML (1 Grade, 1 Retângulo, 3 Bordas, 5 TextBlocks). Um GridView que mostra 20 itens na tela usando esse modelo de dados cria pelo menos 200 elementos (20*10=200). Reduzir o número de elementos em um modelo de dados pode reduzir consideravelmente o número total de elementos criados para o modo de exibição de lista. Para obter mais informações, consulte a otimização da interface do usuário de ListView e GridView: redução da contagem de elementos por item.

Considere esta seção do modelo de dados de grade. Vamos examinar algumas coisas que reduzem a contagem de elementos.

XAML

<!-- RGB -->
<Border Background="Gainsboro" Grid.Row="1" Grid.ColumnSpan="3"/>
<TextBlock Text="{x:Bind Color.R}" Foreground="Red"
           Grid.Column="0" Grid.Row="1" HorizontalAlignment="Center"/>
<TextBlock Text="{x:Bind Color.G}" Foreground="Green"
           Grid.Column="1" Grid.Row="1" HorizontalAlignment="Center"/>
<TextBlock Text="{x:Bind Color.B}" Foreground="Blue" 
           Grid.Column="2" Grid.Row="1" HorizontalAlignment="Center"/>

• Primeiro, o layout usa uma única grade. Você pode ter uma Grade de coluna única e colocar esses 3 TextBlocks em um StackPanel, mas em um modelo de dados que é criado muitas vezes, você deve procurar maneiras de evitar a inserção de painéis de layout em outros painéis de layout.
• Em segundo lugar, você pode usar um controle Border para renderizar um plano de fundo sem realmente colocar itens dentro do elemento Border. Um elemento Border pode ter apenas um elemento filho, portanto, você precisaria adicionar um painel de layout adicional para hospedar os três elementos TextBlock dentro do elemento Border em XAML. Ao não fazer dos TextBlocks filhos da Border, você elimina a necessidade de um painel para conter os TextBlocks.
• Por fim, você pode colocar os TextBlocks dentro de um StackPanel e definir as propriedades de borda no StackPanel em vez de usar um elemento border explícito. No entanto, o elemento Border é um controle mais leve do que um StackPanel, portanto, ele tem menos impacto no desempenho quando renderizado muitas vezes.

Usando layouts diferentes para itens diferentes

Modelo de controle

O modelo de controle de um item contém os visuais que exibem o estado, como seleção, passagem do ponteiro e foco. Esses visuais são renderizados na parte superior ou abaixo do modelo de dados. Alguns dos visuais padrão comuns desenhados pelo modelo de controle ListView são mostrados aqui.

• Focalizar – um retângulo cinza claro desenhado abaixo do modelo de dados.
• Seleção – um retângulo azul claro desenhado abaixo do modelo de dados.
• Foco do teclado: um visual de foco de alta visibilidade desenhado na parte superior do modelo de item.

A exibição de lista combina os elementos do modelo de dados e do modelo de controle para criar os visuais finais renderizados na tela. Aqui, os visuais de estado são mostrados no contexto de uma exibição de lista.

ListViewItemPresenter

Como observamos anteriormente sobre modelos de dados, o número de elementos XAML criados para cada item pode ter um impacto significativo no desempenho de uma exibição de lista. Como o modelo de dados e o modelo de controle são combinados para exibir cada item, o número real de elementos necessários para exibir um item inclui os elementos em ambos os modelos.

Os controles ListView e GridView são otimizados para reduzir o número de elementos XAML criados por item. Os visuais ListViewItem são criados pelo ListViewItemPresenter, que é um elemento XAML especial que exibe visuais complexos para foco, seleção e outros estados visuais, sem a sobrecarga de vários UIElements.

Para modificar a aparência do contêiner de item, use a propriedade ItemContainerStyle e forneça um Estilo com seu TargetType definido como ListViewItem ou GridViewItem.

Neste exemplo, você adiciona preenchimento ao ListViewItem para criar algum espaço entre os itens na lista.

<ListView x:Name="colorsListView">
    <ListView.ItemTemplate>
        <!-- DataTemplate XAML shown in previous ListView example -->
    </ListView.ItemTemplate>

    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="Padding" Value="0,4"/>
        </Style>
    </ListView.ItemContainerStyle>
</ListView>

Agora, a exibição de lista tem esta aparência com espaço entre os itens.

No estilo padrão do ListViewItem, a propriedade ListViewItemPresenter ContentMargin tem um TemplateBinding para a propriedade ListViewItem Padding (<ListViewItemPresenter ContentMargin="{TemplateBinding Padding}"/>). Quando definimos a propriedade Padding, esse valor está realmente sendo passado para a propriedade ContentMargin do ListViewItemPresenter.

Para modificar outras propriedades do ListViewItemPresenter que não estão associadas ao modelo de propriedades de ListViewItems, você precisa criar um novo modelo para o ListViewItem com um novo ListViewItemPresenter no qual você pode modificar as propriedades.

Para fazer uma cópia do modelo padrão no Visual Studio

1. Abra o painel Estrutura de Tópicos do Documento (Exibir > Outra Estrutura de Tópicos do Documento do Windows>).
2. Selecione o elemento de lista ou grade a ser modificado. Neste exemplo, você modificará o colorsGridView elemento.
3. Clique com o botão direito do mouse e selecione Editar Modelos > Adicionais Editar Contêiner de Item Gerado (ItemContainerStyle) > Editar uma Cópia.
4. Na caixa de diálogo Criar Recurso de Estilo, insira um nome para o estilo. Neste exemplo, você usa colorsGridViewItemStyle.

Uma cópia do estilo padrão é adicionada ao seu aplicativo como um recurso e a propriedade GridView.ItemContainerStyle é definida para esse recurso, conforme mostrado neste XAML.

<Style x:Key="colorsGridViewItemStyle" TargetType="GridViewItem">
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
    <Setter Property="TabNavigation" Value="Local"/>
    <Setter Property="IsHoldingEnabled" Value="True"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Margin" Value="0,0,4,4"/>
    <Setter Property="MinWidth" Value="{ThemeResource GridViewItemMinWidth}"/>
    <Setter Property="MinHeight" Value="{ThemeResource GridViewItemMinHeight}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="GridViewItem">
                <ListViewItemPresenter 
                    CheckBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}" 
                    ContentMargin="{TemplateBinding Padding}" 
                    CheckMode="Overlay" 
                    ContentTransitions="{TemplateBinding ContentTransitions}" 
                    CheckBoxBrush="{ThemeResource SystemControlBackgroundChromeMediumBrush}" 
                    DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}" 
                    DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}" 
                    DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}" 
                    DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}" 
                    FocusBorderBrush="{ThemeResource SystemControlForegroundAltHighBrush}" 
                    FocusSecondaryBorderBrush="{ThemeResource SystemControlForegroundBaseHighBrush}" 
                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
                    PointerOverForeground="{ThemeResource SystemControlForegroundBaseHighBrush}" 
                    PressedBackground="{ThemeResource SystemControlHighlightListMediumBrush}" 
                    PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" 
                    PointerOverBackground="{ThemeResource SystemControlHighlightListLowBrush}" 
                    ReorderHintOffset="{ThemeResource GridViewItemReorderHintThemeOffset}" 
                    SelectedPressedBackground="{ThemeResource SystemControlHighlightListAccentHighBrush}" 
                    SelectionCheckMarkVisualEnabled="True" 
                    SelectedForeground="{ThemeResource SystemControlForegroundBaseHighBrush}" 
                    SelectedPointerOverBackground="{ThemeResource SystemControlHighlightListAccentMediumBrush}" 
                    SelectedBackground="{ThemeResource SystemControlHighlightAccentBrush}" 
                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

...

<GridView x:Name="colorsGridView" ItemContainerStyle="{StaticResource colorsGridViewItemStyle}"/>

Agora você pode modificar propriedades no ListViewItemPresenter para controlar a caixa de seleção, o posicionamento do item e as cores do pincel para estados visuais.

Visuais de seleção integrados e sobrepostos

ListView e GridView indicam itens selecionados de diferentes maneiras, dependendo do controle e do SelectionMode. Para obter mais informações sobre a seleção de exibição de lista, consulte ListView e GridView.

Quando SelectionMode é definido como Múltiplo, uma caixa de seleção é mostrada como parte do modelo de controle do item. Você pode usar a propriedade SelectionCheckMarkVisualEnabled para desativar a caixa de seleção no modo seleção múltipla. No entanto, essa propriedade é ignorada em outros modos de seleção, portanto, você não pode ativar a caixa de seleção no modo de seleção Estendido ou Único.

Você pode definir a propriedade CheckMode para especificar se a caixa de seleção é mostrada usando o estilo embutido ou o estilo de sobreposição.

• Embutido: esse estilo mostra a caixa de seleção à esquerda do conteúdo e colore a tela de fundo do contêiner de item para indicar a seleção. Esse é o estilo padrão para ListView.
• Sobreposição: esse estilo mostra a caixa de seleção na parte superior do conteúdo e colore apenas a borda do contêiner de item para indicar a seleção. Esse é o estilo padrão para GridView.

Esta tabela mostra os visuais padrão usados para indicar a seleção.

Modo de Seleção	Único/Estendido	Múltiplo
Embutida
Sobreposição

Também há várias propriedades de pincel para alterar as cores da caixa de seleção. Examinaremos isso em seguida, juntamente com outras propriedades de pincel.

Escovas

Muitas das propriedades especificam os pincéis usados para diferentes estados visuais. Talvez você queira modificá-las para corresponder à cor da sua marca.

Esta tabela mostra os estados visuais Common e Selection para ListViewItem e os pincéis usados para renderizar os visuais de cada estado. As imagens mostram os efeitos dos pincéis nos estilos visuais em linha e de sobreposição.

Nome do estado/pincel	Estilo embutido	Estilo de sobreposição
Normal CheckBoxBrush="vermelho"
PointerOver PointerOverForeground="DarkOrange" PointerOverBackground="MistyRose" CheckBoxBrush="Vermelho"
Pressionado PressedBackground="LightCyan" PointerOverForeground="DarkOrange" CheckBoxBrush="Vermelho"
Selecionado SelectedForeground="Navy" SelectedBackground="Khaki" CheckBrush="Verde" CheckBoxBrush="Red" (somente embutido)
PointerOverSelected SelectedPointerOverBackground="Lavanda" SelectedForeground="Navy" SelectedBackground="Khaki" (somente sobreposição) CheckBrush="Verde" CheckBoxBrush="Red" (somente embutido)
PressedSelected SelectedPressedBackground="MediumTurquoise" SelectedForeground="Navy" SelectedBackground="Khaki" (somente sobreposição) CheckBrush="Verde" CheckBoxBrush="Red" (somente embutido)
Concentrado FocusBorderBrush="Crimson" FocusSecondaryBorderBrush="Gold" CheckBoxBrush="Vermelho"

ListViewItemPresenter tem outras propriedades de pincel para espaços reservados de dados e estados de arrasto. Se você usar o carregamento incremental ou arrastar e soltar no modo de exibição de lista, considere se também precisa modificar essas propriedades de pincel adicionais. Consulte a classe ListViewItemPresenter para obter a lista completa de propriedades que você pode modificar.

Modelos de item XAML expandidos

Se você precisar fazer mais modificações do que o permitido pelas propriedades ListViewItemPresenter , se precisar alterar a posição da caixa de seleção, por exemplo, poderá usar os modelos ListViewItemExpanded ou GridViewItemExpanded . Esses modelos são incluídos com os estilos padrão em generic.xaml. Eles seguem o padrão XAML de construção de todos os visuais a partir de UIElements individuais.

Conforme mencionado anteriormente, o número de UIElements em um modelo de item tem um impacto significativo no desempenho da exibição de lista. Substituir ListViewItemPresenter pelos modelos XAML expandidos aumenta muito a contagem de elementos e não é recomendável quando o modo de exibição de lista mostrará um grande número de itens ou quando o desempenho é uma preocupação.

Para personalizar um modelo XAML expandido, você precisa fazer uma cópia dele em seu aplicativo e definir a propriedade ItemContainerStyle como sua cópia.

Para copiar o modelo expandido

1. Defina a propriedade ItemContainerStyle conforme mostrado aqui para seu ListView ou GridView.

   <ListView ItemContainerStyle="{StaticResource ListViewItemExpanded}"/>
   <GridView ItemContainerStyle="{StaticResource GridViewItemExpanded}"/>
   

2. No painel Propriedades do Visual Studio, expanda a seção Miscellaneous e localize a propriedade ItemContainerStyle. (Verifique se o ListView ou GridView está selecionado.)

3. Clique no marcador da propriedade ItemContainerStyle. (É a caixa pequena ao lado da Caixa de Texto. É colorida de verde para mostrar que está definida como StaticResource.) O menu de propriedades se abre.

4. No menu de propriedades, clique em Converter em Novo Recurso.

   

5. Na caixa de diálogo Criar Recurso de Estilo, insira um nome para o recurso e clique em OK.

Uma cópia do modelo expandido de generic.xaml é criada em seu aplicativo, que você pode modificar conforme necessário.

Artigos relacionados

• Listas
• ListView e GridView