TableView
Durchsuchen Sie das BeispielDie .NET Multiplatform App UI (.NET MAUI) TableView zeigt eine Tabelle mit blätterbaren Elementen an, die in Abschnitte gruppiert werden können. Ein TableView wird in der Regel für die Anzeige von Elementen verwendet, bei denen jede Zeile ein anderes Aussehen hat, z. B. bei einer Tabelle mit Einstellungen.
Während TableView das Aussehen der Tabelle verwaltet, wird das Aussehen der einzelnen Elemente in der Tabelle durch Cell definiert. .NET MAUI enthält fünf Zellentypen, die zur Anzeige verschiedener Datenkombinationen verwendet werden. Sie können auch benutzerdefinierte Zellen definieren, die jeden gewünschten Inhalt anzeigen.
TableView definiert die folgenden Eigenschaften:
Intent, vom TypTableIntent, definiert den Zweck der Tabelle auf iOS.HasUnevenRowsvom Typboolgibt an, ob die Einträge in der Tabelle Zeilen mit unterschiedlicher Höhe haben können. Der Standardwert dieser Eigenschaft istfalse.Root, vom TypTableRoot, definiert das untergeordnete Element von TableView.RowHeight, vom Typint, bestimmt die Höhe jeder Zeile, wennHasUnevenRowsfalseist.
Die HasUnevenRows- und RowHeight-Eigenschaften werden durch BindableProperty-Objekte unterstützt, was bedeutet, dass sie Ziele von Datenbindungen und gestylt sein können.
Der Wert der Intent-Eigenschaft hilft, das TableView-Erscheinungsbild nur auf iOS zu definieren. Diese Eigenschaft sollte auf einen Wert der Aufzählung TableIntent gesetzt werden, die die folgenden Elemente definiert:
Menu, um ein auswählbares Menü anzuzeigen.Settings, um eine Tabelle mit den Konfigurationseinstellungen anzuzeigen.Form, zur Darstellung eines Dateneingabeformulars.Data, zur Darstellung von Daten.
Hinweis
TableView ist nicht darauf ausgelegt, die Bindung an eine Sammlung von Elementen zu unterstützen.
Eine TableView erstellen
Um eine Tabelle zu erstellen, erstellen Sie ein TableView-Objekt und setzen seine Intent-Eigenschaft auf ein TableIntent-Mitglied. Das untergeordnete Element eines TableView muss ein TableRoot-Objekt sein, das ein übergeordnetes Element eines oder mehrerer TableSection-Objekte ist. Jeder TableSection besteht aus einem optionalen Titel, dessen Farbe ebenfalls eingestellt werden kann, und einem oder mehreren Cell-Objekten.
Das folgende Beispiel zeigt, wie ein TableView erstellt wird:
<TableView Intent="Menu">
<TableRoot>
<TableSection Title="Chapters">
<TextCell Text="1. Introduction to .NET MAUI"
Detail="Learn about .NET MAUI and what it provides." />
<TextCell Text="2. Anatomy of an app"
Detail="Learn about the visual elements in .NET MAUI" />
<TextCell Text="3. Text"
Detail="Learn about the .NET MAUI controls that display text." />
<TextCell Text="4. Dealing with sizes"
Detail="Learn how to size .NET MAUI controls on screen." />
<TextCell Text="5. XAML vs code"
Detail="Learn more about creating your UI in XAML." />
</TableSection>
</TableRoot>
</TableView>
In diesem Beispiel definiert TableView ein Menü mit TextCell-Objekten:
Hinweis
Jedes TextCell kann einen Befehl ausführen, wenn es angetippt wird, vorausgesetzt, dass die Command-Eigenschaft auf eine gültige ICommand-Implementierung gesetzt ist.
Aussehen der Zellen definieren
Jedes Element in einem TableView wird durch ein Cell-Objekt definiert, und der verwendete Cell-Typ bestimmt das Aussehen der Daten in der Zelle. .NET MAUI enthält die folgenden eingebauten Zellen:
- TextCell, die primären und sekundären Text in getrennten Zeilen anzeigt.
- ImageCell, die ein Bild mit primärem und sekundärem Text in getrennten Zeilen anzeigt.
- SwitchCell, die einen Text und einen Schalter anzeigt, der ein- oder ausgeschaltet werden kann.
- EntryCell, die eine Beschriftung und einen bearbeitbaren Text anzeigt.
- ViewCell, die eine benutzerdefinierte Zelle ist, deren Aussehen durch View definiert ist. Dieser Zellentyp sollte verwendet werden, wenn Sie das Aussehen jedes Elements in einer TableView vollständig definieren möchten.
Textzelle
Ein TextCell zeigt primären und sekundären Text in getrennten Zeilen an. TextCell definiert die folgenden Eigenschaften:
Text, vom Typstring, definiert den anzuzeigenden Primärtext.TextColor, vom Typ Color, steht für die Farbe des Primärtextes.Detail, vom Typstring, definiert den anzuzeigenden Sekundärtext.DetailColor, vom Typ Color, gibt die Farbe des sekundären Textes an.Command, vom Typ ICommand, definiert den Befehl, der ausgeführt wird, wenn die Zelle angetippt wird.CommandParametervom Typobjectsteht für den Parameter, der an den Befehl übergeben wird.
Diese Eigenschaften werden von BindableProperty-Objekten unterstützt, was bedeutet, dass sie Ziele von Datenbindungen sein können und formatiert werden können.
Das folgende Beispiel zeigt die Verwendung eines TextCell, um das Aussehen von Elementen in einem TableView zu definieren:
<TableView Intent="Menu">
<TableRoot>
<TableSection Title="Chapters">
<TextCell Text="1. Introduction to .NET MAUI"
Detail="Learn about .NET MAUI and what it provides." />
<TextCell Text="2. Anatomy of an app"
Detail="Learn about the visual elements in .NET MAUI" />
<TextCell Text="3. Text"
Detail="Learn about the .NET MAUI controls that display text." />
<TextCell Text="4. Dealing with sizes"
Detail="Learn how to size .NET MAUI controls on screen." />
<TextCell Text="5. XAML vs code"
Detail="Learn more about creating your UI in XAML." />
</TableSection>
</TableRoot>
</TableView>
Der folgende Screenshot zeigt, wie die Zelle aussieht:
Bildzelle
Eine ImageCell zeigt ein Bild mit primärem und sekundärem Text in separaten Zeilen an. ImageCell erbt die Eigenschaften von TextCell und definiert die ImageSource-Eigenschaft vom Typ ImageSource, die das Bild angibt, das in der Zelle angezeigt werden soll. Diese Eigenschaft wird durch ein BindableProperty-Objekt gestützt, was bedeutet, dass sie das Ziel von Datenbindungen sein und formatiert werden kann.
Im folgenden Beispiel wird gezeigt, wie die Darstellung einer TableView durch Verwenden einer ImageCell geändert werden kann:
<TableView Intent="Menu">
<TableRoot>
<TableSection Title="Learn how to use your XBox">
<ImageCell Text="1. Introduction"
Detail="Learn about your XBox and its capabilities."
ImageSource="xbox.png" />
<ImageCell Text="2. Turn it on"
Detail="Learn how to turn on your XBox."
ImageSource="xbox.png" />
<ImageCell Text="3. Connect your controller"
Detail="Learn how to connect your wireless controller."
ImageSource="xbox.png" />
<ImageCell Text="4. Launch a game"
Detail="Learn how to launch a game."
ImageSource="xbox.png" />
</TableSection>
</TableRoot>
</TableView>
Der folgende Screenshot zeigt, wie die Zelle aussieht:
Schalterzelle
Eine SwitchCell zeigt Text und einen Schalter an, der ein- oder ausgeschaltet werden kann. SwitchCell definiert die folgenden Eigenschaften:
Text, vom Typstring, definiert den Text, der neben dem Schalter angezeigt werden soll.On, vom Typbool, gibt an, ob der Schalter ein- oder ausgeschaltet ist.OnColor, vom Typ Color, gibt die Farbe des Schalters an, wenn er sich an der Position befindet.
Diese Eigenschaften werden von BindableProperty-Objekten unterstützt, was bedeutet, dass sie Ziele von Datenbindungen sein können und formatiert werden können.
SwitchCell definiert auch ein OnChanged-Ereignis, das ausgelöst wird, wenn sich der Schalterstatus ändert. Das ToggledEventArgs-Objekt, das dieses Ereignis begleitet, definiert eine Value-Eigenschaft, die angibt, ob der Schalter ein- oder ausgeschaltet ist.
Im folgenden Beispiel wird gezeigt, wie die Darstellung von Elementen in einer TableView durch Verwenden einer SwitchCell definiert werden kann:
<TableView Intent="Settings">
<TableRoot>
<TableSection>
<SwitchCell Text="Airplane Mode"
On="False" />
<SwitchCell Text="Notifications"
On="True" />
</TableSection>
</TableRoot>
</TableView>
Der folgende Screenshot zeigt, wie die Zelle aussieht:
Eintragszelle
Eine EntryCell zeigt eine Beschriftung und Textdaten an, die bearbeitet werden können. EntryCell definiert die folgenden Eigenschaften:
HorizontalTextAlignment, vom Typ TextAlignment, gibt die horizontale Ausrichtung des Texts an.Keyboard, vom TypKeyboard, bestimmt die Tastatur, die beim Eingeben von Text angezeigt werden soll.- Label, vom Typ
string, stellt den Text dar, der links neben dem bearbeitbaren Text angezeigt werden soll. LabelColor, vom Typ Color, definiert die Farbe des Beschriftungstexts.Placeholder, vom Typstring, stellt den Text dar, der angezeigt wird, wenn dieText-Eigenschaft leer ist.Text, vom Typstring, definiert den bearbeitbaren Text.VerticalTextAlignmentvom Typ TextAlignment, gibt die vertikale Ausrichtung des Texts an.
Diese Eigenschaften werden von BindableProperty-Objekten unterstützt, was bedeutet, dass sie Ziele von Datenbindungen sein können und formatiert werden können.
EntryCell definiert außerdem ein Completed-Ereignis, das ausgelöst wird, wenn Sie die Eingabetaste drücken, um anzugeben, dass die Bearbeitung abgeschlossen ist.
Im folgenden Beispiel wird gezeigt, wie die Darstellung einer TableView durch Verwenden einer EntryCell geändert werden kann:
<TableView Intent="Settings">
<TableRoot>
<TableSection>
<EntryCell Label="Login"
Placeholder="username" />
<EntryCell Label="Password"
Placeholder="password" />
</TableSection>
</TableRoot>
</TableView>
Der folgende Screenshot zeigt, wie die Zelle aussieht:
Ansichtszelle
Eine ViewCell ist eine benutzerdefinierte Zelle, deren Erscheinungsbild durch eine View definiert wird. ViewCell definiert eine View-Eigenschaft vom Typ View, die die Ansicht definiert, die den Inhalt der Zelle darstellt. Diese Eigenschaft wird durch ein BindableProperty-Objekt gestützt, was bedeutet, dass sie das Ziel von Datenbindungen sein und formatiert werden kann.
Hinweis
Die View-Eigenschaft ist die Inhaltseigenschaft der ViewCell-Klasse und muss daher nicht explizit in XAML festgelegt werden.
Im folgenden Beispiel wird gezeigt, wie das Erscheinungsbild eines Elements in einer TableView durch Verwenden einer ViewCell geändert werden kann:
<TableView Intent="Settings">
<TableRoot>
<TableSection Title="Silent">
<ViewCell>
<Grid RowDefinitions="Auto,Auto"
ColumnDefinitions="0.5*,0.5*">
<Label Text="Vibrate"
Margin="10,10,0,0"/>
<Switch Grid.Column="1"
HorizontalOptions="End" />
<Slider Grid.Row="1"
Grid.ColumnSpan="2"
Margin="10"
Minimum="0"
Maximum="10"
Value="3" />
</Grid>
</ViewCell>
</TableSection>
</TableRoot>
</TableView>
Innerhalb der ViewCell kann das Layout von jedem .NET MAUI-Layout verwaltet werden. Der folgende Screenshot zeigt, wie die Zelle aussieht:
Größe von Elementen
Standardmäßig weisen alle Zellen desselben Typs in einer TableView die gleiche Höhe auf. Dieses Verhalten kann jedoch mit den Eigenschaften HasUnevenRows und RowHeight geändert werden. Standardeinstellung für die HasUnevenRows-Eigenschaft ist false.
Die Eigenschaft RowHeight kann auf ein int festgelegt werden, das die Höhe der einzelnen Elemente in der TableView darstellt, vorausgesetzt, dass HasUnevenRows false ist. Wenn HasUnevenRows auf true festgelegt ist, kann jedes Element in der TableView eine andere Höhe aufweisen. Die Höhe jedes Elements wird vom Inhalt jeder Zelle abgeleitet, sodass die Größe jedes Elements auf seinen Inhalt angepasst wird.
Einzelne Zellen können zur Laufzeit programmatisch geändert werden, indem layoutbezogene Eigenschaften von Elementen innerhalb der Zelle geändert werden, vorausgesetzt, die Eigenschaft HasUnevenRows ist true. Im folgenden Beispiel wird die Höhe der Zelle geändert, wenn sie angetippt wird:
void OnViewCellTapped(object sender, EventArgs e)
{
label.IsVisible = !label.IsVisible;
viewCell.ForceUpdateSize();
}
In diesem Beispiel wird der Ereignishandler OnViewCellTapped als Reaktion darauf ausgeführt, dass die Zelle angtippt wurde. Der Event-Handler aktualisiert die Sichtbarkeit des Label-Objekts und die Cell.ForceUpdateSize-Methode aktualisiert die Größe der Zelle. Wenn das Label sichtbar gemacht wurde, vergrößert sich die Höhe der Zelle. Wenn das Label unsichtbar gemacht wurde, wird die Höhe der Zelle verringert.
Warnung
Die übermäßige Verwendung der dynamischen Größenanpassung von Elementen kann zu Leistungseinbußen bei TableView führen.
Layout von rechts nach links
TableView kann seinen Inhalt in einer Flussrichtung von rechts nach links anordnen, indem es seine Eigenschaft FlowDirection auf RightToLeft setzt. Die FlowDirection-Eigenschaft sollte jedoch idealerweise auf einer Seite oder in einem Stammlayout festgelegt werden, sodass alle Elemente innerhalb der Seite oder des Stammlayouts dieser Fließrichtung folgen:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TableViewDemos.RightToLeftTablePage"
Title="Right to left TableView"
FlowDirection="RightToLeft">
<TableView Intent="Settings">
...
</TableView>
</ContentPage>
Die standardmäßige FlowDirection für ein Element mit einem übergeordneten Element ist MatchParent. Daher erbt die TableView den FlowDirection-Eigenschaftswert von der ContentPage.
