TableView
Examinar el ejemploLa interfaz de usuario de aplicación multiplataforma de .NET (.NET MAUI) TableView muestra una tabla de elementos desplazables que se pueden agrupar en secciones. Normalmente TableView se usa para mostrar elementos en los que cada fila tiene un aspecto diferente, como presentar una tabla de configuración.
Aunque TableView administra la apariencia de la tabla, la apariencia de cada elemento de la tabla se define mediante Cell. .NET MAUI incluye cinco tipos de celda que se usan para mostrar diferentes combinaciones de datos y también puede definir celdas personalizadas que muestren cualquier contenido.
TableView define las siguientes propiedades:
Intent, de tipoTableIntent, define el propósito de la tabla en iOS.HasUnevenRows, de tipobool, indica si los elementos de la tabla pueden tener filas de diferentes alturas. El valor predeterminado de esta propiedad esfalse.Root, de tipoTableRoot, define el elemento secundario de TableView.RowHeight, de tipoint, determina el alto de cada fila cuandoHasUnevenRowsesfalse.
Las propiedades HasUnevenRows y RowHeight están respaldadas por objetos BindableProperty, lo que significa que pueden ser destinos de los enlaces de datos y con estilo.
El valor de la propiedad Intent ayuda a definir la apariencia TableView solo en iOS. Esta propiedad debe establecerse en un valor de la enumeración TableIntent, que define los siguientes miembros:
Menu, para presentar un menú seleccionable.Settings, para presentar una tabla de opciones de configuración.Form, para presentar un formulario de entrada de datos.Data, para presentar datos.
Nota:
TableView no está diseñado para admitir el enlace a una colección de elementos.
Crear una TableView
Para crear una tabla, crea un objeto TableView y establece la propiedad Intent en un miembro TableIntent. El elemento secundario de TableView debe ser un objeto TableRoot, que es primario para uno o varios objetos TableSection. Cada TableSection consta de un título opcional cuyo color también se puede establecer y uno o varios objetos Cell.
En el siguiente ejemplo se muestra cómo crear una TableView.
<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>
En este ejemplo, la TableView define un menú mediante objetos TextCell:
Nota:
Cada TextCell puede ejecutar un comando cuando se pulsa, siempre que la propiedad Command esté establecida en una implementación válida ICommand.
Definición de la apariencia de la celda
Cada elemento en un TableView se define mediante un objeto Cell y el tipo Cell utilizado define la apariencia de los datos de la celda. .NET MAUI incluye las siguientes celdas integradas:
- TextCell, que muestra el texto principal y secundario en líneas independientes.
- ImageCell, que muestra una imagen con texto principal y secundario en líneas independientes.
- SwitchCell, que muestra texto y un conmutador que se pueden activar o desactivar.
- EntryCell, que muestra una etiqueta y un texto que se pueden editar.
- ViewCell, que es una celda personalizada cuya apariencia se define mediante unaView. Este tipo de celda debe usarse cuando se quiera definir completamente la apariencia de cada elemento de una TableView.
Celda de texto
Una TextCell muestra texto principal y secundario en líneas independientes. TextCell define las siguientes propiedades:
Text, de tipostring, define el texto principal que se va a mostrar.TextColor, de tipo Color, representa el color del texto principal.Detail, de tipostring, define el texto secundario que se va a mostrar.DetailColor, de tipo Color, indica el color del texto secundario.Command, de tipo ICommand, define el comando que se ejecuta cuando se pulsa la celda.CommandParameter, de tipoobject, representa el parámetro que se pasa al comando.
Estas propiedades están respaldadas por objetos BindableProperty, lo que significa que pueden ser destinos de los enlaces de datos, y que se les puede aplicar un estilo.
En el ejemplo siguiente se muestra cómo usar una TextCell para definir la apariencia de los elementos de una TableView:
<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>
En la captura de pantalla siguiente se muestra la apariencia resultante de la celda:
Celda de imagen
ImageCell muestra una imagen con texto principal y secundario en líneas independientes. ImageCell hereda las propiedades de TextCell y define la propiedad ImageSource, de tipo ImageSource, que especifica la imagen que se va a mostrar en la celda. Esta propiedad está respaldada por un objeto BindableProperty, lo que significa que puede ser destino de los enlaces de datos, y recibir formato de estilo.
En el ejemplo siguiente se muestra cómo usar la apariencia de un ImageCell para definir el aspecto de los elementos mediante TableView:
<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>
En la captura de pantalla siguiente se muestra la apariencia resultante de la celda:
Celda Switch
SwitchCell muestra texto y un conmutador que se puede activar o desactivar. SwitchCell define las siguientes propiedades:
Text, de tipostring, define el texto que se va a mostrar junto al conmutador.On, de tipobool, representa si el conmutador está activado o desactivado.OnColor, de tipo Color, indica el color del modificador cuando está en la posición.
Estas propiedades están respaldadas por objetos BindableProperty, lo que significa que pueden ser destinos de los enlaces de datos, y que se les puede aplicar un estilo.
SwitchCell también define un OnChanged evento que se genera cuando cambia el estado del modificador. El objeto ToggledEventArgs que acompaña a este evento define una propiedad Value, que indica si el conmutador está activado o desactivado.
En el ejemplo siguiente se muestra cómo usar una SwitchCell para definir la apariencia de los elementos de una TableView:
<TableView Intent="Settings">
<TableRoot>
<TableSection>
<SwitchCell Text="Airplane Mode"
On="False" />
<SwitchCell Text="Notifications"
On="True" />
</TableSection>
</TableRoot>
</TableView>
En la captura de pantalla siguiente se muestra la apariencia resultante de la celda:
Celda de entrada
EntryCell muestra una etiqueta y datos de texto que se pueden editar. EntryCell define las siguientes propiedades:
HorizontalTextAlignment, del tipoTextAlignment, representa la alineación horizontal del texto.Keyboard, de tipoKeyboard, determina el teclado que se va a mostrar al escribir texto.- Label, de tipo
string, representa el texto que se va a mostrar a la izquierda del texto editable. LabelColor, de tipo Color, define el color del texto de la etiqueta.Placeholder, de tipostring, representa el texto que se muestra cuando la propiedadTextestá vacía.Text, de tipostring, define el texto que se puede editar.VerticalTextAlignment, del tipoTextAlignment, representa la alineación vertical del texto.
Estas propiedades están respaldadas por objetos BindableProperty, lo que significa que pueden ser destinos de los enlaces de datos, y que se les puede aplicar un estilo.
EntryCell también define un evento Completed que se genera cuando el usuario alcanza la clave de retorno para indicar que se ha completado la edición.
En el ejemplo siguiente se muestra cómo usar una EntryCell para definir la apariencia de los elementos de una TableView:
<TableView Intent="Settings">
<TableRoot>
<TableSection>
<EntryCell Label="Login"
Placeholder="username" />
<EntryCell Label="Password"
Placeholder="password" />
</TableSection>
</TableRoot>
</TableView>
En la captura de pantalla siguiente se muestra la apariencia resultante de la celda:
Celda de vista
ViewCell es una celda personalizada cuya apariencia se define mediante View. ViewCell define una propiedad View, de tipo View, que define la vista que representa el contenido de la celda. Esta propiedad está respaldada por un objeto BindableProperty, lo que significa que puede ser destino de los enlaces de datos, y recibir formato de estilo.
Nota:
La propiedad View es la propiedad de contenido de la clase ViewCell y, por tanto, no es necesario establecerla explícitamente desde XAML.
En el ejemplo siguiente muestra cómo usar ViewCell para definir la apariencia de un elemento en TableView:
<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>
Dentro de ViewCell, el diseño se puede administrar mediante cualquier diseño de .NET MAUI. En la captura de pantalla siguiente se muestra la apariencia resultante de la celda:
Tamaño de los elementos
De forma predeterminada, todas las celdas del mismo tipo en TableView tienen el mismo alto. Pero, este comportamiento se puede cambiar con las propiedades HasUnevenRows y RowHeight. De manera predeterminada, la propiedad HasUnevenRows es false.
La propiedad RowHeight se puede establecer en un int que representa el alto de cada elemento de TableView siempre que HasUnevenRows sea false. Cuando HasUnevenRows se establece en true, cada elemento de TableView puede tener un alto diferente. El alto de cada elemento se derivará del contenido de cada celda, por lo que cada elemento se ajustará a su contenido.
Las celdas individuales se pueden cambiar de tamaño mediante programación en tiempo de ejecución cambiando las propiedades relacionadas con el diseño de los elementos de la celda, siempre y cuando la propiedad HasUnevenRows sea true. En el ejemplo siguiente se cambia el alto de la celda cuando se pulsa:
void OnViewCellTapped(object sender, EventArgs e)
{
label.IsVisible = !label.IsVisible;
viewCell.ForceUpdateSize();
}
En este ejemplo, el controlador de eventos OnViewCellTapped se ejecuta en respuesta a la celda que se está pulsando. El controlador de eventos actualiza la visibilidad del objeto Label y el método Cell.ForceUpdateSize actualiza el tamaño de la celda. Si Label se ha hecho visible el alto de la celda aumentará. Si Label se ha hecho invisible la altura de la celda disminuirá.
Advertencia
El uso excesivo del ajuste de tamaño de elementos dinámicos puede provocar una degradación del rendimiento de TableView.
Diseño de derecha a izquierda
TableView puede diseñar su contenido en una dirección de flujo de derecha a izquierda estableciendo su propiedad RightToLeft en FlowDirection. Sin embargo, la propiedad FlowDirection debe establecerse idealmente en una página o diseño raíz, lo que hace que todos los elementos de la página o diseño raíz respondan a la dirección del flujo:
<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>
El valor predeterminado FlowDirection de un elemento con un elemento primario es MatchParent. Por lo tanto, TableView hereda el valor de la propiedad FlowDirection de ContentPage.
Comentarios
Próximamente: A lo largo de 2024 iremos eliminando gradualmente GitHub Issues como mecanismo de comentarios sobre el contenido y lo sustituiremos por un nuevo sistema de comentarios. Para más información, vea: https://aka.ms/ContentUserFeedback.
Enviar y ver comentarios de