Recipientes 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 itens é gerenciada por contêineres de itens. Quando você adiciona itens a um modo de exibição de lista, eles são automaticamente colocados 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 de GridView

Como 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 e interação internos, mas também podem ser altamente personalizados. No entanto, antes da personalização, certifique-se de familiarizar-se com o estilo recomendado e as diretrizes para ListViewItem e GridViewItem:

• ListViewItems - Os itens são focados principalmente no texto e alongados na forma. Ícones ou imagens podem aparecer à esquerda do texto.
• GridViewItems - Os itens geralmente têm uma forma quadrada ou, pelo menos, menos de uma forma de retângulo alongada. Os itens são focados na 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 do modo de exibição de lista para especificar como os 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 do modo de exibição de lista para corresponder à sua marca ou alterar 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

• Supomos 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 assumimos que você entende estilos e modelos de controle, incluindo como usar um estilo embutido ou como um recurso. Para saber mais, veja Estilizando controles e Modelos de controle.

Os dados

Antes de analisarmos mais profundamente 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, valor de cor e um SolidColorBrush para a cor, que são expostos como 3 propriedades: Name, Color e Brush.

Em seguida, preenchemos uma List com um NamedColor objeto para cada cor nomeada na classe Colors . A lista é definida como ItemsSource para a vista 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

Você especifica um modelo de dados para informar ao modo de exibição de lista como seu item de dados deve ser mostrado.

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. Se você mostrar os dados 'NamedColors' em uma exibição de lista sem dizer à exibição de lista como ela deve parecer, ela apenas mostrará o que o método ToString retornar, desta forma.

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 para essa propriedade. Aqui, você define DisplayMemberPath como a Name propriedade do NamedColor item.

XAML

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

O modo de exibição de lista agora exibe itens por nome, conforme mostrado aqui. É mais útil, mas não é muito interessante e deixa muita informação escondida.

Normalmente, você deseja mostrar uma apresentação mais rica de seus dados. Para especificar exatamente como os itens no modo de 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 um item individual. Os controles no layout podem ser vinculados às 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 Rectangle na cor do item, juntamente com o nome da 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 estar alinhado 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 principal forma de definir a aparência da sua 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 grelha no exemplo anterior tem 10 elementos XAML (1 Grid, 1 Rectangle, 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 significativamente o número total de elementos criados para sua exibição de lista. Para obter mais informações, consulte Otimização da interface do usuário ListView e GridView: redução da contagem de elementos por item.

Considere esta seção do modelo de dados de grelha. Vejamos 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 um único Grid. 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 incorporaçã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 3 elementos TextBlock dentro do elemento Border em XAML. Ao não fazer com que os TextBlocks sejam filhos do Border, elimina-se a necessidade de um painel para conter os TextBlocks.
• Finalmente, 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, tem menos impacto no desempenho quando renderizado muitas vezes.

Usando layouts diferentes para itens diferentes

Modelo de controlo

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

• Hover – 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.

O modo de 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 vista 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 Style 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, o modo de exibição de lista tem esta aparência, com espaço entre os itens.

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

Para modificar outras propriedades do ListViewItemPresenter que não estão vinculadas às propriedades dos ListViewItems, você precisa remodelar o ListViewItem com um novo ListViewItemPresenter no qual seja possível modificar 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 de Documentos do Windows>).
2. Selecione a lista ou o elemento de grade a ser modificado. Neste exemplo, você modifica 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, usa-se colorsGridViewItemStyle.

Uma cópia do estilo padrão é adicionada ao seu aplicativo como um recurso e a propriedade GridView.ItemContainerStyle é definida como 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 em linha e de sobreposição

ListView e GridView indicam itens selecionados de maneiras diferentes, dependendo do controle e do SelectionMode. Para saber mais sobre a seleção do modo de exibição de lista, veja 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 de seleção múltipla. No entanto, essa propriedade é ignorada em outros modos de seleção, portanto, não é possível 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: este estilo mostra a caixa de seleção do lado esquerdo do conteúdo e colore o plano de fundo do contenedor do item para indicar a seleção. Este é 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 do item para indicar a seleção. Este é o estilo padrão para GridView.

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

Modo de Seleção	Único/Estendido	Multiple
Em linha
Sobreposição	Sobrepor seleção única ou estendida

Existem também várias propriedades de pincel para alterar as cores da caixa de verificação. Veremos estas a seguir, juntamente com outras propriedades do pincel.

Pincéis

Muitas das propriedades especificam os pincéis usados para diferentes estados visuais. Você pode querer modificá-los 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 para cada estado. As imagens mostram os efeitos dos pincéis nos estilos visuais de seleção em linha e de sobreposição.

Nome do estado/nome do pincel	Estilo inline	Estilo de sobreposição
Normal CheckBoxBrush="Vermelho"
PointerOver PointerOverForeground="Laranja Escuro" PointerOverBackground="MistyRose" CheckBoxBrush="Vermelho"
Pressionado PressedBackground="LightCyan" PointerOverForeground="Laranja Escuro" CheckBoxBrush="Vermelho"
Selecionados SelectedForeground="Marinha" SelectedBackground="Khaki" CheckBrush="Verde" CheckBoxBrush="Vermelho" (apenas em linha)
PointerOverSelected SelectedPointerOverBackground="Lavanda" SelectedForeground="Azul Marinho" SelectedBackground="Khaki" (somente sobreposição) CheckBrush="Verde" CheckBoxBrush="Vermelho" (apenas em linha)
Pressionado Selecionado SelectedPressedBackground="MédiaTurquesa" SelectedForeground="Azul Marinho" SelectedBackground="Khaki" (somente sobreposição) CheckBrush="Verde" CheckBoxBrush="Vermelho" (apenas em linha)
Focado FocusBorderBrush="Carmesim" FocusSecondaryBorderBrush="Gold" CheckBoxBrush="Vermelho"

ListViewItemPresenter tem outras propriedades de pincel para marcadores de posição de dados e estados de arraste. Se você usar carregamento incremental ou arrastar e soltar em sua exibição de lista, deverá considerar 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 - você pode usar os modelos ListViewItemExpanded ou GridViewItemExpanded . Esses modelos estão incluídos com os estilos padrão em generic.xaml. Eles seguem o padrão XAML na construção de todos os visuais a partir de UIElements individuais.

Como mencionado anteriormente, o número de UIElements em um modelo de item tem um impacto significativo no desempenho da sua exibição de lista. A substituição de ListViewItemPresenter pelos modelos XAML expandidos aumenta consideravelmente a contagem de elementos e não é recomendada quando a exibição de lista mostra 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 Diversos e localize a propriedade ItemContainerStyle. (Verifique se ListView ou GridView está selecionado.)

3. Clique no marcador da propriedade ItemContainerStyle. (É a pequena caixa ao lado da TextBox. É verde colorido para mostrar que está definido como um StaticResource.) O menu de propriedades é aberto.

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