Elementansicht

Verwenden Sie eine Elementansicht, um eine Sammlung von Datenelementen anzuzeigen, z. B. Fotos in einem Album oder Elemente in einem Produktkatalog.

Die Elementansicht ähnelt den Steuerelementen „Listenansicht“ und „Rasteransicht“ und Sie können sie in den meisten Fällen verwenden, in denen Sie diese Steuerelemente verwenden würden. Ein Vorteil der Elementansicht ist die Möglichkeit, das Layout während der Verwendung zu wechseln und gleichzeitig die Elementauswahl beizubehalten.

Das Elementansichtssteuerelement wird mithilfe der Komponenten ItemsRepeater, ScrollView, ItemContainer und ItemCollectionTransitionProvider erstellt, sodass es die einzigartige Möglichkeit bietet, benutzerdefinierte Layout- oder ItemCollectionTransitionProvider-Implementierungen einzubinden. Das innere ScrollView-Steuerelement der Elementansicht ermöglicht das Scrollen und Zoomen der Elemente. Es bietet auch Features, die im ScrollViewer-Steuerelement, das von der Listenansicht und der Rasteransicht verwendet wird, nicht verfügbar sind, z. B. die Möglichkeit, die Animation während programmgesteuerter Bildläufe zu steuern.

Wie die Listenansichts- und Rasteransichtssteuerelemente kann die Elementansicht die Benutzeroberflächen- und Datenvirtualisierung verwenden, Tastatur-, Maus-, Stift- und Toucheingaben behandeln und sie verfügt über eine integrierte Unterstützung für Barrierefreiheit.

Ist dies das richtige Steuerelement?

Verwenden Sie eine Elementansicht, um:

• Eine Auflistung anzuzeigen, in der alle Elemente das gleiche visuelle Verhalten und Interaktionsverhalten aufweisen sollen.
• Eine Inhaltssammlung mit der Möglichkeit, zwischen Listen-, Raster- und benutzerdefinierten Layouts zu wechseln, anzuzeigen.
• Aufnehmen einer Vielzahl von Anwendungsfällen, einschließlich der folgenden gängigen:
  • Storefront-artige Benutzeroberfläche (d. h. Durchsuchen von Apps, Liedern, Produkten)
  • Interaktive Fotobibliotheken
  • Kontaktliste

Erstellen einer Elementansicht

• Wichtige APIs: ItemsView-Klasse, ItemsSource-Eigenschaft,ItemTemplate-Eigenschaft , LinedFlowLayout, StackLayout, UniformGridLayout

Öffnen Sie die WinUI 3 Gallery-App, und sehen Sie die Schaltfläche in Aktion.

Die WinUI 3-Katalog-App umfasst interaktive Beispiele für die meisten WinUI 3-Steuerelemente, -Features und -Funktionen. Laden Sie die App aus dem Microsoft Store herunter, oder rufen Sie den Quellcode auf GitHub ab.

Eine ItemsView kann eine Sammlung von Elementen eines beliebigen Typs anzeigen. Um die Ansicht aufzufüllen, legen Sie die ItemsSource-Eigenschaft auf eine Datenquelle fest.

Hinweis

Im Gegensatz zu anderen Sammlungssteuerelementen (denen, die von ItemsControl abgeleitet werden), verfügt ItemsView nicht über eine Items-Eigenschaft, der Sie Datenelemente direkt hinzufügen können.

Festlegen der Quelle von Elementen

In der Regel verwenden Sie eine Elementansicht, um Daten aus Quellen wie einer Datenbank oder dem Internet anzuzeigen. Um eine Elementansicht aus einer Datenquelle zu füllen, legen Sie deren Eigenschaft ItemsSource auf eine Sammlung mit Datenelementen fest.

Festlegen von ItemsSource im Code

Hier wird die ItemsSource-Eigenschaft im Code direkt auf eine Instanz einer Sammlung festgelegt.

 // Data source.
 List<String> itemsList = new List<string>();
 itemsList.Add("Item 1");
 itemsList.Add("Item 2");

 // Create a new ItemsView and set the data source.
 ItemsView itemsView1 = new ItemsView();
 itemsView1.ItemsSource = itemsList;

 // Add the ItemsView to a parent container in the visual tree.
 rootGrid.Children.Add(itemsView1);

Binden von ItemsSource in XAML

Sie können die ItemsSource-Eigenschaft auch an eine Sammlung in XAML binden. Weitere Informationen finden Sie unter Datenbindung mit XAML.

Wichtig

Wenn Sie die x:Bind-Markuperweiterung in DataTemplate verwenden, müssen Sie den Datentyp (x:DataType) der Datenvorlage angeben.

Hier ist ItemsSource an eine Sammlung von benutzerdefinierten Datenobjekten (vom Typ Photo) gebunden.

<ItemsView ItemsSource="{x:Bind Photos}">

</ItemsView>

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
        Photos = new ObservableCollection<Photo>();
        PopulatePhotos();
    }

    public ObservableCollection<Photo> Photos
    {
        get; private set;
    }


    private void PopulatePhotos()
    {
        // Populate the Photos collection. 
    }
}

public class Photo
{
    public BitmapImage PhotoBitmapImage { get; set; }
    public string Title { get; set; }
    public int Likes { get; set; }
}

Festlegen der Darstellung der Elemente

Datenelemente werden in der Elementansicht standardmäßig als Zeichenfolgendarstellung des Datenobjekts angezeigt, an das sie gebunden sind. In der Regel möchten Sie eine ansprechendere Darstellung Ihrer Daten anzeigen. Um genau anzugeben, wie Elemente in der Elementansicht 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. Die DataTemplate ist der Eigenschaft ItemTemplate des ItemsView-Steuerelements zugeordnet.

Wichtig

Das Stammelement der DataTemplate muss ein ItemContainer sein. Andernfalls wird eine Fehler ausgelöst. ItemContainer ist ein unabhängiges Primitive-Steuerelement, das von ItemsView verwendet wird, um die Auswahlzustände und andere Visualisierungen eines einzelnen Elements in der Elementsammlung anzuzeigen.

In diesem Beispiel wird DataTemplate im Page.ResourcesResourceDictionary definiert. Es enthält ein Bildsteuerelement, um das Bild und eine Überlagerung anzuzeigen, die den Bildtitel und die Anzahl der empfangenen Likes enthält.

 <Page.Resources>
     <DataTemplate x:Key="PhotoItemTemplate" x:DataType="local:Photo">
         <ItemContainer AutomationProperties.Name="{x:Bind Title}">
             <Grid>
                 <Image Source="{x:Bind PhotoBitmapImage, Mode=OneWay}" 
                        Stretch="UniformToFill" MinWidth="70"
                        HorizontalAlignment="Center" VerticalAlignment="Center"/>
                 <StackPanel Orientation="Vertical" Height="40" Opacity=".75"
                             VerticalAlignment="Bottom" Padding="5,1,5,1" 
                             Background="{ThemeResource SystemControlBackgroundBaseMediumBrush}">
                     <TextBlock Text="{x:Bind Title}" 
                                Foreground="{ThemeResource SystemControlForegroundAltHighBrush}"/>
                     <StackPanel Orientation="Horizontal">
                         <TextBlock Text="{x:Bind Likes}"
                                    Style="{ThemeResource CaptionTextBlockStyle}"
                                    Foreground="{ThemeResource SystemControlForegroundAltHighBrush}"/>
                         <TextBlock Text=" Likes"
                                    Style="{ThemeResource CaptionTextBlockStyle}"
                                    Foreground="{ThemeResource SystemControlForegroundAltHighBrush}"/>
                     </StackPanel>
                 </StackPanel>
             </Grid>
         </ItemContainer>
     </DataTemplate>
 </Page.Resources>

 <Grid x:Name="rootGrid">
     <ItemsView ItemsSource="{x:Bind Photos}" Width="480" Height="400" 
                ItemTemplate="{StaticResource PhotoItemTemplate}">
     </ItemsView>
 </Grid>

Hier sehen Sie das durch die Datenvorlage definierte Elementlayout.

Ändern des Layouts von Elementen

Wenn Sie Elemente zu einer ItemsView hinzufügen, bricht das Steuerelement automatisch alle Elemente in einem ItemContainer um und ordnet anschließend alle Elementcontainer an. Die Anordnung dieser Elementcontainer ist von der Layout-Eigenschaft des Steuerelements abhängig.

Sie können das Layout von Elementen ändern, indem Sie die Eigenschaften des aktuellen Layouts anpassen oder das aktuelle Layout vollständig durch ein anderes Layout ersetzen. Sie können eines der als nächstes beschriebenen Layouts verwenden, oder Sie können ein benutzerdefiniertes Layout von der Layout-Klasse ableiten.

StackLayout

ItemsView verwendet standardmäßig ein StackLayout, das eine vertikale Liste erzeugt, die hier mit Standardeigenschafteneinstellungen und einer einfachen Bildvorlage dargestellt wird.

Dieser XAML-Code legt den Abstand zwischen Elementen im StackLayout auf 5px fest.

<ItemsView ItemsSource="{x:Bind Photos}" Width="480" Height="400" 
           ItemTemplate="{StaticResource PhotoItemTemplate}">
    <ItemsView.Layout>
        <StackLayout Spacing="5"/>
    </ItemsView.Layout>
</ItemsView>

StackLayout stellt Eigenschaften zum Steuern bereit:

• ob das Layout vertikal oder horizontal ist (Ausrichtung)
• den Abstand von Elementen (Abstand)

Sie können das Layout in Kombination mit der ItemTemplate verwenden, um Ihre Sammlung mit einer Vielzahl von Designs an Ihre Anforderungen anzupassen. Im Beispiel WinUI Gallery wird beispielsweise die ItemTemplate geändert, die mit StackLayout verwendet wird, damit es wie folgt aussieht.

LinedFlowLayout

Das LinedFlowLayout positioniert Elemente sequenziell von links nach rechts, dann von oben nach unten in einem Umbruchlayout. Verwenden Sie dieses Layout, um eine Elementauflistung anzuzeigen, in der die Elemente eine feste Höhe, aber eine variable Breite aufweisen. Wir empfehlen dies für bildbasierte Sammlungen. Dieses Layout verfügt auch über integrierte Animationen, die wiedergegeben, wenn der Sammlung Elemente hinzugefügt oder entfernt werden und die Größe der Ansicht geändert wurde.

Hier sehen Sie eine Elementansicht, die eine Sammlung von Fotos in einem Linienlinien-Flusslayout anzeigt.

<ItemsView Width="500" Height="400" HorizontalAlignment="Left"
           ItemTemplate="{StaticResource LinedFlowLayoutItemTemplate}">
    <ItemsView.Layout>
        <LinedFlowLayout ItemsStretch="Fill" 
                         LineHeight="160" 
                         LineSpacing="5"
                         MinItemSpacing="5"/>
    </ItemsView.Layout>
</ItemsView>

LinedFlowLayout bietet Eigenschaften zum Steuern:

• die Größe und der Abstand von Elementen (LineHeight, LineSpacing, MinItemSpacing)
• die Anordnung von Elementen (ItemsJustification, ItemsStretch)

UniformGridLayout

Das UniformGridLayout positioniert Elemente sequenziell von links nach rechts oder von oben nach unten (je nach Ausrichtung) in einem Umbruchlayout. Jedes Element hat dieselbe Größe.

Hier ist eine Elementansicht, in der eine Sammlung von Fotos in einem einheitlichen Rasterlayout angezeigt wird.

<ItemsView ItemsSource="{x:Bind Photos}" Width="480" Height="400"
           ItemTemplate="{StaticResource PhotoItemTemplate}">
    <ItemsView.Layout>
        <UniformGridLayout MaximumRowsOrColumns="3" 
                           MinRowSpacing="5" 
                           MinColumnSpacing="5"/>
    </ItemsView.Layout>
</ItemsView>

UniformGridLayout stellt Eigenschaften zum Steuern bereit:

• ob das Layout zeilen- oder spaltenbasiert ist (Ausrichtung)
• die Anzahl der Zeilen oder Spalten (MaximumRowsOrColumns)
• Größe und Abstand von Elementen (MinItemHeight, MinItemWidth, MinColumnSpacing, MinRowSpacing)
• Anordnung von Elementen (ItemsJustification, ItemsStretch)

Tipp

Verwenden Sie die interaktive Demo in der WinUI 3 Gallery-App, um die Wirkung dieser Eigenschaften in Echtzeit zu sehen.

Auswahl von Elementen und Interaktion

Sie können aus einer Vielzahl von Optionen auswählen, um Benutzern die Interaktion mit einer Elementansicht zu ermöglichen. Standardmäßig können Benutzer ein einzelnes Element auswählen. Sie können die Eigenschaft SelectionMode ändern, um eine Mehrfachauswahl zu ermöglichen oder die Auswahl zu deaktivieren. Sie können die IsItemInvokedEnabled-Eigenschaft so festlegen, dass Benutzer auf ein Element klicken, um eine Aktion aufzurufen, anstatt das Element auszuwählen.

In der folgenden Tabelle werden die Arten gezeigt, wie Benutzer mit einer Elementansicht interagieren können und wie Sie auf die jeweilige Interaktion reagieren können.

Um diese Interaktion zu ermöglichen:	Verwenden Sie die folgenden Einstellungen:	Behandeln Sie dieses Ereignis:	Verwenden Sie diese Eigenschaft zum Abrufen des ausgewählten Elements:
Keine Interaktion	SelectionMode="None" IsItemInvokedEnabled="False"	–	–
Einzelauswahl	SelectionMode="Single" IsItemInvokedEnabled="False"	SelectionChanged	SelectedItem
Mehrfachauswahl	SelectionMode="Multiple" IsItemInvokedEnabled="False"	SelectionChanged	SelectedItems
Erweiterte Auswahl	SelectionMode="Extended" IsItemInvokedEnabled="False"	SelectionChanged	SelectedItems
Klicken	SelectionMode="None" IsItemInvokedEnabled="True"	ItemInvoked	Nicht zutreffend

Hinweis

Sie können IsItemInvokedEnabled aktivieren, um ein ItemInvoked-Ereignis auszulösen, während SelectionMode auch auf Single, Multiple oder Extended eingestellt sein kann. Wenn Sie dies tun, wird zuerst das ItemInvoked-Ereignis und anschließend das SelectionChanged-Ereignis ausgelöst. In einigen Fällen (z. B. wenn Sie im ItemInvoked-Ereignishandler zu einer anderen Seite wechseln), wird das SelectionChanged-Ereignis nicht ausgelöst, und das Element wird nicht ausgewählt.

Sie können diese Eigenschaften in XAML oder im Code festlegen, wie hier gezeigt:

<ItemsView x:Name="myItemsView" SelectionMode="None" IsItemInvokedEnabled="True"/>

myItemsView.SelectionMode = ItemsViewSelectionMode.None;
myItemsView.IsItemInvokedEnabled = true;

Schreibgeschützt

Sie können die Eigenschaft SelectionMode auf ItemsViewSelectionMode.None festlegen, um die Elementauswahl zu deaktivieren. Dadurch wird das Steuerelement im schreibgeschützten Modus ausgeführt und kann zwar zum Anzeigen von Daten, nicht jedoch für die Interaktion mit ihm verwendet werden. Das heißt, die Elementauswahl ist deaktiviert, aber das Steuerelement selbst ist nicht.

Hinweis

Elemente können weiterhin programmgesteuert ausgewählt und deaktiviert werden, aber nicht durch Benutzerinteraktion.

Einzelauswahl

In der folgenden Tabelle werden Tastatur-, Maus- und Touchinteraktionen beschrieben, wenn SelectionMode auf Single festgelegt ist.

Zusatztaste	Interaktion
None	Benutzer können ein einzelnes Element auswählen, indem Sie die Leertaste, Mausklicks oder Tippen verwenden.
Ctrl	Benutzer können ein einzelnes Element deselektieren, indem sie die Leertaste, Mausklicks oder Tippen verwenden. Mithilfe der Pfeiltasten können Benutzer den Fokus unabhängig von der Auswahl verschieben.

Wenn SelectionMode auf Single festgelegt ist, erhalten Sie das ausgewählte Datenelement aus der SelectedItem-Eigenschaft. Wenn kein Element ausgewählt ist, ist null das SelectedItem.

Wenn Sie versuchen, ein Element festzulegen, das sich nicht in der Elementsammlung als SelectedItem befindet, wird der Vorgang ignoriert, und das SelectedItem ist null.

Der Standardauswahlindikator für die Single-Auswahl sieht wie folgt aus.

Mehrfachauswahl

In der folgenden Tabelle werden die Tastatur-, Maus- und Touchinteraktionen beschrieben, wenn SelectionMode auf Multiple festgelegt ist.

Zusatztaste	Interaktion
None	Benutzer können mehrere Elemente auswählen, indem Sie die Leertaste, Mausklicks oder Tippen verwenden, um das fokussierte Element auszuwählen. Mithilfe der Pfeiltasten können Benutzer den Fokus unabhängig von ihrer Auswahl verschieben.
Shift	Benutzer können mehrere zusammenhängende Elemente auswählen, indem sie auf das erste Element in der Auswahl und anschließend auf das letzte Element in der Auswahl klicken oder tippen. Mithilfe der Pfeiltasten können Benutzer zusammenhängende Elemente auswählen, die mit dem Element beginnen, das ausgewählt wird, wenn sie die Umschalttaste auswählen.

Der Standardauswahlindikator für die Multiple-Auswahl sieht wie folgt aus.

Erweiterte Auswahl

In der folgenden Tabelle werden die Tastatur-, Maus- und Touchinteraktionen beschrieben, wenn SelectionMode auf Extended festgelegt ist.

Zusatztaste	Interaktion
None	Das Verhalten entspricht der Single-Auswahl.
Ctrl	Benutzer können mehrere Elemente auswählen, indem Sie die Leertaste, Mausklicks oder Tippen verwenden, um das fokussierte Element auszuwählen. Mithilfe der Pfeiltasten können Benutzer den Fokus unabhängig von der Auswahl verschieben.
Shift	Benutzer können mehrere zusammenhängende Elemente auswählen, indem sie auf das erste Element in der Auswahl und anschließend auf das letzte Element in der Auswahl klicken oder tippen. Mithilfe der Pfeiltasten können Benutzer zusammenhängende Elemente auswählen, die mit dem Element beginnen, das ausgewählt wird, wenn sie die Umschalttaste auswählen.

Wenn SelectionMode auf Multiple oder Extendedfestgelegt ist, können Sie die ausgewählten Datenelemente aus der Eigenschaft SelectedItems abrufen.

Die Eigenschaften SelectedItem und SelectedItems werden synchronisiert. Wenn Sie beispielsweise SelectedItem auf nullSelectedItem festlegen, ist SelectedItems leer. Im Mehrfachauswahlmodus enthält SelectedItem das Element, das zuerst ausgewählt wurde.

Der Standardauswahlindikator für die Extended-Auswahl ist identisch mit der Single-Auswahl und sieht wie folgt aus.

Programmgesteuertes Verwalten der Elementauswahl

Hinweis

Diese Auswahlmethoden ignorieren die SelectionMode-Eigenschaft und wirken sich auch dann aus, wenn SelectionMode Single oder None ist.

Manchmal müssen Sie die ItemsView-Elementauswahl möglicherweise programmgesteuert bearbeiten. Angenommen, es gibt eine Schaltfläche „Alles auswählen“, um einen Benutzer alle Elemente in einer Liste auswählen zu lassen. In diesem Fall ist es in der Regel nicht sehr effizient, der Sammlung SelectedItems-Elemente einzeln hinzuzufügen oder Elemente einzeln aus dieser zu entfernen. Es ist effizienter, die Methoden Select, SelectAll, Deselect und InvertSelection zu verwenden, um die Auswahl zu ändern, als die SelectedItems-Eigenschaft zu verwenden.

Tipp

Sie können alle Elemente in einer Sammlung auswählen, indem Sie die SelectAll-Methode aufrufen. Es gibt keine entsprechende Methode, um die Auswahl aller Elemente aufzuheben. Sie können jedoch alle Elemente deaktivieren, indem Sie SelectAll aufrufen, gefolgt von InvertSelection.

Beispielcode herunterladen

• Beispiel für Windows-UI-Bibliothek: Hier werden alle XAML-Steuerelemente in einem interaktiven Format dargestellt.

Verwandte Artikel

• Listen
• ItemsView-Klasse
• StackLayout
• UniformGridLayout
• LinedFlowLayout