Xamarin.Forms Tableview

Das Beispiel herunterladen

TableView ist eine Ansicht zum Anzeigen scrollbarer Listen mit Daten oder Optionen, in denen Zeilen vorhanden sind, die nicht dieselbe Vorlage verwenden. Im Gegensatz zu ListViewTableView hat nicht das Konzept eines ItemsSource, daher müssen Elemente manuell als untergeordnete Elemente hinzugefügt werden.

Anwendungsfälle

TableView ist nützlich, wenn:

• anzeigen einer Liste von Einstellungen,
• Das Sammeln von Daten in einem Formular oder
• Zeigt Daten an, die von Zeile zu Zeile unterschiedlich dargestellt werden (z. B. Zahlen, Prozentwerte und Bilder).

TableView behandelt das Scrollen und Auslegen von Zeilen in attraktiven Abschnitten, was für die oben genannten Szenarien häufig erforderlich ist. Das TableView Steuerelement verwendet die zugrunde liegende gleichwertige Ansicht jeder Plattform, sofern verfügbar, und erstellt ein natives Aussehen für jede Plattform.

Struktur

Elemente in einem TableView werden in Abschnitten organisiert. Im Stamm von befindet sich TableView der , der TableRooteiner oder TableSection mehreren Instanzen übergeordnet ist. Jede TableSection besteht aus einer Überschrift und einer oder ViewCell mehreren Instanzen:

<TableView Intent="Settings">
    <TableRoot>
        <TableSection Title="Ring">
            <SwitchCell Text="New Voice Mail" />
            <SwitchCell Text="New Mail" On="true" />
        </TableSection>
    </TableRoot>
</TableView>

Der entsprechende C#-Code lautet:

Content = new TableView
{
    Root = new TableRoot
    {
        new TableSection("Ring")
        {
          // TableSection constructor takes title as an optional parameter
          new SwitchCell { Text = "New Voice Mail" },
          new SwitchCell { Text = "New Mail", On = true }
        }
    },
    Intent = TableIntent.Settings
};

Darstellung

TableView macht die Intent -Eigenschaft verfügbar, die auf jedes der TableIntent Enumerationsmber festgelegt werden kann:

• Data – zur Verwendung beim Anzeigen von Dateneinträgen. Beachten Sie, dass ListView möglicherweise eine bessere Option zum Scrollen von Datenlisten ist.
• Form – zur Verwendung, wenn die TableView als Formular fungiert.
• Menu – zur Verwendung bei der Darstellung eines Auswahlmenüs.
• Settings – zur Verwendung beim Anzeigen einer Liste von Konfigurationseinstellungen.

Der TableIntent von Ihnen ausgewählte Wert wirkt sich möglicherweise darauf aus, wie der TableView auf jeder Plattform angezeigt wird. Auch wenn es keine eindeutigen Unterschiede gibt, empfiehlt es sich, die auszuwählen, die der TableIntent Verwendung der Tabelle am ehesten entspricht.

Darüber hinaus kann die Farbe des für jeden TableSection angezeigten Texts geändert werden, indem die TextColor -Eigenschaft auf festgelegt Colorwird.

Integrierte Zellen

Xamarin.Forms enthält integrierte Zellen zum Sammeln und Anzeigen von Informationen. Obwohl ListView und TableView alle gleichen Zellen verwenden können, SwitchCell und EntryCell sind die relevantesten für ein TableView Szenario.

Eine ausführliche Beschreibung von TextCell und ImageCell finden Sie unter ListView Cell Appearance.

SwitchCell

SwitchCell ist das Steuerelement, das zum Darstellen und Erfassen eines Ein-/Aus- oder true/false Zustands verwendet werden soll. In ihr werden die folgenden Eigenschaften definiert:

• Text – Text, der neben dem Schalter angezeigt werden soll.
• On – gibt an, ob der Schalter als ein- oder ausgeschaltet angezeigt wird.
• OnColor – die Color des Schalters, wenn er sich in der Position on befindet.

Alle diese Eigenschaften können gebunden werden.

SwitchCell Macht das OnChanged Ereignis auch verfügbar, sodass Sie auf Änderungen im Zustand der Zelle reagieren können.

EntryCell

EntryCell ist nützlich, wenn Sie Textdaten anzeigen müssen, die der Benutzer bearbeiten kann. In ihr werden die folgenden Eigenschaften definiert:

• Keyboard – Die Tastatur, die beim Bearbeiten angezeigt werden soll. Es gibt Optionen für Dinge wie numerische Werte, E-Mail, Telefonnummern usw. Weitere Informationen finden Sie in der API-Dokumentation.
• Label – Der Bezeichnungstext, der links neben dem Texteingabefeld angezeigt werden soll.
• LabelColor – Die Farbe des Bezeichnungstexts.
• Placeholder – Text, der im Eingabefeld angezeigt werden soll, wenn es NULL oder leer ist. Dieser Text wird ausgeblendet, wenn die Texteingabe beginnt.
• Text – Der Text im Eingabefeld.
• HorizontalTextAlignment – Die horizontale Ausrichtung des Texts. Werte sind zentriert, links oder rechtsbündig. Weitere Informationen finden Sie in der API-Dokumentation.
• VerticalTextAlignment – Die vertikale Ausrichtung des Texts. Werte sind Start, Centeroder End.

EntryCell macht auch das Completed Ereignis verfügbar, das ausgelöst wird, wenn der Benutzer beim Bearbeiten von Text auf die Schaltfläche "Fertig" auf der Tastatur klickt.

Benutzerdefinierte Zellen

Wenn die integrierten Zellen nicht ausreichen, können benutzerdefinierte Zellen verwendet werden, um Daten so darzustellen und zu erfassen, wie es für Ihre App sinnvoll ist. Sie können beispielsweise einen Schieberegler darstellen, damit ein Benutzer die Deckkraft eines Bilds auswählen kann.

Alle benutzerdefinierten Zellen müssen von abgeleitet werden ViewCell, der gleichen Basisklasse, die alle integrierten Zelltypen verwenden.

Dies ist ein Beispiel für eine benutzerdefinierte Zelle:

Das folgende Beispiel zeigt den XAML-Code, der zum Erstellen von TableView verwendet wird, in den screenshots oben:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="DemoTableView.TablePage"
             Title="TableView">
      <TableView Intent="Settings">
          <TableRoot>
              <TableSection Title="Getting Started">
                  <ViewCell>
                      <StackLayout Orientation="Horizontal">
                          <Image Source="bulb.png" />
                          <Label Text="left"
                                 TextColor="#f35e20" />
                          <Label Text="right"
                                 HorizontalOptions="EndAndExpand"
                                 TextColor="#503026" />
                      </StackLayout>
                  </ViewCell>
              </TableSection>
          </TableRoot>
      </TableView>
</ContentPage>

Der entsprechende C#-Code lautet:

var table = new TableView();
table.Intent = TableIntent.Settings;
var layout = new StackLayout() { Orientation = StackOrientation.Horizontal };
layout.Children.Add (new Image() { Source = "bulb.png"});
layout.Children.Add (new Label()
{
    Text = "left",
    TextColor = Color.FromHex("#f35e20"),
    VerticalOptions = LayoutOptions.Center
});
layout.Children.Add (new Label ()
{
    Text = "right",
    TextColor = Color.FromHex ("#503026"),
    VerticalOptions = LayoutOptions.Center,
    HorizontalOptions = LayoutOptions.EndAndExpand
});
table.Root = new TableRoot ()
{
    new TableSection("Getting Started")
    {
        new ViewCell() {View = layout}
    }
};
Content = table;

Das Stammelement unter ist TableView das TableRoot, und es befindet sich direkt TableSection unter dem TableRoot. Wird ViewCell direkt unter TableSectiondefiniert, und a StackLayout wird verwendet, um das Layout der benutzerdefinierten Zelle zu verwalten, obwohl hier jedes Layout verwendet werden könnte.

Hinweis

Im Gegensatz zu ListViewist TableView nicht erforderlich, dass benutzerdefinierte (oder beliebige) Zellen in einem ItemTemplatedefiniert sind.

Zeilenhöhe

Die TableView -Klasse verfügt über zwei Eigenschaften, die verwendet werden können, um die Zeilenhöhe von Zellen zu ändern:

• RowHeight – legt die Höhe jeder Zeile auf ein intfest.
• HasUnevenRows – Zeilen weisen unterschiedliche Höhen auf, wenn sie auf truefestgelegt sind. Beachten Sie, dass beim Festlegen dieser Eigenschaft auf trueautomatisch Zeilenhöhen berechnet und von Xamarin.Formsangewendet werden.

Wenn die Höhe des Inhalts in einer Zelle in einem TableView geändert wird, wird die Zeilenhöhe implizit unter Android und dem Universelle Windows-Plattform (UWP) aktualisiert. Unter iOS muss die Aktualisierung jedoch erzwungen werden, indem die HasUnevenRows -Eigenschaft auf true und durch Aufrufen der Cell.ForceUpdateSize -Methode festgelegt wird.

Das folgende XAML-Beispiel zeigt ein TableView , das einen ViewCellenthält:

<ContentPage ...>
    <TableView ...
               HasUnevenRows="true">
        <TableRoot>
            ...
            <TableSection ...>
                ...
                <ViewCell x:Name="_viewCell"
                          Tapped="OnViewCellTapped">
                    <Grid Margin="15,0">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Label Text="Tap this cell." />
                        <Label x:Name="_target"
                               Grid.Row="1"
                               Text="The cell has changed size."
                               IsVisible="false" />
                    </Grid>
                </ViewCell>
            </TableSection>
        </TableRoot>
    </TableView>
</ContentPage>

ViewCell Wenn getippt wird, wird der OnViewCellTapped Ereignishandler ausgeführt:

void OnViewCellTapped(object sender, EventArgs e)
{
    _target.IsVisible = !_target.IsVisible;
    _viewCell.ForceUpdateSize();
}

Der OnViewCellTapped Ereignishandler zeigt die zweite Label In ViewCell- oder Ausblendeung an und aktualisiert explizit die Zellengröße, indem die Cell.ForceUpdateSize -Methode aufgerufen wird.

Die folgenden Screenshots zeigen die Zelle vor dem Tippen auf:

Die folgenden Screenshots zeigen die Zelle nach dem Tippen auf:

Wichtig

Es besteht eine starke Möglichkeit einer Leistungsbeeinträchtigung, wenn dieses Feature überlastet ist.

Verwandte Links

• TableView (Beispiel)