Xamarin.Forms TableView

  • Article

Télécharger l’exemple Télécharger l’exemple

TableView est une vue permettant d’afficher des listes de données ou de choix défilement où il existe des lignes qui ne partagent pas le même modèle. Contrairement à ListView, TableView n’ayant pas le concept d’un ItemsSource, les éléments doivent être ajoutés manuellement en tant qu’enfants.

Exemple TableView

Cas d'utilisation

TableView est utile dans les cas suivants :

  • présentant une liste de paramètres,
  • collecte de données dans un formulaire, ou
  • montrant les données présentées différemment d’une ligne à l’autre (par exemple, des nombres, des pourcentages et des images).

TableView gère le défilement et la disposition des lignes dans des sections attrayantes, un besoin courant dans les scénarios ci-dessus. Le TableView contrôle utilise l’affichage équivalent sous-jacent de chaque plateforme lorsqu’il est disponible, ce qui crée une apparence native pour chaque plateforme.

Structure

Les éléments d’un TableView sont organisés en sections. À la racine de TableView se trouve le TableRoot, qui est parent d’une ou plusieurs TableSection instances. Chacune TableSection se compose d’un titre et d’une ou plusieurs ViewCell instances :

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

Le code C# équivalent est :

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

Apparence

TableView expose la Intent propriété, qui peut être définie sur n’importe quel membre d’énumération TableIntent :

  • Data – à utiliser lors de l’affichage des entrées de données. Notez que ListView peut être une meilleure option pour faire défiler les listes de données.
  • Form : à utiliser lorsque tableView agit comme un formulaire.
  • Menu – à utiliser lors de la présentation d’un menu de sélections.
  • Settings : à utiliser lors de l’affichage d’une liste de paramètres de configuration.

La TableIntent valeur que vous choisissez peut avoir un impact sur la façon dont le TableView apparaît sur chaque plateforme. Même s’il n’y a pas de différences claires, il est recommandé de sélectionner le qui correspond le plus à la TableIntent façon dont vous envisagez d’utiliser le tableau.

En outre, la couleur du texte affiché pour chacun TableSection d’eux peut être modifiée en définissant la TextColor propriété sur un Color.

Cellules intégrées

Xamarin.Forms est fourni avec des cellules intégrées pour la collecte et l’affichage d’informations. Bien que ListView et TableView puissent utiliser toutes les mêmes cellules, SwitchCell et EntryCell sont les plus pertinents pour un TableView scénario.

Consultez Apparence des cellules ListView pour obtenir une description détaillée de TextCell et ImageCell.

SwitchCell

SwitchCell est le contrôle à utiliser pour présenter et capturer un état activé/désactivé true/false . Il définit les propriétés suivantes :

  • Text – texte à afficher à côté du commutateur.
  • On : indique si le commutateur est activé ou désactivé.
  • OnColorColor: du commutateur lorsqu’il est en position activée.

Toutes ces propriétés peuvent être liées.

SwitchCell expose également l’événement OnChanged , ce qui vous permet de répondre aux modifications de l’état de la cellule.

Exemple SwitchCell

EntryCell

EntryCell est utile lorsque vous devez afficher des données de texte que l’utilisateur peut modifier. Il définit les propriétés suivantes :

  • Keyboard : clavier à afficher lors de la modification. Il existe des options pour des éléments tels que les valeurs numériques, l’e-mail, les numéros de téléphone, etc. Consultez la documentation de l’API.
  • Label : texte d’étiquette à afficher à gauche du champ d’entrée de texte.
  • LabelColor : couleur du texte de l’étiquette.
  • Placeholder – Texte à afficher dans le champ d’entrée lorsqu’il est null ou vide. Ce texte disparaît lorsque l’entrée de texte commence.
  • Text : texte dans le champ d’entrée.
  • HorizontalTextAlignment : alignement horizontal du texte. Les valeurs sont alignées au centre, à gauche ou à droite. Consultez la documentation de l’API.
  • VerticalTextAlignment : alignement vertical du texte. Les valeurs sont Start, Centerou End.

EntryCell expose également l’événement Completed , qui est déclenché lorsque l’utilisateur clique sur le bouton « terminé » sur le clavier lors de la modification du texte.

Exemple EntryCell

Cellules personnalisées

Lorsque les cellules intégrées ne sont pas suffisantes, les cellules personnalisées peuvent être utilisées pour présenter et capturer des données de la manière appropriée pour votre application. Par exemple, vous pouvez présenter un curseur pour permettre à un utilisateur de choisir l’opacité d’une image.

Toutes les cellules personnalisées doivent dériver de ViewCell, la même classe de base que tous les types de cellules intégrés utilisent.

Voici un exemple de cellule personnalisée :

Exemple de cellule personnalisée

L’exemple suivant montre le CODE XAML utilisé pour créer le TableView dans les captures d’écran ci-dessus :

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

Le code C# équivalent est :

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;

L’élément racine sous est TableView , TableRootet il y a un TableSection juste en dessous du TableRoot. le ViewCell est défini directement sous , TableSectionet un StackLayout est utilisé pour gérer la disposition de la cellule personnalisée, bien que n’importe quelle disposition puisse être utilisée ici.

Notes

Contrairement à ListView, TableView n’exige pas que les cellules personnalisées (ou toutes) soient définies dans un ItemTemplate.

Hauteur de ligne

La TableView classe a deux propriétés qui peuvent être utilisées pour modifier la hauteur de ligne des cellules :

  • RowHeight : définit la hauteur de chaque ligne sur un int.
  • HasUnevenRows : les lignes ont des hauteurs variables si elles sont définies sur true. Notez que lorsque vous définissez cette propriété sur true, les hauteurs de ligne sont automatiquement calculées et appliquées par Xamarin.Forms.

Lorsque la hauteur du contenu d’une cellule d’une TableView cellule est modifiée, la hauteur de ligne est implicitement mise à jour sur Android et le plateforme Windows universelle (UWP). Toutefois, sur iOS, la mise à jour doit être forcée en définissant la HasUnevenRows propriété sur true et en appelant la Cell.ForceUpdateSize méthode.

L’exemple XAML suivant montre un TableView qui contient un 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>

Lorsque le ViewCell est appuyé, le OnViewCellTapped gestionnaire d’événements est exécuté :

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

Le OnViewCellTapped gestionnaire d’événements affiche ou masque le second Label dans , ViewCellet met à jour explicitement la taille de la cellule en appelant la Cell.ForceUpdateSize méthode .

Les captures d’écran suivantes montrent la cellule avant d’être exploitée :

ViewCell avant d’être redimensionné

Les captures d’écran suivantes montrent la cellule après avoir été exploitée :

ViewCell après avoir été redimensionné

Important

Il existe un fort risque de dégradation des performances si cette fonctionnalité est surutilisée.