Elementcontainer und Vorlagen

ListView - und GridView-Steuerelemente verwalten, wie ihre Elemente angeordnet werden (horizontal, vertikal, umbrochen usw.) und wie ein Benutzer mit den Elementen interagiert, aber nicht wie die einzelnen Elemente auf dem Bildschirm angezeigt werden. Die Elementvisualisierung wird von Elementcontainern verwaltet. Wenn Sie einer Listenansicht Elemente hinzufügen, werden sie automatisch in einem Container platziert. Der Standardelementcontainer für ListView ist ListViewItem; für GridView ist es GridViewItem.

Wichtige APIs: ListView-Klasse, GridView-Klasse, ListViewItem-Klasse, GridViewItem-Klasse, ItemTemplate-Eigenschaft, ItemContainerStyle-Eigenschaft

ListView-Elemente und GridView-Elemente

Wie bereits erwähnt, werden ListView-Elemente automatisch in den ListViewItem-Container eingefügt, und GridView-Elemente werden in den GridViewItem-Container eingefügt. Bei diesen Elementcontainern handelt es sich um Steuerelemente, die über eine eigene integrierte Formatierung und Interaktion verfügen, aber auch stark angepasst werden können. Stellen Sie jedoch vor der Anpassung sicher, dass Sie sich mit den empfohlenen Formatierungen und Richtlinien für ListViewItem und GridViewItem vertraut machen:

• ListViewItems – Elemente sind in erster Linie textorientiert und langgestreckt. Symbole oder Bilder werden möglicherweise links neben dem Text angezeigt.
• GridViewItems – Elemente sind in der Regel quadratisch oder mindestens weniger in Form eines langgestreckten Rechtecks. Elemente sind bildorientiert und können Text um das Bild herum oder darauf erscheinen lassen.

Einführung in die Anpassung

Containersteuerelemente (z. B. ListViewItem und GridViewItem) bestehen aus zwei wichtigen Teilen, die kombiniert werden, um die endgültigen visuellen Elemente für ein Element zu erstellen: die Datenvorlage und die Steuerelementvorlage.

• Datenvorlage – Sie weisen der ItemTemplate-Eigenschaft der Listenansicht eine DataTemplate zu, um anzugeben, wie einzelne Datenelemente angezeigt werden.
• Steuerelementvorlage – Die Steuerelementvorlage stellt den Teil der Elementvisualisierung bereit, für den das Framework verantwortlich ist, z. B. visuelle Zustände. Sie können die ItemContainerStyle-Eigenschaft verwenden, um die Steuerelementvorlage zu ändern. In der Regel ändern Sie die Listenansichtsfarben entsprechend Ihrem Branding oder ändern, wie ausgewählte Elemente angezeigt werden.

Diese Abbildung zeigt, wie die Steuerelementvorlage und die Datenvorlage kombiniert werden, um das endgültige visuelle Element für ein Element zu erstellen.

Hier sehen Sie den XAML-Code, der dieses Element erstellt. Wir erläutern die Vorlagen später.

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

Voraussetzungen

• Es wird davon ausgegangen, dass Sie wissen, wie Sie ein Listenansichtssteuerelement verwenden. Weitere Informationen finden Sie im Artikel "ListView" und "GridView" .
• Wir gehen auch davon aus, dass Sie Steuerelementstile und -vorlagen verstehen, einschließlich der Verwendung einer Formatvorlage in Zeile oder als Ressource. Weitere Informationen finden Sie unter Formatieren von Steuerelementen und Steuerelementvorlagen.

Die Daten

Bevor wir uns genauer ansehen, wie Datenelemente in einer Listenansicht angezeigt werden, müssen wir die anzuzeigenden Daten verstehen. In diesem Beispiel erstellen wir einen Datentyp namens .In this example, we create a data type called NamedColor. Es kombiniert einen Farbnamen, einen Farbwert und einen SolidColorBrush für die Farbe, die als 3 Eigenschaften verfügbar gemacht werden: Name, Color, und Brush.

Anschließend füllen wir eine Liste mit einem NamedColor Objekt für jede benannte Farbe in der Colors-Klasse auf. Die Liste wird als ItemsSource für die Listenansicht festgelegt.

Hier sehen Sie den Code zum Definieren der Klasse und Füllen der 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); }
        }
    }
}

Datenvorlage

Sie geben eine Datenvorlage an, um der Listenansicht mitzuteilen, wie Das Datenelement angezeigt werden soll.

Datenelemente werden in der Listenansicht standardmäßig als Zeichenfolgendarstellung des Datenobjekts angezeigt, an das sie gebunden sind. Wenn Sie die "NamedColors"-Daten in einer Listenansicht anzeigen, ohne der Listenansicht mitzuteilen, wie sie aussehen soll, zeigt sie einfach an, was die ToString-Methode wie folgt zurückgibt.

XAML

<ListView x:Name="colorsListView"/>

Sie können die Zeichenfolgendarstellung einer bestimmten Eigenschaft des Datenelements anzeigen, indem Sie den DisplayMemberPath auf diese Eigenschaft festlegen. Hier legen Sie DisplayMemberPath auf die Name Eigenschaft des NamedColor Elements fest.

XAML

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

In der Listenansicht werden nun Elemente nach Namen angezeigt, wie hier gezeigt. Es ist nützlicher, aber es ist nicht sehr interessant und hinterlässt viele Informationen verborgen.

In der Regel möchten Sie eine ansprechendere Darstellung Ihrer Daten anzeigen. Um genau anzugeben, wie Elemente in der Listenansicht angezeigt werden, erstellen Sie eine DataTemplate. Der XAML-Code in der DataTemplate definiert das Layout und die Darstellung von Steuerelementen, die zum Anzeigen eines einzelnen Elements verwendet werden. Die Steuerelemente im Layout können an Eigenschaften eines Datenobjekts gebunden werden. Es ist auch möglich, statischen Inhalt intern zu definieren. Sie weisen die DataTemplate der ItemTemplate-Eigenschaft des Listensteuerelements zu.

Hier definieren Sie eine DataTemplate, die ein Rechteck in der Farbe des Elements sowie den Farbnamen und RGB-Werte anzeigt.

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>

So sehen die Datenelemente aus, wenn sie mit dieser Datenvorlage angezeigt werden.

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

Möglicherweise möchten Sie die Daten in einer GridView anzeigen. Hier ist eine weitere Datenvorlage, die die Daten auf eine Weise anzeigt, die für ein Rasterlayout besser geeignet ist. Diesmal wird die Datenvorlage als Ressource definiert, anstatt inline mit dem XAML-Code für das 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}"/>

Wenn die Daten in einem Raster mit dieser Datenvorlage angezeigt werden, sieht sie wie folgt aus.

Leistungsüberlegungen

Datenvorlagen sind die primäre Methode zum Definieren des Aussehens Ihrer Listenansicht. Sie können auch erhebliche Auswirkungen auf die Leistung haben, wenn ihre Liste eine große Anzahl von Elementen anzeigt.

Für jedes Element in der Listenansicht wird eine Instanz jedes XAML-Elements in einer Datenvorlage erstellt. Die Rastervorlage im vorherigen Beispiel enthält beispielsweise 10 XAML-Elemente (1 Grid, 1 Rectangle, 3 Rahmen, 5 TextBlocks). Eine GridView mit 20 Elementen auf dem Bildschirm mit dieser Datenvorlage erstellt mindestens 200 Elemente (20*10=200). Durch das Verringern der Anzahl von Elementen in einer Datenvorlage kann die Gesamtanzahl der elemente, die für ihre Listenansicht erstellt wurden, erheblich reduziert werden. Weitere Informationen finden Sie unter ListView- und GridView-UI-Optimierung: Reduzierung der Elementanzahl pro Element.

Betrachten Sie diesen Abschnitt der Rasterdatenvorlage. Sehen wir uns einige Dinge an, die die Elementanzahl reduzieren.

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

• Zunächst verwendet das Layout ein einzelnes Raster. Sie könnten ein einspaltiges Raster haben und diese 3 TextBlocks in einem StackPanel platzieren, aber in einer Datenvorlage, die viele Male erstellt wird, sollten Sie nach Möglichkeiten suchen, um das Einbetten von Layoutpanels in andere Layoutpanels zu vermeiden.
• Zweitens können Sie ein Rahmensteuerelement verwenden, um einen Hintergrund zu rendern, ohne elemente tatsächlich innerhalb des Border-Elements zu platzieren. Ein Border-Element kann nur ein untergeordnetes Element aufweisen. Daher müssen Sie ein zusätzliches Layoutpanel hinzufügen, um die drei TextBlock-Elemente innerhalb des Border-Elements in XAML zu hosten. Indem Sie die TextBlock-Elemente nicht als untergeordnete Elemente des Rahmens festlegen, entfällt die Notwendigkeit eines Panels, um die TextBlocks zu halten.
• Schließlich können Sie die TextBlocks in einem StackPanel platzieren und die Border-Eigenschaften für das StackPanel festlegen, anstatt ein explizites Border-Element zu verwenden. Das Border-Element ist jedoch ein einfacheres Steuerelement als ein StackPanel- Element, sodass es weniger Auswirkungen auf die Leistung hat, wenn es mehrmals gerendert wird.

Verwenden unterschiedlicher Layouts für verschiedene Elemente

Steuerelement-Vorlage

Die Steuerelementvorlage eines Elements enthält die visuellen Elemente, die den Zustand anzeigen, z. B. Auswahl, Zeiger über und Fokus. Diese visuellen Elemente werden entweder über oder unterhalb der Datenvorlage gerendert. Hier werden einige der gängigen standardmäßigen visuellen Elemente dargestellt, die von der ListView-Steuerelementvorlage gezeichnet werden.

• Darauf zeigen – Ein hellgraues Rechteck, das unter der Datenvorlage gezeichnet wird.
• Auswahl – Ein hellblaues Rechteck, das unterhalb der Datenvorlage gezeichnet wird.
• Tastaturfokus – Ein Fokuselement mit hoher Sichtbarkeit, das auf der Elementvorlage angezeigt wird.

Die Listenansicht kombiniert die Elemente aus der Datenvorlage und der Steuerelementvorlage, um die endgültigen visuellen Elemente zu erstellen, die auf dem Bildschirm gerendert werden. Hier werden die Statusvisualisierungen im Kontext einer Listenansicht angezeigt.

ListViewItemPresenter

Wie wir bereits bei Datenvorlagen erwähnt haben, kann die Anzahl der für jedes Element erstellten XAML-Elemente erhebliche Auswirkungen auf die Leistung einer Listenansicht haben. Da die Datenvorlage und die Steuerelementvorlage kombiniert werden, um jedes Element anzuzeigen, enthält die tatsächliche Anzahl der Elemente, die zum Anzeigen eines Elements erforderlich sind, die Elemente in beiden Vorlagen.

Die ListView- und GridView-Steuerelemente sind optimiert, um die Anzahl der pro Element erstellten XAML-Elemente zu reduzieren. Die visuellen ListViewItem-Elemente werden von ListViewItemPresenter erstellt, bei dem es sich um ein spezielles XAML-Element handelt, das komplexe visuelle Elemente für Fokus, Auswahl und andere visuelle Zustände anzeigt, ohne dass zahlreiche UIElements überlastet sind.

Um das Aussehen des Elementcontainers zu ändern, verwenden Sie die ItemContainerStyle-Eigenschaft und stellen einen Style mit seinem TargetType-Satz auf ListViewItem oder GridViewItem bereit.

In diesem Beispiel fügen Sie dem ListViewItem-Objekt Abstand hinzu, um platz zwischen den Elementen in der Liste zu erstellen.

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

Nun sieht die Listenansicht wie folgt aus, wobei zwischen den Elementen Abstand vorhanden ist.

Im ListViewItem-Standardstil verfügt die ListViewItemPresenter ContentMargin-Eigenschaft über ein TemplateBinding zur ListViewItem Padding-Eigenschaft (<ListViewItemPresenter ContentMargin="{TemplateBinding Padding}"/>). Wenn wir die Padding-Eigenschaft festlegen, wird dieser Wert wirklich an die ListViewItemPresenter ContentMargin-Eigenschaft übergeben.

Um andere ListViewItemPresenter-Eigenschaften zu ändern, die nicht an ListViewItems-Eigenschaften gebunden sind, müssen Sie das ListViewItem-Objekt mit einem neuen ListViewItemPresenter neu entwerfen, für den Sie Eigenschaften ändern können.

So erstellen Sie eine Kopie der Standardvorlage in Visual Studio

1. Öffnen Sie den Dokumentgliederungsbereich (Andere Windows-Dokumentgliederung > anzeigen>).
2. Wählen Sie das zu ändernde Listen- oder Rasterelement aus. In diesem Beispiel ändern Sie das colorsGridView Element.
3. Klicken Sie mit der rechten Maustaste, und wählen Sie " Zusätzliche Vorlagen > bearbeiten Generierter Elementcontainer bearbeiten" (ItemContainerStyle) > "Kopie bearbeiten" aus.
4. Geben Sie im Dialogfeld "Formatvorlagenressource erstellen" einen Namen für die Formatvorlage ein. In diesem Beispiel verwenden Sie colorsGridViewItemStyle.

Eine Kopie des Standardstils wird Ihrer App als Ressource hinzugefügt, und die GridView.ItemContainerStyle-Eigenschaft wird auf diese Ressource festgelegt, wie in diesem XAML gezeigt.

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

Sie können nun Eigenschaften für listViewItemPresenter ändern, um das Auswahlkontrollkästchen, die Elementpositionierung und die Pinselfarben für visuelle Zustände zu steuern.

Visuelle Auswahlanzeigen für Inline und Überlagerung

ListView und GridView geben ausgewählte Elemente je nach Steuerelement und SelectionMode auf unterschiedliche Weise an. Weitere Informationen zur Auswahl der Listenansicht finden Sie unter ListView und GridView.

Wenn SelectionMode auf "Mehrfach" festgelegt ist, wird ein Auswahlkontrollkästchen als Teil der Steuerelementvorlage des Elements angezeigt. Sie können die SelectionCheckMarkVisualEnabled-Eigenschaft verwenden, um das Auswahlkontrollkästchen im Mehrfachauswahlmodus zu deaktivieren. Diese Eigenschaft wird jedoch in anderen Auswahlmodi ignoriert, sodass Sie das Kontrollkästchen im Erweiterten oder Einzelauswahlmodus nicht aktivieren können.

Sie können die CheckMode-Eigenschaft festlegen, um anzugeben, ob das Kontrollkästchen mit dem Inline-Stil oder dem Overlay-Stil angezeigt wird.

• Inline: Dieser Stil zeigt das Kontrollkästchen links neben dem Inhalt an und färbt den Hintergrund des Elementcontainers ein, um die Auswahl anzuzeigen. Dies ist die Standardformatvorlage für ListView.
• Überlagerung: Dieser Stil zeigt das Kontrollkästchen über dem Inhalt an; es färbt nur den Rahmen des Elementcontainers, um die Auswahl anzuzeigen. Dies ist die Standardformatvorlage für GridView.

Diese Tabelle enthält die standardmäßigen visuellen Elemente, die zum Angeben der Auswahl verwendet werden.

SelectionMode:	Einzeln/Erweitert	Multiple
Integriert
Überlagerung

Es gibt auch mehrere Pinseleigenschaften, um die Farben des Kontrollkästchens zu ändern. Diese werden wir zusammen mit anderen Pinseleigenschaften betrachten.

Bürsten

Viele der Eigenschaften geben die Pinsel an, die für unterschiedliche visuelle Zustände verwendet werden. Möglicherweise möchten Sie diese so ändern, dass sie der Farbe Ihrer Marke entsprechen.

Diese Tabelle enthält die visuellen Zustände "Common" und "Selection" für ListViewItem und die Pinsel, mit denen die visuellen Elemente für jeden Zustand gerendert werden. Die Bilder zeigen die Effekte der Pinsel sowohl auf den Inline- als auch auf den Overlay-Auswahlstilen.

Zustand/Pinselname	Inline-Stil	Überlagerungsstil
Normal CheckBoxBrush="Red"
PointerOver PointerOverForeground="DarkOrange" PointerOverBackground="MistyRose" CheckBoxBrush="Red"
Gedrückt PressedBackground="LightCyan" PointerOverForeground="DarkOrange" CheckBoxBrush="Red"
Ausgewählt SelectedForeground="Navy" SelectedBackground="Khaki" CheckBrush="Green" CheckBoxBrush="Red" (nur Inline)
PointerOverSelected SelectedPointerOverBackground="Lavendel" SelectedForeground="Navy" SelectedBackground="Khaki" (nur Overlay) CheckBrush="Grün" CheckBoxBrush="Red" (nur Inline)
PressedSelected SelectedPressedBackground="MediumTurquoise" SelectedForeground="Navy" SelectedBackground="Khaki" (nur Overlay) CheckBrush="Grün" CheckBoxBrush="Red" (nur Inline)
Konzentriert FocusBorderBrush="Crimson" FocusSecondaryBorderBrush="Gold" CheckBoxBrush="Red"

ListViewItemPresenter verfügt über andere Pinseleigenschaften für Datenplatzhalter und Ziehzustände. Wenn Sie inkrementelles Laden oder Ziehen und Ablegen in der Listenansicht verwenden, sollten Sie überlegen, ob Sie diese zusätzlichen Pinseleigenschaften auch ändern müssen. Die vollständige Liste der Eigenschaften, die Sie ändern können, finden Sie in der ListViewItemPresenter-Klasse.

Erweiterte XAML-Elementvorlagen

Wenn Sie mehr Änderungen vornehmen müssen als die von den ListViewItemPresenter-Eigenschaften zulässigen - wenn Sie beispielsweise die Position des Kontrollkästchens ändern müssen - können Sie die Vorlagen ListViewItemExpanded oder GridViewItemExpanded verwenden. Diese Vorlagen sind in den Standardstilen in generic.xaml enthalten. Sie folgen dem standardmäßigen XAML-Muster zum Erstellen aller visuellen Elemente aus einzelnen UIElements.

Wie bereits erwähnt, hat die Anzahl der UIElements in einer Elementvorlage erhebliche Auswirkungen auf die Leistung Ihrer Listenansicht. Das Ersetzen von ListViewItemPresenter durch die erweiterten XAML-Vorlagen erhöht die Elementanzahl erheblich und wird nicht empfohlen, wenn ihre Listenansicht eine große Anzahl von Elementen anzeigt oder wenn die Leistung ein Problem darstellt.

Zum Anpassen einer erweiterten XAML-Vorlage müssen Sie eine Kopie davon in Ihrer App erstellen und die ItemContainerStyle-Eigenschaft auf Ihre Kopie festlegen.

So kopieren Sie die erweiterte Vorlage

1. Legen Sie die ItemContainerStyle-Eigenschaft wie hier gezeigt für Ihre ListView oder GridView fest.

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

2. Erweitern Sie im Eigenschaftenbereich von Visual Studio den Abschnitt "Verschiedenes", und suchen Sie die ItemContainerStyle-Eigenschaft. (Stellen Sie sicher, dass listView oder GridView ausgewählt ist.)

3. Klicken Sie auf die Eigenschaftsmarkierung für die ItemContainerStyle-Eigenschaft. (Es ist das kleine Feld neben dem Textfeld. Es ist grün gefärbt, um anzuzeigen, dass es auf eine StaticResource festgelegt ist.) Das Eigenschaftenmenü wird geöffnet.

4. Klicken Sie im Eigenschaftenmenü auf "In neue Ressource konvertieren".

   

5. Geben Sie im Dialogfeld "Formatvorlagenressource erstellen" einen Namen für die Ressource ein, und klicken Sie auf "OK".

Eine Kopie der erweiterten Vorlage aus "generic.xaml" wird in Ihrer App erstellt, die Sie nach Bedarf ändern können.

Verwandte Artikel

• Listen
• ListView und GridView