Conteneurs d’éléments et modèles

Les contrôles ListView et GridView gèrent la façon dont leurs éléments sont organisés (horizontal, vertical, wrapping, etc.) et comment un utilisateur interagit avec les éléments, mais pas la façon dont les éléments individuels sont affichés à l’écran. La visualisation des éléments est gérée par les conteneurs d’éléments. Lorsque vous ajoutez des éléments à une vue de liste, ils sont automatiquement placés dans un conteneur. Le conteneur d’éléments par défaut pour ListView est ListViewItem ; pour GridView, il s’agit de GridViewItem.

API importantes : classe ListView, classe GridView, classe ListViewItem, classe GridViewItem, propriété ItemTemplate, propriété ItemContainerStyle

Éléments ListView et éléments GridView

Comme mentionné ci-dessus, les éléments ListView sont automatiquement placés dans le conteneur ListViewItem et les éléments GridView sont placés dans le conteneur GridViewItem. Ces conteneurs d’éléments sont des contrôles qui ont leur propre style et interaction intégrés, mais peuvent également être hautement personnalisés. Toutefois, avant la personnalisation, veillez à vous familiariser avec le style et les instructions recommandés pour ListViewItem et GridViewItem :

• ListViewItems : les éléments sont principalement axés sur le texte et allongés dans la forme. Les icônes ou les images peuvent apparaître à gauche du texte.
• GridViewItems : les éléments sont généralement carrés en forme, ou au moins moins d’une forme de rectangle allongé. Les éléments sont axés sur l’image et peuvent avoir du texte qui apparaît autour ou superposé sur l’image.

Présentation de la personnalisation

Les contrôles de conteneur (tels que ListViewItem et GridViewItem) se composent de deux parties importantes qui combinent pour créer les visuels finaux affichés pour un élément : le modèle de données et le modèle de contrôle.

• Modèle de données : vous affectez un DataTemplate à la propriété ItemTemplate de l’affichage de liste pour spécifier la façon dont des éléments de données individuels sont affichés.
• Modèle de contrôle : le modèle de contrôle fournit la partie de la visualisation d’élément dont l’infrastructure est responsable, comme les états visuels. Vous pouvez utiliser la propriété ItemContainerStyle pour modifier le modèle de contrôle. En règle générale, vous devez modifier les couleurs de l’affichage de liste pour qu’elles correspondent à votre personnalisation ou modifier la façon dont les éléments sélectionnés sont affichés.

Cette image montre comment le modèle de contrôle et le modèle de données se combinent pour créer le visuel final d’un élément.

Voici le code XAML qui crée cet élément. Nous expliquons les modèles plus tard.

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

Prerequisites

• Nous partons du principe que vous savez comment utiliser un contrôle d’affichage de liste. Pour plus d’informations, consultez l’article ListView et GridView .
• Nous partons également du principe que vous comprenez les styles et les modèles de contrôle, notamment comment utiliser un style inline ou en tant que ressource. Pour plus d’informations, consultez Contrôles de style et modèles de contrôle.

Données

Avant d’examiner plus en détail comment afficher les éléments de données dans un affichage de liste, nous devons comprendre les données à afficher. Dans cet exemple, nous créons un type de données appelé NamedColor. Il combine un nom de couleur, une valeur de couleur et un SolidColorBrush pour la couleur, qui sont exposés sous forme de 3 propriétés : Name, Coloret Brush.

Nous remplissez ensuite une liste avec un NamedColor objet pour chaque couleur nommée dans la classe Colors . La liste est définie en tant que ItemsSource pour l’affichage liste.

Voici le code permettant de définir la classe et de remplir la NamedColors liste.

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); }
        }
    }
}

Modèle de données

Vous spécifiez un modèle de données pour indiquer à la liste comment votre élément de données doit être affiché.

Par défaut, un élément de données est affiché dans l’affichage Liste en tant que représentation de chaîne de l’objet de données auquel il est lié. Si vous affichez les données « NamedColors » dans un affichage de liste sans indiquer à l’affichage de la liste comment il doit ressembler, il affiche simplement ce que la méthode ToString retourne, comme suit.

XAML

<ListView x:Name="colorsListView"/>

Vous pouvez afficher la représentation sous forme de chaîne d’une propriété particulière de l’élément de données en définissant DisplayMemberPath sur cette propriété. Ici, vous définissez DisplayMemberPath sur la Name propriété de l’élément NamedColor .

XAML

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

L’affichage liste affiche désormais les éléments par nom, comme indiqué ici. C’est plus utile, mais ce n’est pas très intéressant et laisse beaucoup d’informations cachées.

En général, vous voulez afficher une représentation plus riche des données. Pour spécifier exactement la façon dont les éléments de l’affichage liste sont affichés, vous créez un DataTemplate. Le code XAML dans l’objet DataTemplate définit la disposition et l’apparence des contrôles qui permettent d’afficher un élément individuel. Les contrôles dans la disposition peuvent être liés aux propriétés d’un objet de données ou avoir du contenu statique défini inline. Vous affectez dataTemplate à la propriété ItemTemplate du contrôle de liste.

Ici, vous définissez un DataTemplate qui affiche un rectangle dans la couleur de l’élément, ainsi que le nom de couleur et les valeurs RVB.

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>

Voici à quoi ressemblent les éléments de données lorsqu’ils sont affichés avec ce modèle de données.

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

Vous souhaiterez peut-être afficher les données dans un GridView. Voici un autre modèle de données qui affiche les données d’une manière plus appropriée pour une disposition de grille. Cette fois, le modèle de données est défini comme une ressource plutôt qu’inline avec le code XAML pour 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}"/>

Lorsque les données sont affichées dans une grille à l’aide de ce modèle de données, elle ressemble à ceci.

Considérations relatives aux performances

Les modèles de données constituent la principale façon de définir l’apparence de votre affichage de liste. Ils peuvent également avoir un impact significatif sur les performances si votre liste affiche un grand nombre d’éléments.

Une instance de chaque élément XAML d’un modèle de données est créée pour chaque élément dans l’affichage liste. Par exemple, le modèle de grille de l’exemple précédent contient 10 éléments XAML (1 Grille, 1 Rectangle, 3 Bordures, 5 TextBlocks). Un GridView qui affiche 20 éléments à l’écran à l’aide de ce modèle de données crée au moins 200 éléments (20*10=200). La réduction du nombre d’éléments dans un modèle de données peut réduire considérablement le nombre total d’éléments créés pour votre affichage de liste. Pour plus d’informations, consultez l’optimisation de l’interface utilisateur ListView et GridView : réduction du nombre d’éléments par élément.

Tenez compte de cette section du modèle de données de grille. Examinons quelques éléments qui réduisent le nombre d’éléments.

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

• Tout d’abord, la mise en page utilise une grille unique. Vous pouvez avoir une grille à colonne unique et placer ces 3 TextBlocks dans un StackPanel, mais dans un modèle de données créé plusieurs fois, vous devez rechercher des façons d’éviter d’incorporer des panneaux de disposition dans d’autres panneaux de disposition.
• Ensuite, vous pouvez utiliser un contrôle Border pour afficher un arrière-plan sans placer réellement d’éléments dans l’élément Border. Un élément Border ne peut avoir qu’un seul élément enfant. Vous devez donc ajouter un panneau de disposition supplémentaire pour héberger les 3 éléments TextBlock au sein de l’élément Border en XAML. En ne rendant pas les TextBlocks en tant qu'enfants de la bordure, vous éliminez le besoin d'un panneau pour les contenir.
• Enfin, vous pouvez placer les TextBlocks à l’intérieur d’un StackPanel et définir les propriétés de bordure sur StackPanel plutôt que d’utiliser un élément Border explicite. Toutefois, l’élément Border est un contrôle plus léger qu’un StackPanel, il a donc moins d’impact sur la performance lorsqu’il est rendu de nombreuses fois.

Utilisation de différentes dispositions pour différents éléments

Modèle de contrôle

Le modèle de contrôle d’un élément contient les visuels qui affichent l’état, comme la sélection, le pointeur et le focus. Ces visuels sont affichés en haut ou en dessous du modèle de données. Voici quelques-uns des visuels par défaut courants dessinés par le modèle de contrôle ListView.

• Survol – Un rectangle gris clair dessiné sous le gabarit de données.
• Sélection : rectangle bleu clair dessiné sous le modèle de données.
• Focus clavier : Visuel de mise au point haute visibilité superposé au modèle d’élément.

L’affichage liste combine les éléments du modèle de données et du modèle de contrôle pour créer les visuels finaux rendus à l’écran. Ici, les visuels d’état sont affichés dans le contexte d’un affichage de liste.

ListViewItemPresenter

Comme nous l’avons noté précédemment sur les modèles de données, le nombre d’éléments XAML créés pour chaque élément peut avoir un impact significatif sur les performances d’un affichage de liste. Étant donné que le modèle de données et le modèle de contrôle sont combinés pour afficher chaque élément, le nombre réel d’éléments nécessaires à l’affichage d’un élément inclut les éléments des deux modèles.

Les contrôles ListView et GridView sont optimisés pour réduire le nombre d’éléments XAML créés par élément. Les visuels ListViewItem sont créés par ListViewItemPresenter, qui est un élément XAML spécial qui affiche des visuels complexes pour le focus, la sélection et d’autres états visuels, sans surcharge de nombreux uiElements.

Pour modifier l’apparence du conteneur d’éléments, utilisez la propriété ItemContainerStyle et fournissez un style avec son TargetType défini sur ListViewItem ou GridViewItem.

Dans cet exemple, vous ajoutez du remplissage à l’objet ListViewItem pour créer un espace entre les éléments de la liste.

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

À présent, l’affichage de liste ressemble à ceci avec un espace entre les éléments.

Dans le style par défaut de ListViewItem, la propriété ContentMargin de ListViewItemPresenter possède un TemplateBinding à la propriété Padding de ListViewItem (<ListViewItemPresenter ContentMargin="{TemplateBinding Padding}"/>). Lorsque nous définissons la propriété Padding, cette valeur est réellement passée à la propriété ListViewItemPresenter ContentMargin.

Pour modifier d'autres propriétés de ListViewItemPresenter qui ne sont pas liées aux propriétés de ListViewItems, vous devez créer un nouveau modèle pour l'objet ListViewItem et y intégrer un nouvel élément ListViewItemPresenter sur lequel vous pourrez modifier les propriétés.

Pour effectuer une copie du modèle par défaut dans Visual Studio

1. Ouvrez le volet Plan du document (Afficher > d’autres contours de document Windows>).
2. Sélectionnez l’élément de liste ou de grille à modifier. Dans cet exemple, vous modifiez l’élément colorsGridView .
3. Cliquez avec le bouton droit et sélectionnez Modifier les modèles > supplémentaires modifier le conteneur d’éléments générés (ItemContainerStyle) > Modifier une copie.
4. Dans la boîte de dialogue Créer une ressource de style, entrez un nom pour le style. Dans cet exemple, vous utilisez colorsGridViewItemStyle.

Une copie du style par défaut est ajoutée à votre application en tant que ressource, et la propriété GridView.ItemContainerStyle est définie sur cette ressource, comme indiqué dans ce code 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}"/>

Vous pouvez maintenant modifier les propriétés de ListViewItemPresenter pour contrôler la case à cocher de sélection, le positionnement des éléments et les couleurs de pinceau pour les états visuels.

Visuels de sélection en ligne et en superposition

ListView et GridView indiquent les éléments sélectionnés de différentes façons en fonction du contrôle et du SelectionMode. Pour plus d’informations sur la sélection d’affichage de liste, consultez ListView et GridView.

Lorsque SelectionMode est défini sur Multiple, une case à cocher de sélection s’affiche dans le cadre du modèle de contrôle de l’élément. Vous pouvez utiliser la propriété SelectionCheckMarkVisualEnabled pour désactiver la case à cocher de sélection en mode Sélection multiple. Toutefois, cette propriété est ignorée dans d’autres modes de sélection. Vous ne pouvez donc pas activer la case à cocher en mode Sélection étendue ou unique.

Vous pouvez définir la propriété CheckMode pour spécifier si la case à cocher est affichée à l’aide du style inline ou du style de superposition.

• Inline : ce style affiche la case à cocher à gauche du contenu et colore l’arrière-plan du conteneur d’éléments pour indiquer la sélection. Il s’agit du style par défaut pour ListView.
• Superposition : ce style affiche la case à cocher en haut du contenu, et colore uniquement la bordure du conteneur d’éléments pour indiquer la sélection. Il s’agit du style par défaut pour GridView.

Ce tableau affiche les visuels par défaut utilisés pour indiquer la sélection.

SelectionMode :	Unique/Étendu	Multiple
En ligne
Overlay

Il existe également plusieurs propriétés de pinceau pour modifier les couleurs de la case à cocher. Nous allons ensuite examiner ces propriétés avec d’autres propriétés de pinceau.

Pinceaux

La plupart des propriétés spécifient les pinceaux utilisés pour différents états visuels. Vous pouvez les modifier pour qu’elles correspondent à la couleur de votre marque.

Ce tableau présente les états visuels Communs et Sélection pour ListViewItem, ainsi que les pinceaux utilisés pour rendre les visuels pour chacun des états. Les images montrent les effets des pinceaux sur les styles visuels de sélection en ligne et en superposition.

Nom de l’état/du pinceau	Style inline	Style de superposition
Normal CheckBoxBrush="Red »
PointerOver PointerOverForeground="DarkOrange » PointerOverBackground="MistyRose » CheckBoxBrush="Red"
Pressé PressedBackground="LightCyan » PointerOverForeground="DarkOrange » CheckBoxBrush="Red"
Sélectionné SelectedForeground="Navy » SelectedBackground="Khaki" CheckBrush="Green » CheckBoxBrush="Red » (inline uniquement)
PointerOverSelected SelectedPointerOverBackground="Lavande" SelectedForeground="Navy » SelectedBackground="Khaki » (superposition uniquement) CheckBrush="Vert" CheckBoxBrush="Red » (inline uniquement)
PressedSelected SelectedPressedBackground="MediumTurquoise" SelectedForeground="Navy » SelectedBackground="Khaki » (superposition uniquement) CheckBrush="Vert" CheckBoxBrush="Red » (inline uniquement)
Concentré FocusBorderBrush="Crimson » FocusSecondaryBorderBrush="Gold" CheckBoxBrush="Red"

ListViewItemPresenter possède d'autres propriétés de Brush pour les espaces réservés de données et les états de glissement. Si vous utilisez le chargement progressif ou le glisser-déplacer dans votre affichage de liste, vous devez réfléchir à la nécessité de modifier également les propriétés supplémentaires du pinceau. Consultez la classe ListViewItemPresenter pour obtenir la liste complète des propriétés que vous pouvez modifier.

Modèles d’éléments XAML développés

Si vous devez apporter plus de modifications que ce qui est autorisé par les propriétés ListViewItemPresenter , si vous devez modifier la position de la case à cocher, par exemple, vous pouvez utiliser les modèles ListViewItemExpanded ou GridViewItemExpanded . Ces modèles sont inclus avec les styles par défaut dans generic.xaml. Ils suivent le modèle XAML standard de création de tous les visuels à partir d'UIElements individuels.

Comme mentionné précédemment, le nombre d’UIElements dans un modèle d’élément a un impact significatif sur les performances de votre affichage de liste. Le remplacement de ListViewItemPresenter par les modèles XAML développés augmente considérablement le nombre d’éléments et n’est pas recommandé lorsque votre affichage de liste affiche un grand nombre d’éléments ou lorsque les performances sont un problème.

Pour personnaliser un modèle XAML développé, vous devez le copier dans votre application et définir la propriété ItemContainerStyle sur votre copie.

Pour copier le modèle développé

1. Définissez la propriété ItemContainerStyle comme indiqué ici pour votre ListView ou GridView.

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

2. Dans le volet Propriétés de Visual Studio, développez la section Divers et recherchez la propriété ItemContainerStyle. (Vérifiez que listView ou GridView est sélectionné.)

3. Cliquez sur le marqueur de propriété de la propriété ItemContainerStyle. (Il s’agit de la petite zone en regard de la zone de texte. Il est coloré en vert pour montrer qu’il est défini sur StaticResource.) Le menu de propriétés s’ouvre.

4. Dans le menu de propriétés, cliquez sur Convertir en nouvelle ressource.

   

5. Dans la boîte de dialogue Créer une ressource de style, entrez un nom pour la ressource, puis cliquez sur OK.

Une copie du modèle développé à partir de generic.xaml est créée dans votre application, que vous pouvez modifier si nécessaire.

Articles connexes

• Listes
• « ListView » et « GridView »