Contenedores de artículos y plantillas

Los controles ListView y GridView administran cómo se organizan sus elementos (horizontal, vertical, encapsulado, etc.) y cómo interactúa un usuario con los elementos, pero no cómo se muestran los elementos individuales en la pantalla. La visualización de elementos se administra mediante contenedores de elementos. Al agregar elementos a una vista de lista, se colocan automáticamente en un contenedor. El contenedor de elementos predeterminado para ListView es ListViewItem; para GridView, es GridViewItem.

API importantes: clase ListView, clase GridView, clase ListViewItem, clase GridViewItem, propiedad ItemTemplate, propiedad ItemContainerStyle

Elementos ListView y elementos GridView

Como se mencionó anteriormente, los elementos ListView se colocan automáticamente en el contenedor ListViewItem y los elementos GridView se colocan en el contenedor GridViewItem. Estos contenedores de elementos son controles que tienen su propio estilo y interacción integrados, pero también se pueden personalizar de forma muy personalizada. Sin embargo, antes de la personalización, asegúrate de familiarizarte con los estilos y directrices recomendados para ListViewItem y GridViewItem:

• ListViewItems: los elementos se centran principalmente en el texto y tienen una forma alargada. Los iconos o imágenes pueden aparecer a la izquierda del texto.
• GridViewItems - Los elementos suelen ser cuadrados en su forma o al menos menos como una forma de rectángulo alargado. Los elementos se centran en la imagen y pueden tener texto alrededor o superpuesto en la imagen.

Introducción a la personalización

Los controles de contenedor (como ListViewItem y GridViewItem) constan de dos partes importantes que se combinan para crear los objetos visuales finales que se muestran para un elemento: la plantilla de datos y la plantilla de control.

• Plantilla de datos - Se asigna un DataTemplate a la propiedad ItemTemplate de la vista de lista para especificar cómo se muestran los elementos de datos individuales.
• Plantilla de control: la plantilla de control proporciona la parte de la visualización de elementos de la cual el marco es responsable, como los estados visuales. Puede usar la propiedad ItemContainerStyle para modificar la plantilla de control. Normalmente, lo hace para modificar los colores de la vista de lista para que coincidan con la personalización de marca o cambiar cómo se muestran los elementos seleccionados.

En esta imagen se muestra cómo se combinan la plantilla de control y la plantilla de datos para crear el objeto visual final de un elemento.

Este es el CÓDIGO XAML que crea este elemento. Explicaremos las plantillas más adelante.

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

Prerrequisitos

• Se supone que sabe cómo usar un control de vista de lista. Para obtener más información, consulta el artículo ListView y GridView .
• También se supone que comprende los estilos de control y las plantillas, incluido cómo usar un estilo en línea o como recurso. Para obtener más información, consulta Controles de estilo y Plantillas de control.

Los datos

Antes de profundizar en cómo mostrar elementos de datos en una vista de lista, es necesario comprender los datos que se van a mostrar. En este ejemplo, creamos un tipo de datos denominado NamedColor. Combina un nombre de color, un valor de color y un SolidColorBrush para el color, que se exponen como 3 propiedades: Name, Colory Brush.

A continuación, rellenamos una lista con un NamedColor objeto para cada color con nombre en la clase Colors . La lista se configura como ItemsSource para la vista de lista.

Este es el código para definir la clase y rellenar la 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); }
        }
    }
}

Plantilla de datos

Especifique una plantilla de datos para indicar a la vista de lista cómo se debe mostrar el elemento de datos.

De manera predeterminada, un elemento de datos se muestra en la vista de lista como una representación de cadena del objeto de datos al que está enlazado. Si muestra los datos de "NamedColors" en una vista de lista sin indicar a la vista de lista cómo debería ser, simplemente muestra lo que devuelve el método ToString , como este.

XAML

<ListView x:Name="colorsListView"/>

Puede mostrar la representación de cadena de una propiedad determinada del elemento de datos estableciendo DisplayMemberPath en esa propiedad. Aquí, establezca DisplayMemberPath en la propiedad Name del elemento NamedColor.

XAML

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

La vista de lista ahora muestra los elementos por nombre, como se muestra aquí. Es más útil, pero no es muy interesante y deja una gran cantidad de información oculta.

Por lo general, preferirás mostrar una presentación más completa de los datos. Para especificar exactamente cómo se muestran los elementos de la vista de lista, cree una clase DataTemplate. El lenguaje XAML de la clase DataTemplate define el diseño y la apariencia de los controles usados para mostrar un elemento individual. Los controles del diseño se pueden enlazar a las propiedades de un objeto de datos o pueden tener contenido estático definido en línea. Asigne dataTemplate a la propiedad ItemTemplate del control de lista.

En este caso, se define una dataTemplate que muestra un rectángulo en el color del elemento, junto con el nombre de color y los 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>

Este es el aspecto de los elementos de datos cuando se muestran con esta plantilla de datos.

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

Podría querer mostrar los datos en un GridView. Esta es otra plantilla de datos que muestra los datos de una manera más adecuada para un diseño de cuadrícula. Esta vez, la plantilla de datos se define como un recurso en lugar de en línea con el XAML para 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}"/>

Cuando los datos se muestran en una cuadrícula mediante esta plantilla de datos, tiene este aspecto.

Consideraciones sobre el rendimiento

Las plantillas de datos son la forma principal de definir el aspecto de la vista de lista. También pueden tener un impacto significativo en el rendimiento si la lista muestra un gran número de elementos.

Se crea una instancia de cada elemento XAML de una plantilla de datos para cada elemento de la vista de lista. Por ejemplo, la plantilla de cuadrícula del ejemplo anterior tiene 10 elementos XAML (1 Cuadrícula, 1 Rectángulo, 3 Bordes, 5 TextBlocks). GridView que muestra 20 elementos en pantalla con esta plantilla de datos crea al menos 200 elementos (20*10=200). Reducir el número de elementos de una plantilla de datos puede reducir considerablemente el número total de elementos creados para la vista de lista. Para obtener más información, consulta Optimización de la interfaz de usuario de ListView y GridView: Reducción del recuento de elementos por elemento.

Tenga en cuenta esta sección de la plantilla de datos de cuadrícula. Echemos un vistazo a algunas cosas que reducen el recuento 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"/>

• En primer lugar, el diseño usa una sola cuadrícula. Podría tener una cuadrícula de una sola columna y colocar estos 3 TextBlocks en un StackPanel, pero en una plantilla de datos que se genera muchas veces, debe buscar formas de evitar insertar paneles de diseño dentro de otros paneles de diseño.
• En segundo lugar, puede usar un control Border para representar un fondo sin colocar realmente elementos dentro del elemento Border. Un elemento Border solo puede tener un elemento secundario, por lo que tendrías que agregar un panel de diseño adicional para hospedar los 3 elementos TextBlock dentro del elemento Border en XAML. Al no hacer que los elementos TextBlocks sean hijos de la Border, elimina la necesidad de un panel para contener los TextBlocks.
• Por último, podría colocar textBlocks dentro de stackPanel y establecer las propiedades de borde en StackPanel en lugar de usar un elemento Border explícito. Sin embargo, el elemento Border es un control más ligero que StackPanel, por lo que tiene menos impacto en el rendimiento cuando se renderiza muchas veces.

Uso de diseños diferentes para distintos elementos

Plantilla de control

La plantilla de control de un elemento contiene los objetos visuales que muestran el estado, como la selección, el puntero y el foco. Estos objetos visuales se representan sobre o debajo de la plantilla de datos. Aquí se muestran algunos de los objetos visuales predeterminados comunes dibujados por la plantilla de control ListView.

• Mantener el puntero: rectángulo gris claro dibujado debajo de la plantilla de datos.
• Selección: rectángulo azul claro dibujado debajo de la plantilla de datos.
• Foco de teclado: un elemento visual de foco de alta visibilidad dibujado en la parte superior de la plantilla del elemento.

La vista de lista combina los elementos de la plantilla de datos y la plantilla de control para crear los objetos visuales finales representados en la pantalla. Aquí, los objetos visuales de estado se muestran en el contexto de una vista de lista.

ListViewItemPresenter

Como hemos indicado anteriormente sobre las plantillas de datos, el número de elementos XAML creados para cada elemento puede tener un impacto significativo en el rendimiento de una vista de lista. Dado que la plantilla de datos y la plantilla de control se combinan para mostrar cada elemento, el número real de elementos necesarios para mostrar un elemento incluye los elementos de ambas plantillas.

Los controles ListView y GridView están optimizados para reducir el número de elementos XAML creados por elemento. Los objetos visuales ListViewItem se crean mediante listViewItemPresenter, que es un elemento XAML especial que muestra objetos visuales complejos para el foco, la selección y otros estados visuales, sin la sobrecarga de numerosos UIElements.

Para modificar el aspecto del contenedor de elementos, use la propiedad ItemContainerStyle y proporcione un Style con su TargetType establecido en ListViewItem o GridViewItem.

En este ejemplo, agregará relleno al listViewItem para crear espacio entre los elementos de la 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>

Ahora la vista de lista tiene este aspecto con espacio entre los elementos.

En el estilo predeterminado ListViewItem, la propiedad ListViewItemPresenter ContentMargin tiene un TemplateBinding a la propiedad ListViewItem Padding (<ListViewItemPresenter ContentMargin="{TemplateBinding Padding}"/>). Cuando establecemos la propiedad Padding, ese valor se pasa realmente a la propiedad ListViewItemPresenter ContentMargin.

Para modificar otras propiedades de ListViewItemPresenter que no están enlazadas a las propiedades de ListViewItems, debe redefinir el ListViewItem con un nuevo ListViewItemPresenter en el que pueda modificar las propiedades.

Para realizar una copia de la plantilla predeterminada en Visual Studio

1. Abra el panel Esquema del documento (Ver > otro esquema de documento de Windows>).
2. Seleccione la lista o el elemento de cuadrícula que se va a modificar. En este ejemplo, modifica el elemento colorsGridView.
3. Haga clic con el botón derecho y seleccione Editar plantillas > adicionales Editar contenedor de elementos generados (ItemContainerStyle) > Editar una copia.
4. En el cuadro de diálogo Crear recurso de estilo, escriba un nombre para el estilo. En este ejemplo, se usa colorsGridViewItemStyle.

Se agrega una copia del estilo predeterminado a la aplicación como un recurso y la propiedad GridView.ItemContainerStyle se establece en ese recurso, como se muestra en este 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}"/>

Ahora puede modificar las propiedades de ListViewItemPresenter para controlar la casilla de selección, el posicionamiento de elementos y los colores de pincel para los estados visuales.

Objetos visuales de selección insertados y superpuestos

ListView y GridView indican los elementos seleccionados de diferentes maneras según el control y selectionMode. Para obtener más información sobre la selección de la vista de lista, consulta ListView y GridView.

Cuando SelectionMode se establece en Multiple, se muestra una casilla de selección como parte de la plantilla de control del elemento. Puede usar la propiedad SelectionCheckMarkVisualEnabled para desactivar la casilla de selección en modo de selección múltiple. Sin embargo, esta propiedad se omite en otros modos de selección, por lo que no se puede activar la casilla en modo de selección extendida o única.

Puede establecer la propiedad CheckMode para especificar si la casilla se muestra mediante el estilo insertado o el estilo de superposición.

• En línea: Este estilo muestra la casilla a la izquierda del contenido y colorea el fondo del contenedor de elementos para indicar la selección. Este es el estilo predeterminado para ListView.
• Superposición: Este estilo muestra la casilla de verificación en la parte superior del contenido y colorea solo el borde del contenedor del elemento para indicar la selección. Este es el estilo predeterminado para GridView.

En esta tabla se muestran los objetos visuales predeterminados que se usan para indicar la selección.

Modo de Selección	Único/Extendido	Múltiple
Insertado
Overlay

También hay varias propiedades de pincel para cambiar los colores de la casilla de verificación. Veremos estos elementos a continuación junto con otras propiedades del pincel.

Pinceles

Muchas de las propiedades especifican los pinceles usados para diferentes estados visuales. Es posible que quiera modificarlos para que coincidan con el color de la marca.

En esta tabla se muestran los estados visuales Common y Selection para ListViewItem y los pinceles usados para representar los objetos visuales para cada estado. Las imágenes muestran los efectos de los pinceles en los estilos visuales de selección en línea e incrustados.

Nombre del estado/herramienta de pincel	Estilo en línea	Estilo de superposición
Normal CheckBoxBrush="Red"
PointerOver PointerOverForeground="DarkOrange" PointerOverBackground="MistyRose" CheckBoxBrush="Rojo"
Presionado PressedBackground="LightCyan" PointerOverForeground="DarkOrange" CheckBoxBrush="Rojo"
seleccionado SelectedForeground="Navy" SelectedBackground="Khaki" CheckBrush="Green" CheckBoxBrush="Red" (solo en línea)
PointerOverSelected SelectedPointerOverBackground="Lavanda" SelectedForeground="Navy" SelectedBackground="Khaki" (solo superposición) CheckBrush="Verde" CheckBoxBrush="Red" (solo en línea)
PressedSelected SelectedPressedBackground="MediumTurquoise" SelectedForeground="Navy" SelectedBackground="Khaki" (solo superposición) CheckBrush="Verde" CheckBoxBrush="Red" (solo en línea)
Centrado FocusBorderBrush="Crimson" FocusSecondaryBorderBrush="Gold" CheckBoxBrush="Rojo"

ListViewItemPresenter tiene otras propiedades de brocha para marcadores de posición de datos y estados de arrastre. Si usa la carga incremental o arrastrar y soltar en la vista de lista, debe considerar si también debe modificar estas propiedades de pincel adicionales. Consulte la clase ListViewItemPresenter para obtener la lista completa de propiedades que puede modificar.

Plantillas de elementos XAML expandidas

Si necesita realizar más modificaciones de las que permiten las propiedades ListViewItemPresenter , si necesita cambiar la posición de la casilla, por ejemplo, puede usar las plantillas ListViewItemExpanded o GridViewItemExpanded . Estas plantillas se incluyen con los estilos predeterminados en generic.xaml. Siguen el patrón XAML estándar de creación de todos los objetos visuales a partir de UIElements individuales.

Como se mencionó anteriormente, el número de UIElements en una plantilla de elemento tiene un impacto significativo en el rendimiento de la vista de lista. Reemplazar ListViewItemPresenter por las plantillas XAML expandidas aumenta considerablemente el recuento de elementos y no se recomienda cuando la vista de lista muestre un gran número de elementos o cuando el rendimiento sea un problema.

Para personalizar una plantilla XAML expandida, debes hacer una copia de ella en la aplicación y establecer la propiedad ItemContainerStyle en la copia.

Para copiar la plantilla expandida

1. Establezca la propiedad ItemContainerStyle como se muestra aquí para listView o GridView.

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

2. En el panel Propiedades de Visual Studio, expanda la sección Varios y busque la propiedad ItemContainerStyle. (Asegúrese de que está seleccionado ListView o GridView).

3. Haga clic en el marcador de propiedad para la propiedad ItemContainerStyle. (Es la caja pequeña junto al cuadro de texto. Está coloreada de verde para indicar que está establecido en StaticResource.) Se abre el menú de propiedades.

4. En el menú de propiedades, haga clic en Convertir en nuevo recurso.

   

5. En el cuadro de diálogo Crear recurso de estilo, escriba un nombre para el recurso y haga clic en Aceptar.

Se crea una copia de la plantilla expandida de generic.xaml en la aplicación, que puedes modificar según sea necesario.

Artículos relacionados

• Listas
• ListView y GridView