Xamarin.Forms Tableview

  • Artículo
  • 6 minutos para leer

Ejemplo de descarga Descarga del ejemplo

TableView es una vista para mostrar listas desplazables de datos o opciones donde hay filas que no comparten la misma plantilla. A diferencia de ListView, no tiene el concepto de , por lo que los elementos deben agregarse manualmente como elementos ItemsSource secundarios.

Ejemplo de TableView

Casos de uso

TableView es útil cuando:

  • presentar una lista de configuraciones,
  • recopilar datos en un formulario o
  • mostrar datos que se presentan de forma diferente de fila a fila (por ejemplo, números, porcentajes e imágenes).

TableView controla el desplazamiento y el diseño de filas en secciones atractivas, una necesidad común para los escenarios anteriores. El TableView control usa la vista equivalente subyacente de cada plataforma cuando está disponible, lo que crea un aspecto nativo para cada plataforma.

Estructura

Los elementos de TableView un se organizan en secciones. En la raíz de TableView se encuentra , que es primario para una o varias instancias de TableRootTableSection . Cada TableSection consta de un encabezado y una o varias ViewCell instancias:

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

El código de C# equivalente es el siguiente:

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

Aspecto

TableViewexpone la propiedad Xamarin_Forms TableView _TableView_Intent" data-linktype="absolute-path">, que se puede establecer en cualquiera de los miembros de IntentTableIntent enumeración:

  • Data : para su uso al mostrar entradas de datos. Tenga en cuenta que ListView puede ser una mejor opción para desplazar listas de datos.
  • Form : para su uso cuando TableView actúa como un formulario.
  • Menu : para su uso al presentar un menú de selecciones.
  • Settings : para su uso al mostrar una lista de opciones de configuración.

El TableIntent valor que elija puede afectar a cómo aparece en cada TableView plataforma. Aunque no haya diferencias claras, es un procedimiento recomendado seleccionar el que mejor se adapte a la forma de TableIntent usar la tabla.

Además, el color del texto que se muestra para cada se puede TableSection cambiar estableciendo la TextColor propiedad en Color .

Celdas integradas

Xamarin.Forms viene con celdas integradas para recopilar y mostrar información. Aunque ListView y pueden usar todas las mismas TableView celdas, SwitchCell y son los más EntryCell relevantes para un TableView escenario.

Consulte ListView Cell Appearance (Apariencia de celda de ListView) para obtener una descripción detallada de TextCelle ImageCell.

SwitchCell

SwitchCelles el control que se usa para presentar y capturar un estado on/off o true/false . Define las siguientes propiedades:

  • Text : texto que se muestra junto al conmutador.
  • On : indica si el modificador se muestra como encendido o desactivado.
  • OnColor : Color del modificador cuando está en la posición de encendido.

Todas estas propiedades son enlazables.

SwitchCell también expone el OnChanged evento , lo que le permite responder a los cambios en el estado de la celda.

Ejemplo de SwitchCell

EntryCell

EntryCell es útil cuando necesita mostrar datos de texto que el usuario puede editar. Define las siguientes propiedades:

  • Keyboard : el teclado que se mostrará durante la edición. Hay opciones para aspectos como valores numéricos, correo electrónico, números de teléfono, etc. Consulte los documentos de api.
  • Label : texto de etiqueta que se muestra a la izquierda del campo de entrada de texto.
  • LabelColor : color del texto de la etiqueta.
  • Placeholder : texto que se muestra en el campo de entrada cuando es null o está vacío. Este texto desaparece cuando comienza la entrada de texto.
  • Text : el texto del campo de entrada.
  • HorizontalTextAlignment : alineación horizontal del texto. Los valores están alineados al centro, a la izquierda o a la derecha. Consulte los documentos de API.
  • VerticalTextAlignment : alineación vertical del texto. Los valores Start son Center , o End .

EntryCell también expone el evento , que se desencadena cuando el usuario alcanza el botón "listo" en el teclado al Completed editar texto.

Ejemplo de EntryCell

Celdas personalizadas

Cuando las celdas integradas no son suficientes, se pueden usar celdas personalizadas para presentar y capturar datos de la manera que tenga sentido para la aplicación. Por ejemplo, puede presentar un control deslizante para permitir que un usuario elija la opacidad de una imagen.

Todas las celdas personalizadas deben derivar de , la misma clase base que usan todos los tipos ViewCell de celda integrados.

Este es un ejemplo de una celda personalizada:

Ejemplo de celda personalizada

En el ejemplo siguiente se muestra el CÓDIGO XAML usado para crear en TableView las capturas de pantalla anteriores:

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

El código de C# equivalente es el siguiente:

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;

El elemento raíz bajo TableView es , y hay un inmediatamente TableRootTableSection debajo de TableRoot . se define directamente en y se usa para administrar el diseño de la celda personalizada, aunque cualquier diseño ViewCellTableSection se podría usar StackLayout aquí.

Nota:

A ListView diferencia de , no requiere que las TableView celdas personalizadas (o ninguna) se definan en ItemTemplate .

Alto de fila

La TableView clase tiene dos propiedades que se pueden usar para cambiar el alto de fila de las celdas:

Cuando se cambia el alto del contenido de una celda de , el alto de fila se actualiza implícitamente en Android y la Plataforma Windows universal TableView (UWP). Sin embargo, en iOS se debe forzar la actualización estableciendo la propiedad data-linktype="absolute-path">de Xamarin_Forms _TableView_HasUnevenRows" en y llamando al método HasUnevenRowstrue Xamarin_Forms HasUnevenRows _Cell_ForceUpdateSize" data-linktype="absolute-path">. Cell.ForceUpdateSize

En el ejemplo xaml siguiente se muestra TableView un que contiene 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>

Cuando se ViewCell pulsa , se ejecuta el controlador de OnViewCellTapped eventos:

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

El controlador de eventos muestra u oculta el segundo en y actualiza explícitamente el tamaño de la celda llamando al método OnViewCellTappedLabel Xamarin_Forms ViewCellOnViewCellTapped _Cell_ForceUpdateSize" data-linktype="absolute-path">. Cell.ForceUpdateSize

En las capturas de pantalla siguientes se muestra la celda antes de pulsarla:

ViewCell antes de cambiar el tamaño

En las capturas de pantalla siguientes se muestra la celda después de pulsarla:

ViewCell después de cambiar el tamaño

Importante

Existe una gran posibilidad de degradación del rendimiento si esta característica se usa en exceso.