Xamarin.FormsTableView TableView

Beispiel herunterladen Das Beispiel herunterladenDownload Sample Download the sample

TableViewist eine Ansicht für die Anzeige von Bild lauffähigen Listen mit Daten oder Optionen, bei denen Zeilen vorhanden sind, die nicht dieselbe Vorlage verwenden.TableView is a view for displaying scrollable lists of data or choices where there are rows that don't share the same template. Im Gegensatz zu ListViewhat TableView nicht das Konzept von ItemsSource , sodass Elemente manuell als untergeordnete Elemente hinzugefügt werden müssen.Unlike ListView, TableView does not have the concept of an ItemsSource, so items must be manually added as children.

TableView-Beispiel

AnwendungsfälleUse cases

TableViewist nützlich, wenn:TableView is useful when:

  • eine Liste der Einstellungen wird angezeigt.presenting a list of settings,
  • Sammeln von Daten in einem Formular odercollecting data in a form, or
  • Anzeige von Daten, die von Zeile zu Zeile (z. b. Zahlen, Prozentsätze und Bilder) unterschiedlich dargestellt werden.showing data that is presented differently from row to row (e.g. numbers, percentages and images).

TableViewbehandelt das Scrollen und das Anordnen von Zeilen in attraktiven Abschnitten, eine häufige Anforderung für die oben genannten Szenarien.TableView handles scrolling and laying out rows in attractive sections, a common need for the above scenarios. Das TableView Steuerelement verwendet die zugrunde liegende äquivalente Ansicht jeder Plattform, sofern verfügbar, und erstellt eine native Betrachtung für jede Plattform.The TableView control uses each platform's underlying equivalent view when available, creating a native look for each platform.

StrukturStructure

Elemente in einer TableView sind in Abschnitte organisiert.Elements in a TableView are organized into sections. Am TableView Stamm des ist das, das TableRoot einer oder mehreren-Instanzen übergeordnet ist TableSection .At the root of the TableView is the TableRoot, which is parent to one or more TableSection instances. Jede TableSection besteht aus einer Überschrift und mindestens einer ViewCell Instanz:Each TableSection consists of a heading and one or more ViewCell instances:

<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:The equivalent C# code is:

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
};

DarstellungAppearance

TableViewmacht die- Intent Eigenschaft verfügbar, die auf einen der Enumerationsmember festgelegt werden kann TableIntent :TableView exposes the Intent property, which can be set to any of the TableIntent enumeration members:

  • Data–, das beim Anzeigen von Daten Einträgen verwendet werden soll.Data – for use when displaying data entries. Beachten Sie, dass ListView möglicherweise eine bessere Option für den Bildlauf von Listen mit Daten ist.Note that ListView may be a better option for scrolling lists of data.
  • Form– wird verwendet, wenn die TableView als Formular fungiert.Form – for use when the TableView is acting as a Form.
  • Menu–, der verwendet werden soll, wenn ein Menü der Auswahl angezeigt wird.Menu – for use when presenting a menu of selections.
  • Settings–, das beim Anzeigen einer Liste von Konfigurationseinstellungen verwendet werden soll.Settings – for use when displaying a list of configuration settings.

Der TableIntent von Ihnen gewählte Wert kann sich darauf auswirken, wie TableView auf jeder Plattform angezeigt wird.The TableIntent value you choose may impact how the TableView appears on each platform. Auch wenn es keine klaren Unterschiede gibt, empfiehlt es sich, das auszuwählen, das TableIntent am ehesten mit der Verwendung der Tabelle übereinstimmt.Even if there are not clear differences, it is a best practice to select the TableIntent that most closely matches how you intend to use the table.

Außerdem kann die Farbe des jeweils angezeigten Texts TableSection geändert werden, indem die-Eigenschaft auf festgelegt wird TextColor Color .In addition, the color of the text displayed for each TableSection can be changed by setting the TextColor property to a Color.

Integrierte ZellenBuilt-in cells

Xamarin.Formsenthält integrierte Zellen zum Erfassen und Anzeigen von Informationen. comes with built-in cells for collecting and displaying information. Obwohl ListView und TableView die gleichen Zellen verwenden können, SwitchCell EntryCell sind und für ein Szenario am relevantesten TableView .Although ListView and TableView can use all of the same cells, SwitchCell and EntryCell are the most relevant for a TableView scenario.

Eine ausführliche Beschreibung von textcell und ImageCellfinden Sie unter ListView Cell Appearance .See ListView Cell Appearance for a detailed description of TextCell and ImageCell.

SwitchcellSwitchCell

SwitchCellist das Steuerelement, das zum darstellen und Erfassen eines ein-/ausschalten oder-Zustands verwendet werden soll true / false .SwitchCell is the control to use for presenting and capturing an on/off or true/false state. In ihr werden die folgenden Eigenschaften definiert:It defines the following properties:

  • Text– Text, der neben dem Switch angezeigt werden soll.Text – text to display beside the switch.
  • On– Gibt an, ob der Schalter als ein-oder ausgeschaltet angezeigt wird.On – whether the switch is displayed as on or off.
  • OnColor– die Color des Schalters, wenn Sie sich in der Position an befindet.OnColor – the Color of the switch when it's in the on position.

Alle diese Eigenschaften sind bindbar.All of these properties are bindable.

SwitchCellmacht auch das- OnChanged Ereignis verfügbar, sodass Sie auf Änderungen im Zustand der Zelle reagieren können.SwitchCell also exposes the OnChanged event, allowing you to respond to changes in the cell's state.

Switchcell-Beispiel

EntrycellEntryCell

EntryCellist nützlich, wenn Sie Textdaten anzeigen müssen, die der Benutzer bearbeiten kann.EntryCell is useful when you need to display text data that the user can edit. In ihr werden die folgenden Eigenschaften definiert:It defines the following properties:

  • Keyboard– Die Tastatur, die während der Bearbeitung angezeigt werden soll.Keyboard – The keyboard to display while editing. Es gibt Optionen, wie z. b. numerische Werte, e-Mail, Telefonnummern usw., finden Sie in der API-Dokumentation.There are options for things like numeric values, email, phone numbers, etc. See the API docs.
  • Label– Der Bezeichnungs Text, der auf der linken Seite des Texteingabe Felds angezeigt werden soll.Label – The label text to display to the left of the text entry field.
  • LabelColor– Die Farbe des Beschriftungs Texts.LabelColor – The color of the label text.
  • Placeholder– Text, der im Eingabefeld angezeigt werden soll, wenn der Wert NULL oder leer ist.Placeholder – Text to display in the entry field when it is null or empty. Dieser Text verschwindet, wenn der Text Eintrag beginnt.This text disappears when text entry begins.
  • Text– Der Text im Eingabefeld.Text – The text in the entry field.
  • HorizontalTextAlignment– Die horizontale Ausrichtung des Texts.HorizontalTextAlignment – The horizontal alignment of the text. Werte sind zentriert, Links oder rechtsbündig ausgerichtet.Values are center, left, or right aligned. Weitere Informationen finden Sie unter API docs.See the API docs.
  • VerticalTextAlignment– Die vertikale Ausrichtung des Texts.VerticalTextAlignment – The vertical alignment of the text. Werte sind Start , Center oder End .Values are Start, Center, or End.

EntryCellmacht auch das- Completed Ereignis verfügbar, das ausgelöst wird, wenn der Benutzer beim Bearbeiten von Text auf die Schaltfläche "Done" auf der Tastatur trifft.EntryCell also exposes the Completed event, which is fired when the user hits the 'done' button on the keyboard while editing text.

Entrycell-Beispiel

Benutzerdefinierte ZellenCustom cells

Wenn die integrierten Zellen nicht ausreichen, können benutzerdefinierte Zellen verwendet werden, um Daten auf die Weise darzustellen und aufzuzeichnen, die für Ihre APP sinnvoll ist.When the built-in cells aren't enough, custom cells can be used to present and capture data in the way that makes sense for your app. Sie können z. b. einen Schieberegler darstellen, um Benutzern die Möglichkeit zu geben, die Deckkraft eines Bilds auszuwählen.For example, you may want to present a slider to allow a user to choose the opacity of an image.

Alle benutzerdefinierten Zellen müssen von abgeleitet ViewCell werden. Dies ist die Basisklasse, die von allen integrierten Zelltypen verwendet wird.All custom cells must derive from ViewCell, the same base class that all of the built-in cell types use.

Dies ist ein Beispiel für eine benutzerdefinierte Zelle:This is an example of a custom cell:

Beispiel für benutzerdefinierte Zelle

Das folgende Beispiel zeigt den XAML-Code, der verwendet wird, um den TableView in den obigen Screenshots zu erstellen:The following example shows the XAML used to create the TableView in the screenshots above:

<?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:The equivalent C# code is:

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 Stamm Element unter dem TableView ist das TableRoot , und es befindet sich TableSection unmittelbar unterhalb von TableRoot .The root element under the TableView is the TableRoot, and there is a TableSection immediately underneath the TableRoot. Der ViewCell wird direkt unter der definiert TableSection , und ein StackLayout wird verwendet, um das Layout der benutzerdefinierten Zelle zu verwalten, obwohl jedes Layout hier verwendet werden kann.The ViewCell is defined directly under the TableSection, and a StackLayout is used to manage the layout of the custom cell, although any layout could be used here.

Hinweis

Im Gegensatz zu ListView TableView erfordert nicht, dass benutzerdefinierte (oder irgendwelche) Zellen in definiert sind ItemTemplate .Unlike ListView, TableView does not require that custom (or any) cells are defined in an ItemTemplate.

ZeilenhöheRow height

Die- TableView Klasse verfügt über zwei Eigenschaften, die verwendet werden können, um die Zeilenhöhe von Zellen zu ändern:The TableView class has two properties that can be used to change the row height of cells:

  • RowHeight– legt die Höhe der einzelnen Zeilen auf einen fest int .RowHeight – sets the height of each row to an int.
  • HasUnevenRows– Zeilen haben unterschiedliche Höhen, wenn auf festgelegt true .HasUnevenRows – rows have varying heights if set to true. Beachten Sie, dass die Zeilenhöhe beim Festlegen dieser Eigenschaft auf true automatisch von berechnet und angewendet wird Xamarin.Forms .Note that when setting this property to true, row heights will automatically be calculated and applied by Xamarin.Forms.

Wenn die Höhe des Inhalts in einer Zelle in einer TableView geändert wird, wird die Zeilenhöhe implizit unter Android und der universelle Windows-Plattform (UWP) aktualisiert.When the height of content in a cell in a TableView is changed, the row height is implicitly updated on Android and the Universal Windows Platform (UWP). Allerdings muss für IOS die Aktualisierung erzwungen werden, indem die-Eigenschaft auf festgelegt wird, HasUnevenRows true indem die-Methode aufgerufen wird Cell.ForceUpdateSize .However, on iOS it must be forced to update by setting the HasUnevenRows property to true and by calling the Cell.ForceUpdateSize method.

Das folgende XAML-Beispiel zeigt ein-Wert TableView , der ein enthält ViewCell :The following XAML example shows a TableView that contains a ViewCell:

<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>

Wenn das- ViewCell Ereignis angetippt wird, wird der- OnViewCellTapped Ereignishandler ausgeführt:When the ViewCell is tapped, the OnViewCellTapped event handler is executed:

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

Der OnViewCellTapped Ereignishandler zeigt den zweiten in der an oder blendet ihn Label aus ViewCell und aktualisiert die Größe der Zelle explizit durch Aufrufen der- Cell.ForceUpdateSize Methode.The OnViewCellTapped event handler shows or hides the second Label in the ViewCell, and explicitly updates the cell's size by calling the Cell.ForceUpdateSize method.

Die folgenden Screenshots zeigen die Zelle vor dem Tippen auf:The following screenshots show the cell prior to being tapped upon:

Viewcell vor der Größenänderung

Die folgenden Screenshots zeigen die Zelle nach dem Tippen auf:The following screenshots show the cell after being tapped upon:

Viewcell nach der Größenänderung

Wichtig

Wenn diese Funktion überlastet ist, besteht eine hohe Wahrscheinlichkeit einer Leistungsminderung.There is a strong possibility of performance degradation if this feature is overused.