Elementcontainer und Vorlagen

Die ListView- und GridView-Steuerelemente verwalten, wie ihre Elemente angeordnet werden (horizontal, vertikal, an welcher Stelle der Umbruch in die nächste Zeile erfolgt, usw.), und wie die Benutzer mit den Elementen interagieren, nicht jedoch, wie die einzelnen Elemente auf dem Bildschirm angezeigt werden. Die Visualisierung der Elemente wird von Elementcontainern verwaltet. Wenn Sie einer Listenansicht Elemente hinzufügen, werden diese 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

Hinweis

ListView und GridView sind beide von der Klasse ListViewBase abgeleitet, sodass sie dieselbe Funktionalität haben, Daten jedoch unterschiedlich anzeigen. In diesem Artikel beziehen sich Aussagen zur Listenansicht sowohl auf die ListView- als auch die GridView-Steuerelemente, falls nicht anders angegeben. Möglicherweise werden Klassen wie ListView oder ListViewItem genannt. Das Präfix List kann jedoch durch Grid für das entsprechende Rastersteuerelement ersetzt werden (GridView oder GridViewItem).

ListView- und GridView-Elemente

Wie bereits erwähnt, werden ListView-Elemente automatisch im ListViewItem-Container platziert, und GridView-Elemente werden im GridViewItem-Container abgelegt. Diese Elementcontainer sind Steuerelemente, die über eigene integrierte Formatierungen und Interaktionen verfügen, die aber auch hochgradig angepasst werden können. Vor einer Anpassung sollten Sie jedoch sicherstellen, dass Sie sich mit den empfohlenen Formatierungen und Richtlinien für ListViewItem und GridViewItem vertraut machen:

• ListViewItems : Elemente sind in erster Linie textorientiert und in der Form langgestreckt. Symbole oder Bilder können links neben dem Text angezeigt werden.
• GridViewItems – Die Elemente sind in der Regel eher quadratisch oder zumindest ein nicht sehr längliches Rechteck. Die Elemente sind bildorientiert, und Text kann die Bilder umgeben oder überlagern.

Einführung in die Anpassung

Containersteuerelemente (wie ListViewItem und GridViewItem) bestehen aus zwei wichtigen Komponenten, die zusammen die endgültige visuelle Darstellung für ein Element erstellen, der Datenvorlage und der Steuerelementvorlage.

• Datenvorlage: Sie legen eine DataTemplate für die ItemTemplate-Eigenschaft der Listenansicht fest, um anzugeben, wie die einzelnen Datenelemente angezeigt werden.
• Steuerelementvorlage: Die Steuerelementvorlage ist die Komponente für die Visualisierung des Elements, für die das Framework verantwortlich ist, beispielsweise optische Zustände. Sie können die ItemContainerStyle-Eigenschaft verwenden, um die Steuerelementvorlage zu ändern. In der Regel tun Sie dies, um die Farben der Listenansicht entsprechend Ihrem Branding zu ändern, oder um zu ändern, wie ausgewählte Elemente angezeigt werden.

Diese Abbildung zeigt, wie die Steuerelementvorlage und die Datenvorlage zusammen die endgültige optische Darstellung für ein Element festlegen.

Nachstehend finden Sie den XAML-Code zur Erstellung dieser Elemente. Die Vorlagen werden zu einem späteren Zeitpunkt erläutert.

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

Wichtig

Datenvorlagen und Steuerelementvorlagen werden verwendet, um den Stil für viele andere Steuerelemente als ListView und GridView anzupassen. Hierzu gehören Steuerelemente mit eigenen integrierten Formatierungen wie FlipView und benutzerdefiniert erstellte Steuerelemente wie ItemsRepeater. Obwohl das unten stehende Beispiel für ListView/GridView spezifisch ist, lassen sich die Konzepte auf viele andere Steuerelemente anwenden.

Voraussetzungen

• Es wird davon ausgegangen, dass Sie wissen, wie ein Listenansicht-Steuerelement verwendet wird. Weitere Informationen finden Sie in dem Artikel ListView und GridView.
• Weiterhin wird vorausgesetzt, dass Sie Kenntnisse zu Steuerelementstilen und -vorlagen besitzen und wissen, wie Sie einen Stil inline oder als Ressource verwenden. Weitere Informationen finden Sie unter Formatieren von Steuerelementen und Steuerelementvorlagen.

Die Daten

Bevor wir genauer betrachten, wie Datenelemente in einer Listenansicht angezeigt werden, müssen wir die Daten, die angezeigt werden sollen, kennen. In diesem Beispiel erstellen wir einen Datentyp mit dem Namen NamedColor. Er besteht aus einem Farbnamen, einem Farbwert und einem SolidColorBrush-Objekt für die Farbe, die als 3 Eigenschaften verfügbar sind: Name, Color und Brush.

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

Hier ist der Code zum Definieren der Klasse und Zum Auffü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 sollten, wird der Inhalt so angezeigt, wie von der ToString-Methode zurückgegeben. Dies sieht dann so aus.

XAML

<ListView x:Name="colorsListView"/>

Sie können die Zeichenfolgendarstellung einer bestimmten Eigenschaft des Datenelements anzeigen, indem Sie den DisplayMemberPath zur Eigenschaft festlegen. Hier legen Sie „DisplayMemberPath“ auf den Wert für die Name-Eigenschaft des NamedColor-Elements fest.

XAML

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

Die Listenansicht zeigt jetzt die Elemente nach Namen sortiert an, wie hier dargestellt. Es ist nützlicher, aber es ist nicht sehr interessant und lä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 DataTemplate der ItemTemplate-Eigenschaft des Listensteuerelements zu.

Wichtig

Sie können itemTemplate und DisplayMemberPath nicht gleichzeitig verwenden. Wenn beide Eigenschaften festgelegt sind, wird eine Ausnahmebedingung ausgelöst.

Hier definieren Sie ein DataTemplate-Objekt, durch das Rectangle in der Farbe des Elements zusammen mit dem Farbnamen und den RGB-Werten angezeigt wird.

Hinweis

Wenn Sie die x:Bind-Markuperweiterung in DataTemplate verwenden, müssen Sie den Datentyp (x:DataType) für „DataTemplate“ angeben.

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.

Wichtig

Der Inhalt von ListViewItems wird standardmäßig linksbündig ausgerichtet, d. h. ihre HorizontalContentAlignmentProperty ist auf „Links“ festgelegt. Wenn Sie über mehrere Elemente innerhalb eines ListViewItems verfügen, die horizontal aneinander angrenzen, z. B. horizontal gestapelte Elemente oder Elemente, die in derselben Rasterzeile platziert sind, werden diese alle linksbündig ausgerichtet und nur durch ihre definierten Ränder voneinander getrennt.

Damit Elemente so verteilt werden, dass sie den gesamten Raum eines ListItems füllen, müssen Sie die „HorizontalContentAlignmentProperty“ auf Stretch (Strecken) festlegen, indem Sie innerhalb Ihrer ListView einen Setter verwenden:

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

Möglicherweise möchten Sie die Daten in einer GridView anzuzeigen. Hier sehen Sie eine andere Datenvorlage, die die Daten besser geeignet für ein Rasterlayout anzeigt. Dieses Mal ist die Datenvorlage als Ressource definiert, nicht in dem XAML-Code für die 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 mithilfe dieser Datenvorlage in einem Raster angezeigt werden, sieht dies wie folgt aus.

Leistungserwägungen

Datenvorlagen sind der bevorzugte Weg für die Definition des Aussehens Ihrer Listenansicht. Sie können auch eine erhebliche Auswirkung auf die Leistung haben, wenn in der Liste eine große Anzahl von Elementen angezeigt wird.

Bei einer Datenvorlage wird für jedes Element in der Listenansicht eine Instanz von jedem XAML-Elements erstellt. Die Rastervorlage im vorherigen Beispiel hat beispielsweise 10 XAML-Elemente (1 Raster, 1 Rechteck, 3 Rahmen, 5 TextBlocks). Bei einer GridView, die auf dem Bildschirm mithilfe dieser Datenvorlage 20 Elemente anzeigt, werden mindestens 200 Elemente (20 * 10 = 200) erstellt. Wenn Sie die Anzahl der Elemente in einer Datenvorlage verringern, kann die Gesamtanzahl der Elemente, die für die Listenansicht erstellt werden müssen, erheblich reduziert werden. Weitere Informationen finden Sie unter Optimieren der ListView- und GridView-Benutzeroberfläche: Elementreduzierung pro Element.

Sehen Sie sich diesen Abschnitt der Rasterdatenvorlage an. Sehen wir uns an, wodurch wir die Anzahl der Elemente verringern können.

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

• Erstens: Das Layout verwendet nur ein Raster. Sie verwenden ein einspaltiges Raster und platzieren diese 3 TextBlocks in einem StackPanel. In einer Datenvorlage, die in vielfältigen Varianten erstellt wird, sollten Sie jedoch nach Möglichkeiten suchen, die Einbettung von Layoutpanels in andere Layoutpanels zu vermeiden.
• Zweitens: Sie können ein Border-Steuerelement verwenden, mit dem ein Hintergrund gerendert wird, ohne dass wirklich Elemente innerhalb des Border-Elements positioniert werden. Ein Border-Element kann nur ein untergeordnetes Element haben, daher benötigen Sie ein zusätzliches Layoutpanel für die 3 TextBlock-Elemente in dem Border-Element im XAML-Code. Da die TextBlocks-Elemente nicht dem Border-Element untergeordnet werden, benötigen Sie kein Panel, um diese TextBlocks aufzunehmen.
• Schließlich können Sie die TextBlocks innerhalb eines StackPanel platzieren und die Rahmeneigenschaften an dem StackPanel festlegen statt über eine explizites Border-Element. Das Border-Element ist jedoch ein weniger Ressourcen beanspruchendes Steuerelement als das StackPanel. Damit wirkt es sich weniger nachteilig auf die Systemleistung aus, wenn es häufig neu gerendert wird.

Verwenden verschiedener Layouts für unterschiedliche Elemente

Steuerelementvorlage

Eine Steuerelementvorlage für ein Element enthält die visuellen Elemente zum Anzeigen des Zustands wie Auswahl, Draufzeigen und Fokus. Diese visuellen Elemente werden über oder unter der Datenvorlage gerendert. Hier ist eine Liste mit häufig verwendeten visuellen Standardelementen, wie sie von der ListView-Steuerelementvorlage gezeichnet werden.

• Draufzeigen: Ein hellgraues Rechteck, das unter der Datenvorlage gezeichnet wird.
• Auswahl: Ein hellblaues Rechteck, das unter der Datenvorlage gezeichnet wird.
• Tastaturfokus – Ein Visuelles Fokuselement mit hoher Sichtbarkeit, das über die Elementvorlage gezeichnet wird.

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

ListViewItemPresenter

Wie bereits zuvor bei den Datenvorlagen erwähnt, kann die Anzahl der für die einzelnen Elemente erstellten XAML-Elemente erhebliche Auswirkungen auf die Leistung einer Listenansicht haben. Da die Datenvorlage und die Steuerelementvorlage kombiniert werden, um die einzelnen Elemente anzuzeigen, stellen auch die Elemente aus beiden Vorlagen einen Faktor bei der Bestimmung der tatsächlichen Anzahl der für die Anzeige benötigten Elemente dar.

Die Steuerelemente ListView und GridView sind dahingehend optimiert, dass die Anzahl der pro Element erstellten XAML-Elemente reduziert wird. Die visuellen Elemente für ListViewItem werden über den ListViewItemPresenter erstellt. Dies ist ein spezielles XAML-Element, das komplexe visuelle Objekte für Fokus, Auswahl und andere visuelle Zustände anzeigt, ohne dass zahlreiche UIElements verwaltet werden müssen.

Hinweis

In UWP-Apps für Windows verwenden sowohl ListViewItem als auch GridViewItemListViewItemPresenter; GridViewItemPresenter ist veraltet und sollte nicht verwendet werden. ListViewItem und GridViewItem werden standardmäßig unterschiedlich angezeigt, weil sie für ListViewItemPresenter unterschiedliche Eigenschaftswerte festlegen.

Um das Aussehen der Elementcontainer zu ändern, verwenden Sie die ItemContainerStyle-Eigenschaft und stellen Sie einen Stil bereit, indem Sie für den zugehörigen TargetType als Wert ListViewItem oder GridViewItem festlegen.

In diesem Beispiel fügen Sie dem ListViewItem Abstände hinzu, um die Elemente in der Liste deutlicher voneinander zu trennen.

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

Jetzt sieht die Listenansicht mit etwas mehr Platz zwischen den Elementen so aus.

In dem Standardstil für ListViewItem ist die ContentMargin-Eigenschaft über ein TemplateBinding mit der Padding-Eigenschaft (<ListViewItemPresenter ContentMargin="{TemplateBinding Padding}"/>) des ListViewItem-Objekts verknüpft. Wenn wir die Padding-Eigenschaft festlegen, wird dieser Wert eigentlich an die ContentMargin-Eigenschaft von ListViewItemPresenter übergeben.

Um andere ListViewItemPresenter-Eigenschaften zu ändern, die nicht per Vorlage an ListViewItems-Eigenschaften gebunden sind, müssen Sie die Vorlage für ListViewItem mit einem neuen ListViewItemPresenter umschreiben, dessen Eigenschaften Sie dann ändern können.

Hinweis

Mit den Standardformaten von ListViewItem und GridViewItem werden zahlreiche Eigenschaften für ListViewItemPresenter festgelegt. Es wird empfohlen, mit einer Kopie des Standardstils zu beginnen und nur die Eigenschaften zu ändern, bei denen dies erforderlich ist. Andernfalls werden die visuellen Elemente wahrscheinlich nicht so wie erwartet angezeigt, da einige Eigenschaften nicht richtig festgelegt sein werden.

So erstellen Sie eine Kopie der Standardvorlage in Visual Studio

1. Öffnen Sie den Bereich Dokumentgliederung (Andere Windows-Dokumentgliederung > anzeigen>).
2. Wählen Sie das Listen- oder Rasterelement aus, das Sie ändern möchten. In diesem Beispiel ändern Sie das colorsGridView-Element.
3. Klicken Sie mit der rechten Maustaste, und wählen Sie Zusätzliche Vorlagen > bearbeiten Generierten Elementcontainer bearbeiten (ItemContainerStyle) > Kopie bearbeiten aus.
4. Geben Sie im Dialogfeld „Stilressource erstellen“ einen Namen für den Stil ein. In diesem Beispiel verwenden Sie colorsGridViewItemStyle.

Anschließend wird Ihrer App eine Kopie des Standardstils als Ressource hinzugefügt, und die GridView.ItemContainerStyle-Eigenschaft wird auf diese Ressource festgelegt, wie in diesem XAML-Code dargestellt.

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

Jetzt können Sie Eigenschaften für den ListViewItemPresenter ändern, so dass Sie die Kontrollkästchen für Auswahl, die Positionierung der Elemente und die Pinselfarben für die visuelle Zustände ändern können.

Visuelle Inline- und Überlagerungsauswahlelemente

ListView und GridView weisen, je nach Steuerelement und SelectionMode, auf unterschiedliche Weise darauf hin, welche Elemente ausgewählt sind. Weitere Informationen zur Auswahl in der Listenansicht finden Sie unter ListView und GridView.

Wenn SelectionMode auf Multiple festgelegt ist, wird in der Steuerelementvorlage für das Element ein Auswahlkontrollkästchen angezeigt. Sie können im Mehrfachauswahlmodus das Kontrollkästchen zur Auswahl über die SelectionCheckMarkVisualEnabled-Eigenschaft deaktivieren. Diese Eigenschaft wird jedoch in den anderen Auswahlmodi ignoriert, daher können Sie das Kontrollkästchen im erweiterten oder im Einzelauswahlmodus nicht aktivieren.

Sie können über die CheckMode-Eigenschaft festlegen, ob das Kontrollkästchen im Inlineformat oder im Overlayformat angezeigt wird.

• Inline: Bei diesem Stil wird das Kontrollkästchen links neben dem Inhalt angezeigt. Der Hintergrund des Elementcontainers wird farbig hervorgehoben, um darauf hinzuweisen, dass es ausgewählt ist. Dies ist der Standardstil für ListView.
• Overlay (Überlagerung): Bei diesem Stil wird das Kontrollkästchen über dem Inhalt angezeigt. Es wird nur der Rahmen des Elementcontainers farbig hervorgehoben, um darauf hinzuweisen, dass es ausgewählt ist. Dies ist der Standardstil für GridView.

Die folgende Tabelle zeigt die visuellen Standardelemente, mit denen auf eine Auswahl hingewiesen wird.

SelectionMode:	Einzelauswahl/erweitert	Mehrere
Inline
Überlagerung

Hinweis

In diesem und den folgenden Beispielen werden einfache Zeichenfolgen-Datenelemente ohne Datenvorlagen angezeigt, um zu zeigen, wie sich die visuellen Elemente der Steuerelementvorlage auswirken.

Es gibt auch verschiedene Pinseleigenschaften, mit denen die Farben des Kontrollkästchens geändert werden können. Wir sehen uns nun diese und weitere Pinseleigenschaften an.

Pinsel

Viele Eigenschaften legen den Pinsel für die verschiedenen visuellen Zustände fest. Möglicherweise möchten Sie diese ändern, um sie an die Farbe Ihrer Marke anzupassen.

Diese Tabelle enthält häufig verwendete visuelle Zustände und Auswahlzustände für ListViewItem, sowie die Pinsel zum Rendern der visuellen Elemente für die einzelnen Zustände. Die Bilder zeigen die Effekte der Pinsel auf die visuellen Inline- und Überlagerungsformatvorlagen für die Auswahl.

Hinweis

In dieser Tabelle sind die geänderten Farbwerte für die Pinsel hartcodierte benannte Farben, und die Farben werden ausgewählt, um deutlicher zu machen, an welchen Stellen in der Vorlage sie angewendet werden. Diese sind nicht die Standardfarben für die visuellen Zustände. Wenn Sie die Standardfarben in der App ändern, sollten Sie Pinselressourcen verwenden, um die Farbwerte entsprechend der Standardvorlage zu ändern.

Zustand/Pinselname	Inlineformatvorlage	Überlagerungsformatvorlage
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="Lavender" SelectedForeground="Navy" SelectedBackground="Khaki" (nur Überlagerung) CheckBrush="Green" CheckBoxBrush="Red" (nur Inline)
PressedSelected SelectedPressedBackground="MediumTurquoise" SelectedForeground="Navy" SelectedBackground="Khaki" (nur Überlagerung) CheckBrush="Green" CheckBoxBrush="Red" (nur Inline)
Im Vordergrund FocusBorderBrush="Crimson" FocusSecondaryBorderBrush="Gold" CheckBoxBrush="Red"

ListViewItemPresenter hat noch andere Pinseleigenschaften für Datenplatzhalter und Drag & Drop-Zustände. Wenn Sie in der Listenansicht inkrementelles Laden oder Drag & Drop verwenden, sollten Sie überlegen, ob Sie auch diese zusätzlichen Pinseleigenschaften ändern müssen. Eine 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 ListViewItemPresenter Eigenschaften zulassen (wenn Sie z. B. die Position des Kontrollkästchens ändern müssen), können Sie die ListViewItemExpanded- oder GridViewItemExpanded-Vorlage verwenden. Diese Vorlagen sind in den Standardstilen in „generic.xaml“ enthalten. Sie basieren auf dem XAML-Standardmuster für alle visuellen Elemente der einzelnen UIElements.

Wie bereits erwähnt, hat die Anzahl der UIElements in einer Elementvorlage erhebliche Auswirkungen auf die Leistung der Listenansicht. Wenn Sie ListViewItemPresenter durch erweiterte XAML-Vorlagen ersetzen, erhöht sich die Anzahl der Elemente erheblich. Wenn in der Listenansicht eine große Anzahl von Elementen angezeigt wird oder die Leistung von Bedeutung ist, wird davon abgeraten.

Hinweis

ListViewItemPresenter wird nur unterstützt, wenn itemsPanel der Listenansicht ein ItemsWrapGrid oder ItemsStackPanel ist. Wenn Sie die ItemsPanel ändern und VariableSizedWrapGrid, WrapGrid oder StackPanel verwenden, wird die Elementvorlage in der erweiterten XAML-Vorlage automatisch gewechselt. Weitere Informationen finden Sie unter Optimieren der ListView- und GridView-Benutzeroberfläche.

Um eine erweiterte XAML-Vorlage anzupassen, müssen Sie in der App eine Kopie von ihr erstellen und die ItemContainerStyle-Eigenschaft auf diese Kopie festlegen.

So kopieren Sie die erweiterte Vorlage

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

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

2. Erweitern Sie im Bereich „Eigenschaften“ 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 den Eigenschaftenmarker für die ItemContainerStyle-Eigenschaft. (Es ist das kleine Feld neben dem Textfeld. Sie ist grün gefärbt, um zu zeigen, dass sie auf staticResource festgelegt ist.) Das Eigenschaftenmenü wird geöffnet.

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

   

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

In der App wird eine Kopie der erweiterten Vorlage von „generic.xaml“ erstellt, die Sie bei Bedarf ändern können.

Verwandte Artikel

• Listen
• ListView und GridView