Diseños

Las clases de diseño de interfaz de usuario de aplicaciones multiplataforma (.NET MAUI) de .NET permiten organizar y agrupar controles de interfaz de usuario en la aplicación. La elección de una clase de diseño requiere conocimientos sobre cómo coloca el diseño sus elementos secundarios y cómo el diseño ajusta el tamaño de sus elementos secundarios. Además, puede ser necesario anidar diseños para crear el diseño deseado.

StackLayout

Un StackLayout organiza los elementos de una pila unidimensional, ya sea horizontal o verticalmente. La Orientation propiedad especifica la dirección de los elementos y la orientación predeterminada es Vertical. StackLayout normalmente se usa para organizar una subsección de la interfaz de usuario en una página.

En el código XAML siguiente se muestra cómo crear un objeto vertical StackLayout que contenga tres Label objetos:

<StackLayout Margin="20,35,20,25">
    <Label Text="The StackLayout has its Margin property set, to control the rendering position of the StackLayout." />
    <Label Text="The Padding property can be set to specify the distance between the StackLayout and its children." />
    <Label Text="The Spacing property can be set to specify the distance between views in the StackLayout." />
</StackLayout>

En , StackLayoutsi el tamaño de un elemento no se establece explícitamente, se expande para rellenar el ancho disponible o el alto si la Orientation propiedad está establecida Horizontalen .

A StackLayout menudo se usa como diseño primario, que contiene otros diseños secundarios. Sin embargo, StackLayout no se debe usar para reproducir un Grid diseño mediante una combinación de StackLayout objetos . En el código siguiente se muestra un ejemplo de esta práctica incorrecta:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Details.HomePage"
             Padding="0,20,0,0">
    <StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Name:" />
            <Entry Placeholder="Enter your name" />
        </StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Age:" />
            <Entry Placeholder="Enter your age" />
        </StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Occupation:" />
            <Entry Placeholder="Enter your occupation" />
        </StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Address:" />
            <Entry Placeholder="Enter your address" />
        </StackLayout>
    </StackLayout>
</ContentPage>

Es una pérdida de tiempo porque se realizan cálculos de diseño innecesarios. En su lugar, el diseño deseado se puede lograr mejor mediante un Grid.

Para obtener más información, consulte StackLayout.

HorizontalStackLayout

Organiza HorizontalStackLayout las vistas secundarias en una pila horizontal unidimensional y es una alternativa más eficaz a .StackLayout HorizontalStackLayout normalmente se usa para organizar una subsección de la interfaz de usuario en una página.

En el código XAML siguiente se muestra cómo crear un objeto HorizontalStackLayout que contenga vistas secundarias diferentes:

<HorizontalStackLayout Margin="20">
   <Rectangle Fill="Red"
              HeightRequest="30"
              WidthRequest="30" />
   <Label Text="Red"
          FontSize="18" />
</HorizontalStackLayout>

En , HorizontalStackLayoutsi el tamaño de un elemento no se establece explícitamente, se expande para rellenar el alto disponible.

Para obtener más información, vea HorizontalStackLayout.

VerticalStackLayout

Organiza VerticalStackLayout las vistas secundarias en una pila vertical unidimensional y es una alternativa más eficaz a .StackLayout VerticalStackLayout normalmente se usa para organizar una subsección de la interfaz de usuario en una página.

En el código XAML siguiente se muestra cómo crear un objeto VerticalStackLayout que contiene tres Label objetos:

<VerticalStackLayout Margin="20,35,20,25">
    <Label Text="The VericalStackLayout has its Margin property set, to control the rendering position of the VerticalStackLayout." />
    <Label Text="The Padding property can be set to specify the distance between the VerticalStackLayout and its children." />
    <Label Text="The Spacing property can be set to specify the distance between views in the VerticalStackLayout." />
</VerticalStackLayout>

En , VerticalStackLayoutsi el tamaño de un elemento no se establece explícitamente, se expande para rellenar el ancho disponible.

Para obtener más información, vea VerticalStackLayout.

Cuadrícula

Grid Se usa para mostrar elementos en filas y columnas, que pueden tener tamaños proporcionales o absolutos. Las filas y columnas de una cuadrícula se especifican con las RowDefinitions propiedades y ColumnDefinitions .

Para colocar elementos en celdas específicas Grid , use las Grid.Column propiedades adjuntas y Grid.Row . Para que los elementos abarquen varias filas y columnas, use las Grid.RowSpan propiedades adjuntas y Grid.ColumnSpan .

Nota:

Un Grid diseño no debe confundirse con las tablas y no está pensado para presentar datos tabulares.

En el código XAML siguiente se muestra cómo crear un objeto Grid con dos filas y dos columnas:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="50" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>    
    <Label Text="Column 0, Row 0"
           WidthRequest="200" />
    <Label Grid.Column="1"
           Text="Column 1, Row 0" />
    <Label Grid.Row="1"
           Text="Column 0, Row 1" />
    <Label Grid.Column="1"
           Grid.Row="1"
           Text="Column 1, Row 1" />
</Grid>

En este ejemplo, el ajuste de tamaño funciona de la siguiente manera:

• Cada fila tiene un alto explícito de 50 unidades independientes del dispositivo.
• El ancho de la primera columna se establece Autoen y, por tanto, es tan ancho como sea necesario para sus elementos secundarios. En este caso, es de 200 unidades independientes del dispositivo para acomodar el ancho del primer Label.

El espacio se puede distribuir dentro de una columna o fila mediante el ajuste de tamaño automático, lo que permite que las columnas y el tamaño de las filas se ajusten a su contenido. Esto se logra estableciendo el alto de , RowDefinitiono el ancho de un ColumnDefinition, en Auto. El ajuste de tamaño proporcional también se puede usar para distribuir el espacio disponible entre las filas y columnas de la cuadrícula por proporciones ponderadas. Esto se logra estableciendo el alto de , RowDefinitiono el ancho de un ColumnDefinition, en un valor que usa el * operador .

Precaución

Intente asegurarse de que el tamaño de las pocas filas y columnas posibles.Auto Cada fila o columna de tamaño automático hará que el motor de diseño tenga que realizar cálculos de diseño adicionales. En su lugar, use filas y columnas de tamaño fijo si es posible. Como alternativa, establezca filas y columnas para ocupar una cantidad proporcional de espacio con el GridUnitType.Star valor de enumeración.

Para obtener más información, vea Grid.

FlexLayout

Es FlexLayout similar a en StackLayout que muestra elementos secundarios horizontal o verticalmente en una pila. Sin embargo, un FlexLayout también puede encapsular sus elementos secundarios si hay demasiados para caber en una sola fila o columna, y también permite un control más granular del tamaño, la orientación y la alineación de sus elementos secundarios.

En el código XAML siguiente se muestra cómo crear un FlexLayout objeto que muestra sus vistas en una sola columna:

<FlexLayout Direction="Column"
            AlignItems="Center"
            JustifyContent="SpaceEvenly">
    <Label Text="FlexLayout in Action" />
    <Button Text="Button" />
    <Label Text="Another Label" />
</FlexLayout>

En este ejemplo, el diseño funciona de la siguiente manera:

• La Direction propiedad se establece Columnen , lo que hace que los elementos secundarios del FlexLayout objeto se organicen en una sola columna de elementos.
• La AlignItems propiedad se establece Centeren , lo que hace que cada elemento se centre horizontalmente.
• La JustifyContent propiedad se establece SpaceEvenlyen , que asigna todo el espacio vertical restante de forma equitativa entre todos los elementos, y por encima del primer elemento, y por debajo del último elemento.

Para obtener más información, consulte FlexLayout.

AbsoluteLayout

AbsoluteLayout se usa para colocar y ajustar el tamaño de los elementos mediante valores explícitos o valores relativos al tamaño del diseño. La posición se especifica mediante la esquina superior izquierda del elemento secundario en relación con la esquina superior izquierda de .AbsoluteLayout

Debe AbsoluteLayout considerarse como un diseño de propósito especial que se usará solo cuando se puede imponer un tamaño a los elementos secundarios, o cuando el tamaño del elemento no afecta a la posición de otros elementos secundarios. Un uso estándar de este diseño es crear una superposición, que cubre la página con otros controles, quizás para proteger al usuario de interactuar con los controles normales de la página.

Importante

Las propiedades HorizontalOptions y VerticalOptions no tienen ningún efecto en los elementos secundarios de un AbsoluteLayout.

Dentro de , AbsoluteLayoutla AbsoluteLayout.LayoutBounds propiedad adjunta se usa para especificar la posición horizontal, la posición vertical, el ancho y el alto de un elemento. Además, la AbsoluteLayout.LayoutFlags propiedad adjunta especifica cómo se interpretarán los límites de diseño.

En el código XAML siguiente se muestra cómo organizar elementos en un AbsoluteLayoutobjeto :

<AbsoluteLayout Margin="40">
    <BoxView Color="Red"
             AbsoluteLayout.LayoutFlags="PositionProportional"
             AbsoluteLayout.LayoutBounds="0.5, 0, 100, 100"
             Rotation="30" />
    <BoxView Color="Green"
             AbsoluteLayout.LayoutFlags="PositionProportional"
             AbsoluteLayout.LayoutBounds="0.5, 0, 100, 100"
             Rotation="60" />
    <BoxView Color="Blue"
             AbsoluteLayout.LayoutFlags="PositionProportional"
             AbsoluteLayout.LayoutBounds="0.5, 0, 100, 100" />
</AbsoluteLayout>

En este ejemplo, el diseño funciona de la siguiente manera:

• A cada BoxView uno se le asigna un tamaño explícito de 100 x 100 y se muestra en la misma posición, centrada horizontalmente.
• El rojo BoxView gira 30 grados y el verde BoxView gira 60 grados.
• En cada BoxView, la AbsoluteLayout.LayoutFlags propiedad adjunta se establece PositionProportionalen , lo que indica que la posición es proporcional al espacio restante después de que se tenga en cuenta el ancho y el alto.

Precaución

Evite usar la AbsoluteLayout.AutoSize propiedad siempre que sea posible, ya que hará que el motor de diseño realice cálculos de diseño adicionales.

Para obtener más información, vea AbsoluteLayout.

BindableLayout

Un BindableLayout habilita cualquier clase de diseño que derive de la Layout clase para generar su contenido enlazando a una colección de elementos, con la opción de establecer la apariencia de cada elemento con un DataTemplate.

Un diseño enlazable se rellena con datos estableciendo su ItemsSource propiedad en cualquier colección que implemente IEnumerabley adjunte a una Layoutclase derivada de . La apariencia de cada elemento del diseño enlazable se puede definir estableciendo la BindableLayout.ItemTemplate propiedad adjunta en .DataTemplate

En el código XAML siguiente se muestra cómo enlazar a StackLayout una colección de elementos y definir su apariencia con :DataTemplate

<StackLayout BindableLayout.ItemsSource="{Binding User.TopFollowers}"
             Orientation="Horizontal">
    <BindableLayout.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding}"
                   Aspect="AspectFill"
                   WidthRequest="44"
                   HeightRequest="44" />
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</StackLayout>

Los diseños enlazables solo se deben usar cuando la colección de elementos que se va a mostrar es pequeña y no es necesario desplazarse y seleccionar.

Para obtener más información, vea BindableLayout.

Transparencia de entrada

Cada elemento visual tiene una InputTransparent propiedad enlazable que se usa para definir si el elemento puede recibir entradas. Su valor predeterminado es false, asegurándose de que el elemento puede recibir la entrada. Cuando esta propiedad está true en un elemento, el elemento no recibirá ninguna entrada. En su lugar, la entrada se pasará a cualquier elemento que esté visualmente detrás del elemento.

La Layout clase, de la que derivan todos los diseños, tiene una CascadeInputTransparent propiedad enlazable que controla si los elementos secundarios heredan la transparencia de entrada del diseño. Su valor predeterminado es true, lo que garantiza que establecer la InputTransparent propiedad true en en una clase de diseño dará lugar a que todos los elementos del diseño no reciban ninguna entrada.