Übersicht über GridView
Der GridView-Ansichtsmodus ist einer der Ansichtsmodi für ein ListView-Steuerelement. Die GridView-Klasse und ihre unterstützenden Klassen ermöglichen Ihnen und Ihren Benutzern das Anzeigen von Elementauflistungen in einer Tabelle, die in der Regel Schaltflächen als interaktive Spaltenheader verwendet. Dieses Thema führt die GridView-Klasse ein und gibt einen Überblick über ihre Verwendung.
Dieses Thema enthält folgende Abschnitte.
- Was ist eine GridView-Ansicht?
- GridView-Layout und -Stil
- Benutzerinteraktionen mit einer GridView
- Abrufen anderer benutzerdefinierter Ansichten
- GridView-unterstützende Klassen
- Verwandte Abschnitte
Was ist eine GridView-Ansicht?
Der GridView-Ansichtsmodus zeigt eine Liste mit Datenelementen an, indem Datenfelder an Spalten gebunden werden und ein Spaltenheader zur Identifizierung des Felds angezeigt wird. Der Standard-GridView-Stil implementiert Schaltflächen als Spaltenheader. Durch das Verwenden von Schaltflächen für Spaltenheader können Sie wichtige interaktive Benutzerfunktionen implementieren. Beispielsweise können Benutzer auf den Spaltenheader klicken, um GridView-Daten gemäß den Inhalten einer bestimmten Spalte zu sortieren.
.gif "Hinweis") Hinweis |
|---|
Die Schaltflächen-Steuerelemente, die GridView für Spaltenheader verwendet, werden von ButtonBase abgeleitet. |
Die folgende Abbildung zeigt eine GridView-Ansicht von ListView-Inhalt.
GridView-Ansicht des ListView-Inhalts
.png "Formatierte ListView")
GridView-Spalten werden durch GridViewColumn-Objekte dargestellt, die ihre Größe automatisch an ihren Inhalt anpassen können. Optional können Sie explizit eine GridViewColumn auf eine bestimmte Breite festlegen. Sie können die Größe der Spalten ändern, indem Sie den Ziehpunkt zwischen Spaltenheadern ziehen. Sie können Spalten auch dynamisch hinzufügen, entfernen, ersetzen und neu anordnen, da diese Funktionen in GridView integriert sind. GridView kann jedoch die angezeigten Daten nicht direkt aktualisieren.
Im folgenden Beispiel wird gezeigt, wie eine GridView definiert wird, die Mitarbeiterdaten anzeigt. In diesem Beispiel definiert ListView EmployeeInfoDataSource als ItemsSource. Die Eigenschaftendefinitionen von DisplayMemberBinding binden GridViewColumn-Inhalt an EmployeeInfoDataSource-Datenkategorien.
<ListView ItemsSource="{Binding Source=
{StaticResource EmployeeInfoDataSource}}">
<ListView.View>
<GridView AllowsColumnReorder="true"
ColumnHeaderToolTip="Employee Information">
<GridViewColumn DisplayMemberBinding=
"{Binding Path=FirstName}"
Header="First Name" Width="100"/>
<GridViewColumn DisplayMemberBinding=
"{Binding Path=LastName}"
Width="100">
<GridViewColumnHeader>Last Name
<GridViewColumnHeader.ContextMenu>
<ContextMenu MenuItem.Click="LastNameCM_Click"
Name="LastNameCM">
<MenuItem Header="Ascending" />
<MenuItem Header="Descending" />
</ContextMenu>
</GridViewColumnHeader.ContextMenu>
</GridViewColumnHeader>
</GridViewColumn>
<GridViewColumn DisplayMemberBinding=
"{Binding Path=EmployeeNumber}"
Header="Employee No." Width="100"/>
</GridView>
</ListView.View>
</ListView>
In der folgenden Abbildung ist die im vorherigen Beispiel erstellte Tabelle dargestellt.
GridView, die Daten von einer ItemsSource anzeigt
.jpg "ListView mit GridView-Ausgabe")
GridView-Layout und -Stil
Die Spaltenzellen und die Spaltenheader einer GridViewColumn weisen die gleiche Breite auf. Standardmäßig passt jede Spalte die Größe ihrer Breite an ihre Inhalte an. Optional können Sie eine Spalte auf eine feste Breite festlegen.
Verwandte Dateninhalte werden in horizontalen Zeilen angezeigt. In der vorherigen Abbildung werden z. B. die Nachnamen, Vornamen und ID-Nummern der einzelnen Mitarbeiter als Gruppe angezeigt, da diese Angaben in einer horizontalen Zeile auftreten.
Definieren und Formatieren von Spalten in einer GridView
Wenn Sie das Datenfeld definieren, das in einer GridViewColumn angezeigt werden soll, verwenden Sie die Eigenschaft DisplayMemberBinding, CellTemplate oder CellTemplateSelector. Die DisplayMemberBinding-Eigenschaft hat Vorrang gegenüber beiden Vorlageneigenschaften.
Um die Ausrichtung der Spalteninhalte einer GridView anzugeben, definieren Sie eine CellTemplate. Verwenden Sie nicht die HorizontalContentAlignment-Eigenschaft und die VerticalContentAlignment-Eigenschaft für ListView-Inhalte, die mit einer GridView angezeigt werden.
Um Vorlage und Stileigenschaften für Spaltenheader anzugeben, verwenden Sie die Klassen GridView, GridViewColumn und GridViewColumnHeader. Weitere Informationen finden Sie unter Übersicht über GridView-Spaltenheaderstile und -Spaltenheadervorlagen.
Hinzufügen von visuellen Elementen zu einer GridView
Um visuelle Elemente wie das CheckBox-Steuerelement und das Button-Steuerelement einem GridView-Ansichtsmodus hinzuzufügen, verwenden Sie Vorlagen oder Stile.
Wenn Sie ein visuelles Element explizit als Datenelement definieren, kann es nur einmal in einer GridView enthalten sein. Diese Begrenzung besteht, da ein Element nur ein übergeordnetes Element haben und daher nur einmal in der visuellen Struktur auftreten kann.
Formatieren von Zeilen in einer GridView
Verwenden Sie die GridViewRowPresenter-Klasse und die GridViewHeaderRowPresenter-Klasse, um die Zeilen einer GridView zu formatieren und anzuzeigen. Ein Beispiel dafür, wie Zeilen in einem GridView-Ansichtsmodus formatiert werden, finden Sie unter Gewusst wie: Formatieren einer Zeile in einem ListView, in dem ein GridView implementiert ist.
Ausrichtungsprobleme beim Verwenden von ItemContainerStyle
Um Ausrichtungsprobleme zwischen Spaltenheadern und Zellen zu vermeiden, legen Sie keine Eigenschaft fest und geben Sie keine Vorlage an, die die Breite eines Elements in einem ItemContainerStyle beeinflussen kann. Legen Sie beispielsweise die Margin-Eigenschaft nicht fest, und geben Sie keine ControlTemplate an, die ein CheckBox einem ItemContainerStyle hinzufügt, der auf einem ListView-Steuerelement definiert ist. Geben Sie stattdessen die Eigenschaften und Vorlagen an, die sich direkt auf die Spaltenbreite für Klassen auswirken, die einen GridView-Ansichtsmodus definieren.
Wenn Sie z. B. ein CheckBox den Zeilen eines GridView-Ansichtsmodus hinzufügen möchten, fügen Sie das CheckBox einer DataTemplate hinzu, und legen Sie anschließend die CellTemplate-Eigenschaft auf diese DataTemplate fest.
Benutzerinteraktionen mit einer GridView
Wenn Sie eine GridView in Ihrer Anwendung verwenden, können Benutzer mit der Formatierung der GridView interagieren und Änderungen daran vornehmen. Beispielsweise können Benutzer die Spalten neu anordnen, die Spaltengröße ändern, Elemente in einer Tabelle auswählen und einen Bildlauf durch Inhalte durchführen. Sie können auch einen Ereignishandler definieren, der antwortet, wenn ein Benutzer auf die Spaltenheader-Schaltfläche klickt. Der Ereignishandler kann Vorgänge wie das Sortieren von Daten ausführen, die gemäß den Inhalten einer Spalte in der GridView angezeigt werden.
In der folgenden Liste werden die Funktionen für die Verwendung von GridView für die Benutzerinteraktion im Detail erläutert:
Neuanordnen von Spalten mit Drag & Drop
Benutzer können Spalten in einer GridView neu anordnen, indem Sie die linke Maustaste drücken, während sich die Maus über einem Spaltenheader befindet, und anschließend die Spalte in eine neue Position ziehen. Während der Benutzer den Spaltenheader zieht, wird eine unverankerte Version des Headers sowie eine durchgehende schwarze Linie angezeigt, die zeigt, wo die Spalte eingefügt werden soll.
Wenn Sie den Standardstil für die unverankerte Version eines Headers ändern möchten, geben Sie eine ControlTemplate für einen GridViewColumnHeader-Typ an, die ausgelöst wird, wenn die Role-Eigenschaft auf Floating festgelegt wird. Weitere Informationen finden Sie unter Gewusst wie: Erstellen eines Stils für einen gezogenen GridView-Spaltenheader.
Ändern der Größe einer Spalte gemäß ihrem Inhalt
Benutzer können auf den Ziehpunkt rechts neben dem Spaltenheader doppelklicken, um die Größe einer Spalte gemäß ihrem Inhalt zu ändern.
HinweisWenn Sie die Width-Eigenschaft auf Double.NaN festlegen, erhalten Sie denselben Effekt.
Auswählen von Zeilenelementen
Benutzer können ein oder mehrere Elemente in einer GridView auswählen.
Informationen zum Ändern des Style eines ausgewählten Elements finden Sie unter Gewusst wie: Verwenden von Triggern zum Formatieren ausgewählter Elemente in einem ListView.
Durchführen eines Bildlaufs zum Anzeigen von Inhalten, die auf dem Bildschirm anfänglich nicht sichtbar sind
Wenn die Größe der GridView nicht ausreicht, um alle Elemente anzuzeigen, können Benutzer einen horizontalen oder vertikalen Bildlauf durchführen, indem Sie die Bildlaufleisten verwenden, die von einem ScrollViewer-Steuerelement bereitgestellt werden. Eine ScrollBar wird ausgeblendet, wenn der ganze Inhalt in einer bestimmten Richtung sichtbar ist. Spaltenheader führen keinen Bildlauf mit einer vertikalen, jedoch mit einer horizontalen Bildlaufleite durch.
Interagieren mit Spalten durch Klicken auf die Spaltenheader-Schaltflächen
Wenn Benutzer auf eine Spaltenheader-Schaltfläche klicken, können sie die in der Spalte angezeigten Daten sortieren, sofern Sie einen Sortieralgorithmus bereitgestellt haben.
Sie können das Click-Ereignis für Spaltenheader-Schaltflächen behandeln, um Funktionalität wie einen Sortieralgorithmus hinzuzufügen. Um das Click-Ereignis für einen einzelnen Spaltenheader zu behandeln, legen Sie einen Ereignishandler auf dem GridViewColumnHeader fest. Um einen Ereignishandler festzulegen, der das Click-Ereignis für alle Spaltenheader behandelt, legen Sie den Handler auf dem ListView-Steuerelement fest.
Abrufen anderer benutzerdefinierter Ansichten
Die GridView-Klasse, die von der abstrakten ViewBase-Klasse abgeleitet ist, ist nur einer der möglichen Ansichtsmodi für die ListView-Klasse. Sie können andere benutzerdefinierte Ansichten für ListView erstellen, indem Sie sie von der ViewBase-Klasse ableiten. Ein Beispiel für einen benutzerdefinierten Ansichtsmodus finden Sie unter Gewusst wie: Erstellen eines benutzerdefinierten Ansichtsmodus für eine ListView.
GridView-unterstützende Klassen
Die folgenden Klassen unterstützen den GridView-Ansichtsmodus.
Siehe auch
Aufgaben
Gewusst wie: Sortieren einer GridView-Spalte beim Klicken auf einen Header