Language: HTML | XAML

Schnellstart: Hinzufügen von ListView- und GridView-Steuerelementen (XAML)

Applies to Windows and Windows Phone

Sie können ein ListView-Steuerelement oder ein GridView-Steuerelement in XAML verwenden, um Ihre Datenauflistungen wie Verträge, Bilder einer Galerie oder den Inhalt eines E-Mail-Postfachs anzuzeigen.

Ziel: Sie erfahren, wie Sie einer Windows Store-App ListView- und GridView-Steuerelemente hinzufügen.

Voraussetzungen

Es wird davon ausgegangen, dass Sie einer einfachen Windows-Runtime-App mit C++, C# oder Visual Basic Steuerelemente hinzufügen können. Anweisungen zum Hinzufügen eines Steuerelements finden Sie unter Schnellstart: Hinzufügen von Steuerelementen und Behandeln von Ereignissen.

Anweisungen

1. Auswählen eines ListView- oder GridView-Steuerelements

Das ListView-Steuerelement und das GridView-Steuerelement können zum Anzeigen von Datenauflistungen in Ihrer App verwendet werden. Zwar ist die Funktionalität gleich, aber die Anzeige der Daten unterscheidet sich. Beide werden von der ItemsControl-Klasse abgeleitet. Wenn von ItemsControl die Rede ist, gelten die Informationen sowohl für das ListView-Steuerelement als auch für das GridView-Steuerelement.

Die ListView zeigt die Daten übereinander an. Sie wird häufig für die Anzeige geordneter Listen von Elementen verwendet, z. B. von E-Mails oder Suchergebnissen. Sie ist auch in Szenarien hilfreich, in denen die aufgelisteten Elemente nur wenige Informationen enthalten und die Details separat angezeigt werden.

Die GridView zeigt die Daten nebeneinander an. Sie wird häufig für Visualisierungen verwendet, bei denen die Elemente mehr Platz benötigen, z. B. in einer Fotogalerie.

Sie können eine ItemsControl-Klasse auffüllen, indem Sie die Elemente direkt der Items-Sammlung hinzufügen oder die ItemsSource-Eigenschaft an eine Datenquelle binden. Nicht selten werden sowohl eine ListView als auch eine GridView an die gleiche Datenquelle gebunden. Sie können dann eines der Steuerelemente anzeigen und das andere ausblenden, um Ihre UI an unterschiedliche Ausrichtungen und Auflösungen anzupassen.

Hier sehen Sie eine ListView mit Elementen in einer App, die schmaler ist, wenn sie sich neben einer anderen App befindet, und eine GridView mit denselben Elementen in einer App im Vollbildmodus.

"ListView" und "GridView"

2. Hinzufügen von Elementen zur Items-Sammlung

Sie können der Items-Sammlung Elemente per Extensible Application Markup Language (XAML) oder per Code hinzufügen. Üblicherweise fügen Sie Elemente auf diese Weise hinzu, wenn Sie nur über eine geringe Anzahl von Elementen verfügen, die sich nicht ändern und einfach in XAML definiert werden können, oder wenn die Elemente zur Laufzeit im Code generiert werden. Hier sehen Sie eine ListView mit Elementen, die intern per XAML definiert wurden, und eine GridView mit Elementen, die per Code hinzugefügt wurden.


<ListView x:Name="listView1" SelectionChanged="ListView_SelectionChanged">
    <x:String>Item 1</x:String>
    <x:String>Item 2</x:String>
</ListView>



// Create a new grid view, add content, 
// and add a SelectionChanged event handler.
GridView gridView1 = new GridView();
gridView1.Items.Add("Item 1");
gridView1.Items.Add("Item 2");
gridView1.SelectionChanged += GridView_SelectionChanged;

// Add the grid view to a parent container in the visual tree.
stackPanel1.Children.Add(gridView1);


Wenn Sie einer ItemsControl Elemente hinzufügen, werden diese automatisch in einem Elementcontainer platziert. Der Elementcontainer für eine ListView ist ListViewItem, der Elementcontainer für eine GridView ist GridViewItem. Um die Art und Weise zu ändern, wie ein Element angezeigt wird, können Sie dem Elementcontainer einen Stil zuordnen. Legen Sie dazu die ItemContainerStyle-Eigenschaft fest.

Wenn Sie die Elemente in XAML definieren, werden sie automatisch der Items-Sammlung hinzugefügt.

3. Festlegen der Quelle von Elementen

Die meisten Apps nutzen ListView oder GridView, um Daten aus einer Quelle (beispielsweise eine Datenbank oder das Internet) anzuzeigen. Um ItemsControl mithilfe einer Datenquelle aufzufüllen, legen Sie die ItemsSource-Eigenschaft auf eine Sammlung mit Datenelementen fest.

Hinweis  Sie können ein ItemsControl auffüllen, indem Sie entweder der Items-Sammlung Elemente hinzufügen oder die ItemsSource-Eigenschaft festlegen. Die beiden Methoden können aber nicht gleichzeitig verwendet werden. Wenn Sie die ItemsSource-Eigenschaft festlegen und dann ein Element in XAML hinzufügen, wird das hinzugefügte Element ignoriert. Wenn Sie die ItemsSource-Eigenschaft festlegen und der Items-Sammlung ein Element in Code hinzufügen, wird eine Ausnahme ausgelöst.

Im Anschluss finden Sie einige häufig verwendete Sammlungstypen, die die Bindung an ein ItemsControl unterstützen:

SammlungstypGründe für die Verwendung
List(Of T) Die Sammlung ändert sich zur Laufzeit nicht. Der Inhalt der Liste oder des Rasters ist nach der Erstellung statisch.
ObservableCollection(Of T) Die Sammlung kann sich zur Laufzeit ändern. Die Liste oder das Raster wird über Änderungen an der Sammlung informiert und aktualisiert die Anzeige.
FileInformationFactory.GetVirtualizedFilesVector Binden an eine Dateisammlung.
FileInformationFactory.GetVirtualizedFoldersVector Binden an eine Ordnersammlung.
FileInformationFactory.GetVirtualizedItemsVector Binden an eine Sammlung aus Speicherelementen.

 

Hier ist die ItemsSource 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 grid view, add content, 
// and add a SelectionChanged event handler.
GridView gridView1 = new GridView();
gridView1.ItemsSource = itemsList;
gridView1.SelectionChanged += GridView_SelectionChanged;

// Add the grid view to a parent container in the visual tree.
stackPanel1.Children.Add(gridView1);


Sie können auch die ItemsSource-Eigenschaft an eine CollectionViewSource binden. CollectionViewSource fungiert als Proxy für die Sammlungsklasse, um die Unterstützung von Währungen und Gruppierungen zu ermöglichen. Sind die gleichen Daten sowohl an ListView als auch an GridView gebunden, um den Wechsel zwischen schmaler und breiter Ansicht zu unterstützen, sollten Sie eine Bindung an CollectionViewSource festlegen, damit beide Ansichten das gleiche aktuelle Element besitzen. Weitere Informationen finden Sie unter Datenbindung mit XAML.

Um gruppierte Elemente in einer Liste oder in einem Raster anzuzeigen, muss die Datenquelle das Gruppieren unterstützen, und Sie müssen die ItemsSource an eine CollectionViewSource binden, deren IsSourceGrouped-Eigenschaft auf True festgelegt ist. Weitere Informationen hierzu finden Sie unter So wird's gemacht: Gruppieren von Elementen in einem Datensteuerelement.

Hier wird die ItemsSource an eine CollectionViewSource mit der Bezeichnung itemsViewSource gebunden. Wenn Sie den vollständigen Code für dieses und folgende Beispiele sehen möchten, erstellen Sie in Microsoft Visual Studio eine App unter Verwendung der Vorlage Geteilte Anwendung.


<Page.Resources>
    <!-- Collection of items displayed by this page -->
    <CollectionViewSource x:Name="itemsViewSource" Source="{Binding Items}"/>
</Page.Resources>



<ListView x:Name="itemListView" 
          ItemsSource="{Binding Source={StaticResource itemsViewSource}}"/>


4. Festlegen der Darstellung von Elementen

Datenelemente werden standardmäßig in der Liste oder dem Raster als Zeichenfolgendarstellungen des Datenobjekts, an das sie gebunden sind, angezeigt. Sie können die Zeichenfolgendarstellung einer bestimmten Eigenschaft des Datenelements anzeigen, indem Sie den DisplayMemberPath zu der Eigenschaft festlegen.

In der Regel möchten Sie mehrere Eigenschaften Ihres Datenelements anzeigen. Wenn Sie präzise festlegen möchten, wie die Elemente in der Liste oder im Raster angezeigt werden sollen, erstellen Sie eine DataTemplate. Das XAML in der DataTemplate definiert die Steuerelemente, 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, den Inhalt intern zu definieren. Die DataTemplate wird der ItemTemplate-Eigenschaft der ListView oder GridView zugeordnet.

In diesem Beispiel wird die ItemTemplate einer ListView im Code definiert. Das nächste Beispiel zeigt eine GridView, deren ItemTemplate auf eine statische Ressource namens Standard250x250ItemTemplate festgelegt ist.


<ListView x:Name="itemListView"
          Margin="120,0,0,60"
          ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
          SelectionChanged="ItemListView_SelectionChanged">
    <ListView.ItemTemplate>
        <DataTemplate>
            <Grid Height="110" Margin="6">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="110" Height="110">
                    <Image Source="{Binding Image}" Stretch="UniformToFill"/>
                </Border>
                <StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="10,0,0,0">
                    <TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextStyle}" TextWrapping="NoWrap"/>
                    <TextBlock Text="{Binding Subtitle}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap"/>
                    <TextBlock Text="{Binding Description}" Style="{StaticResource BodyTextStyle}" MaxHeight="60"/>
                </StackPanel>
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>          
</ListView>


Hier sehen Sie das durch die Datenvorlage definierte Layout.

ListView-Datenvorlage

5. Festlegen der Darstellung von Ansichten

Falls Sie festlegen möchten, wie die Elemente in einer Listen- oder Rasteransicht angeordnet werden sollen, legen Sie die ItemsPanel-Eigenschaft fest, um eine ItemsPanelTemplate anzugeben, die auf ein Layout-Panel festgelegt ist. Standardmäßig verwendet GridView ein WrapGrid-Panel als ItemsPanel, und ListView verwendet ein VirtualizingStackPanel als ItemsPanel.

Im Folgenden wird beschrieben, wie Sie mit WrapGrid das Layout von Elementen in einer ListView ändern. Das WrapGrid ersetzt das standardmäßige VirtualizingStackPanel, wodurch Elemente in nur einer Spalte angeordnet werden. Wir legen die WrapGrid.MaximumRowsOrColumns-Eigenschaft fest, damit Elemente in zwei Spalten angeordnet werden.


<ListView Height="320" Width="260">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapGrid Orientation="Horizontal" MaximumRowsOrColumns="2"/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>

    <Rectangle Height="100" Width="100" Fill="Blue" />
    <Rectangle Height="100" Width="100" Fill="Red" />
    <Rectangle Height="100" Width="100" Fill="Yellow" />
    <Rectangle Height="100" Width="100" Fill="Green" />
    <Rectangle Height="100" Width="100" Fill="Gray" />
    <Rectangle Height="100" Width="100" Fill="LightBlue" />
    <Rectangle Height="100" Width="100" Fill="Pink" />
    <Rectangle Height="100" Width="100" Fill="YellowGreen" />
</ListView>


Hier sehen Sie, wie die ListView mit einem WrapGrid mit zwei Spalten als ItemsPanel aussieht.

ListView mit zwei Spalten

6. Hinzufügen einer Kopfzeile zur Ansicht

Sie können einer ListView oder GridView eine Kopfzeile hinzufügen, indem Sie der Header-Eigenschaft eine Zeichenfolge oder ein Objekt zuweisen. Sie können das Layout der Header mithilfe einer Datenvorlage definieren, indem Sie die HeaderTemplate-Eigenschaft festlegen.

Standardmäßig wird die Kopfzeile am oberen Rand der Ansicht angezeigt. Für eine ListView wird sie oben angezeigt und für eine GridView auf der linken Seite. Wenn die FlowDirection-Eigenschaft auf RightToLeft festgelegt ist, wird die Kopfzeile für eine GridView auf der rechten Seite angezeigt.

Hier sehen Sie eine GridView mit einer Kopfzeile, die ein StackPanel mit Text und einem Bild enthält. Dieses XAML-Objekt ist eine vereinfachte Version der GridView, die in der GroupDetail-Seite der Visual Studio-Vorlage Rasteranwendung verwendet wird.


<GridView x:Name="itemGridView"
          Margin="0,-14,0,0"
          Padding="120,0,120,50"
          ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
          ItemTemplate="{StaticResource Standard500x130ItemTemplate}">

    <GridView.Header>
        <StackPanel Width="480" Margin="0,4,14,0">
            <TextBlock Text="{Binding Subtitle}" Margin="0,0,18,20" 
                       Style="{StaticResource SubheaderTextStyle}" MaxHeight="60"/>
            <Image Source="{Binding Image}" Height="400" Margin="0,0,18,20" 
                   Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
            <TextBlock Text="{Binding Description}" Margin="0,0,18,0" 
                       Style="{StaticResource BodyTextStyle}"/>
        </StackPanel>
    </GridView.Header>
</GridView>


Im Folgenden ist die Kopfzeile der GridView gelb umrandet.

ListView-Datenvorlage

7. Festlegen des Interaktionsmodus für Ansichten

Standardmäßig können Benutzer ein einzelnes Element in einer ListView oder GridView auswählen. Um dieses Verhalten zu ändern, können Sie die SelectionMode-Eigenschaft auf einen ListViewSelectionMode-Enumerationswert festlegen, der die Mehrfachauswahl erlaubt oder eine Auswahl verbietet.

Hier sehen Sie eine ListView, bei der die Auswahl deaktiviert ist, und eine GridView mit aktivierter Mehrfachauswahl.


<ListView x:Name="itemList"
          ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
          SelectionMode="None"/>

<GridView x:Name="itemGrid"
          ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
          SelectionChanged="ItemView_SelectionChanged"
          SelectionMode="Extended"/>


Behandeln Sie als Reaktion auf Auswahländerungen in einer Liste oder in einem Raster das SelectionChanged-Ereignis. Im Ereignishandlercode können Sie die Liste mit den ausgewählten Elementen aus der SelectionChangedEventArgs.AddedItems-Eigenschaft abrufen. Außerhalb des SelectionChanged-Ereignisses können Sie die ausgewählten Elemente aus der SelectedItem- und der SelectedItems-Eigenschaft abrufen – entweder mittels Code oder mithilfe einer Datenbindung.

Hier sehen Sie den SelectionChanged-Ereignishandler für die GridView aus dem vorherigen Beispiel.


List<object> selectedItems;

private void ItemView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    // Use e.AddedItems to get the items that are selected in the ItemsControl.
    selectedItems = (List<object>)e.AddedItems;
}


Sie können auch eine ListView oder GridView so ändern, dass die Benutzer auf die Elemente wie auf Schaltflächen klicken anstatt sie auszuwählen. Das bietet sich z. B. an, wenn Ihre App zu einer neuen Seite navigieren soll, wenn ein Benutzer auf ein Element in der Liste oder im Raster klickt. Legen Sie hierfür den SelectionMode auf None, IsItemClickEnabled auf true und den Handle des ItemClick-Ereignisses auf eine Aktion fest, die ausgeführt wird, wenn der Benutzer auf ein Element klickt.

Hier sehen Sie eine GridView mit klickbaren Elementen. Der Code im ItemClick-Handler navigiert zu einer neuen Seite und übergibt das Element, auf das geklickt wurde, an die neue Seite.


<GridView x:Name="itemGridView"
          Margin="116,0,116,46"
          ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
          ItemTemplate="{StaticResource Standard250x250ItemTemplate}"
          SelectionMode="None"
          IsItemClickEnabled="True"
          ItemClick="ItemView_ItemClick"/>



private void ItemView_ItemClick(object sender, ItemClickEventArgs e)
{
    // Navigate to the split page, configuring the new page
    // by passing required information as a navigation parameter
    this.Frame.Navigate(typeof(SplitPage), e.ClickedItem);
}


Zusammenfassung und nächste Schritte

Sie haben erfahren, wie Sie ListView-Steuerelemente und GridView-Steuerelemente erstellen, um Datenauflistungen anzuzeigen.

Eine Liste vordefinierter Elementvorlagen, die Sie in Apps verwenden können, finden Sie unter Elementvorlagen für Listenlayouts und Elementvorlagen für Rasterlayouts. Eine Beschreibung des Verfahrens zum Gruppieren von Elementen finden Sie unter So wird's gemacht: Gruppieren von Elementen in einer Liste oder einem Raster.

Weitere Codebeispiele zur Veranschaulichung des ListView- und des GridView-Steuerelements finden Sie hier:

Verwandte Themen

Roadmap für Windows-Runtime-Apps mit C# oder Visual Basic
Roadmap für Windows-Runtime-Apps mit C++

 

 

Anzeigen:
© 2014 Microsoft