Layouts: MAUI utiliza diferentes tipos de diseños para organizar los elementos de la interfaz de usuario (UI). Algunos de los diseños comunes incluyen:
StackLayout: organiza los elementos en una pila vertical o horizontal.
GridLayout: organiza los elementos en una cuadrícula.
FlexLayout: organiza los elementos utilizando flexbox.
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="YourNamespace.MainPage">
<GridLayout>
<GridColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="3*" />
</GridColumnDefinitions>
<GridRowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</GridRowDefinitions>
<Label Text="Grid Layout Example"
Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="3"
HorizontalOptions="Center" />
<Label Text="Column 1"
Grid.Row="1"
Grid.Column="0" />
<Label Text="Column 2"
Grid.Row="1"
Grid.Column="1" />
<Label Text="Column 3"
Grid.Row="1"
Grid.Column="2" />
<Label Text="Row 2"
Grid.Row="2"
Grid.Column="0"
Grid.ColumnSpan="3" />
</GridLayout>
</ContentPage>
En este ejemplo, GridLayout tiene tres columnas y dos filas. La primera fila contiene una etiqueta que se extiende por las tres columnas. La segunda fila contiene tres etiquetas, una para cada columna. Finalmente, hay una etiqueta más que ocupa toda la tercera fila.
Controles de entrada de usuario: Los controles de entrada permiten al usuario interactuar con la aplicación. Algunos de los controles comunes incluyen:
Entry: para ingresar texto.
Switch: para alternar entre dos opciones.
Slider: para seleccionar un valor dentro de un rango.
<?xml version="1.0" encoding="UTF-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MyApp.MyPage"
Title="My Page">
<StackLayout Padding="20">
<Entry Placeholder="Ingresa tu nombre" />
<Label Text="Selecciona tu edad" />
<Slider Minimum="18" Maximum="100" Value="25" />
</StackLayout>
</ContentPage>
Supongamos que queremos crear una página con tres cuadrados, donde el cuadrado del medio es el doble de ancho que los otros dos. Podríamos utilizar el siguiente código XAML:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:flex="clr-namespace:Microsoft.Maui.Controls;assembly=Microsoft.Maui.Controls.FlexLayout">
<flex:FlexLayout Direction="Row" JustifyContent="Center" AlignItems="Center">
<BoxView BackgroundColor="Red" HeightRequest="50" WidthRequest="50" />
<BoxView BackgroundColor="Blue" HeightRequest="50" WidthRequest="100" />
<BoxView BackgroundColor="Green" HeightRequest="50" WidthRequest="50" />
</flex:FlexLayout>
</ContentPage>
Aquí, hemos utilizado un FlexLayout con dirección “Row” (para que los elementos se alineen en una fila), y hemos establecido la propiedad JustifyContent en “Center” y AlignItems en “Center” para que los cuadrados se centren tanto horizontal como verticalmente.
Luego, hemos agregado tres BoxView (cada uno con un color diferente), y hemos establecido las propiedades HeightRequest y WidthRequest para cada uno. El cuadrado del medio tiene un ancho de 100, mientras que los otros dos tienen un ancho de 50.
Esto creará una página con tres cuadrados, donde el cuadrado del medio es el doble de ancho que los otros dos, y los tres cuadrados estarán centrados en la pantalla.
Controles de entrada de usuario: Los controles de entrada permiten al usuario interactuar con la aplicación. Algunos de los controles comunes incluyen:
Entrada de texto
El control de entrada de texto en MAUI es Entry. Aquí hay un ejemplo de cómo crear un Entry en XAML:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
<Entry Placeholder="Ingresa tu nombre" />
</ContentPage>
En este ejemplo, estamos creando un Entry con un marcador de posición (placeholder) que dice “Ingresa tu nombre”.
Selector de fecha
El control de selector de fecha en MAUI es DatePicker. Aquí hay un ejemplo de cómo crear un DatePicker en XAML:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
<DatePicker />
</ContentPage>
En este ejemplo, estamos creando un DatePicker básico sin ninguna propiedad adicional.
Selector de hora
El control de selector de hora en MAUI es TimePicker. Aquí hay un ejemplo de cómo crear un TimePicker en XAML:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
<TimePicker />
</ContentPage>
En este ejemplo, estamos creando un TimePicker básico sin ninguna propiedad adicional.
Controles de selección de usuario: Los controles de selección permiten al usuario elegir una o varias opciones de un conjunto de opciones. Algunos de los controles comunes incluyen:
ComboBox: permite al usuario seleccionar una opción de una lista desplegable.
ListView: permite al usuario seleccionar una o varias opciones de una lista.
RadioButton: permite al usuario seleccionar una opción de varias opciones.
Gráficos y multimedia: Las vistas de MAUI también permiten mostrar gráficos y multimedia, como imágenes y videos. Algunos de los controles comunes incluyen:
Image: muestra una imagen.
VideoView: reproduce un video.
Controles de navegación: Los controles de navegación permiten al usuario moverse entre diferentes vistas de la aplicación. Algunos de los controles comunes incluyen:
NavigationView: proporciona un área de navegación para acceder a diferentes partes de la aplicación.
TabView: permite al usuario alternar entre diferentes pestañas que contienen diferentes vistas.
Estos son solo algunos ejemplos de las vistas y controles que se pueden utilizar en MAUI. La lista completa de elementos disponibles dependerá de la plataforma de destino y la versión de MAUI que se esté utilizando.
