Cambios de comportamiento del diseño de Xamarin.Forms

Es posible que al ejecutar la aplicación de .NET Multi-platform App UI (.NET MAUI) actualizada, notes que el comportamiento del diseño es diferente. Parte de esto es el resultado de los cambios en los valores de espaciado del diseño. Para ver más información, consulta Cambios de valor predeterminado de Xamarin.Forms.

En la tabla siguiente se muestran cambios de comportamiento adicionales entre los diseños de Xamarin.Forms y .NET MAUI:

Los controles de .NET MAUI suelen respetar las solicitudes de tamaño explícitas. Si pides que un control tenga un ancho de 200 unidades independientes del dispositivo, .NET MAUI hará que ese control tenga 200 unidades de ancho, incluso si el contenedor del control solo tiene 100 unidades de ancho.

Cambios del valor de diseño predeterminado de Xamarin.Forms

Xamarin.Forms usa valores predeterminados arbitrarios para algunos valores de propiedad, como relleno, márgenes y espaciado. .NET MAUI cambia estos valores arbitrarios de propiedad a cero.

Para conservar los valores predeterminados de Xamarin.Forms en proyectos que no establezcan valores explícitos, agrega estilos implícitos al proyecto. Para ver más información sobre los estilos implícitos, consulta Estilos implícitos.

En la tabla siguiente se enumeran los valores de propiedad de diseño que han cambiado entre Xamarin.Forms y .NET MAUI:

Los estilos siguientes conservan los valores predeterminados de Xamarin.Forms:

<!-- Forms defaults -->
<Style TargetType="Grid">
    <Setter Property="ColumnSpacing" Value="6"/>
    <Setter Property="RowSpacing" Value="6"/>
</Style>
<Style TargetType="StackLayout">
    <Setter Property="Spacing" Value="6"/>
</Style>
<Style TargetType="Frame">
    <Setter Property="Padding" Value="{OnPlatform 20,iOS=19}"/>
</Style>

Marco

Frame se ha reemplazado en .NET MAUI por Border. Sin embargo, se incluye para facilitar la migración desde Xamarin.Forms. El diseño .NET MAUI mide correctamente Frame Padding en todas las plataformas, mientras que Xamarin.Forms tenía algunas discrepancias entre plataformas. Esto puede dar lugar a que las aplicaciones no se parezcan a .NET MAUI. El ejemplo anterior tiene en cuenta esto si usa valores predeterminados.

Grid

El mayor cambio en el comportamiento de Grid entre Xamarin.Forms y .NET MAUI es que las cuadrículas no agregan automáticamente filas y columnas que faltan. Por ejemplo, en Xamarin.Forms, podrías agregar controles a un Grid sin especificar su comportamiento de fila:

<Grid>
    <Label Text="Hello"/>
    <Label Grid.Row="1" Text="World"/>
</Grid>

En Xamarin.Forms, a pesar de no declarar que Grid contiene dos filas, se agregaría automáticamente una segunda fila. .NET MAUI no hace esto. En su lugar, debes especificar explícitamente cuántas filas hay en la Grid con la propiedad RowDefinitions.

En Xamarin.Forms, cuando un Label está en una columna en la que el ancho de su ColumnDefinition se establece en Auto, se producen saltos de línea como el truncamiento de palabras y el truncamiento de cola implícitamente. En .NET MAUI, en este escenario los saltos de línea no se producen implícitamente porque la columna se expande más allá del ancho de la pantalla para acomodar el contenido del elemento secundario. Si desea que el Label se ajuste en el borde del Grid debe establecer el ColumnDefinition adecuado en * o en un valor.

StackLayout

Hay varias diferencias entre los diseños de pila en .NET MAUI (StackLayout, VerticalStackLayout y HorizontalStackLayout) y StackLayout en Xamarin.Forms.

La principal diferencia es que los diseños de pila de .NET MAUI son muy sencillos. Apilan sus vistas secundarias en una sola dirección hasta que se apilan todas ellas. Seguirán pasando hasta que se apila el último elemento secundario, incluso si eso los lleva más allá del espacio disponible en la dirección de apilamiento. Por lo tanto, los diseños de pila de .NET MAUI organizan controles en una dirección determinada. No subdividen un espacio. Esto es completamente diferente a Xamarin.Forms StackLayout, que cambia su comportamiento de diseño en función de las circunstancias y la presencia de cualquier opción de diseño *AndExpand, como FillAndExpand o CenterAndExpand. A veces, Xamarin.Forms StackLayout subdivide el espacio, con expansión o parada en el borde de su contenedor. En otros casos, se expande más allá de su contenedor.

Los nuevos diseños de pila en .NET MAUI, HorizontalStackLayout y VerticalStackLayout, no reconocen las opciones de diseño *AndExpand. Si encuentran a un elemento secundario con estas opciones de diseño, simplemente lo tratan como si el AndExpand no estuviera allí. Por ejemplo, FillAndExpand se convierte en Fill. Pero, para simplificar la migración desde Xamarin.Forms, StackLayout de .NET MAUI respeta las opciones de diseño *AndExpand, aunque se han marcado como obsoletas. Para evitar advertencias sobre el uso de miembros obsoletos, debes convertir los diseños que usan opciones de diseño *AndExpand al tipo de diseño adecuado. Se puede lograr de la siguiente manera:

1. Si el diseño es distinto de StackLayout, quita todos los usos de AndExpand. Al igual que en Xamarin.Forms, en .NET MAUI las opciones de diseño AndExpand no tienen ningún efecto en ningún diseño distinto de StackLayout.

2. Quita las propiedades AndExpand que sean ortogonales a la dirección de apilamiento. Por ejemplo, si tienes un StackLayout con un Orientation de Vertical y tiene un elemento secundario con un HorizontalAligment="CenterAndExpand"; esas opciones de diseño no tienen ningún efecto y se pueden quitar.

3. Si tienes alguna propiedad AndExpand restante en StackLayout, debes convertir StackLayout en Grid. Grid está diseñado para subdividir un espacio y proporcionará el diseño que AndExpand proporcionó en Xamarin.Forms. En el ejemplo siguiente se muestra un Xamarin.Forms StackLayout que usa una propiedad AndExpand:

   <StackLayout>
       <Label Text="Hello world!"/>
       <Image VerticalOptions="FillAndExpand" Source="dotnetbot.png"/>
   </StackLayout>
   

   Esto se puede convertir en un Grid en .NET MAUI:

   <Grid RowDefinitions="Auto, *">
       <Label Text="Hello world!"/>
       <Image Grid.Row="1" Source="dotnetbot.png"/>
   </Grid>
   

   Al realizar esta conversión, todo lo que se marcó AndExpand en StackLayout debe ir en su propia fila o columna con un tamaño de * en Grid.

RelativeLayout

El uso de RelativeLayout no se recomienda en .NET MAUI. En su lugar, usa Grid siempre que sea posible.

Si requieres necesariamente un RelativeLayout, se puede encontrar en el espacio de nombres Microsoft.Maui.Controls.Compatibility:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:compat="clr-namespace:Microsoft.Maui.Controls.Compatibility;assembly=Microsoft.Maui.Controls"
             x:Class="MyMauiApp.MyPage"
             Title="MyPage">
    <compat:RelativeLayout>
        <!-- Your code goes here -->
    </compat:RelativeLayout>
</ContentPage>

ScrollView

Aunque ScrollView no suele considerarse un diseño, se puede contemplar como un diseño, ya que se usa para desplazar su contenido secundario. En Xamarin.Forms, ScrollView no se comporta de forma coherente al apilar. Tiene algunos límites arbitrarios en el tamaño mínimo que dependen parcialmente de su contenido, y a veces se comprimirá para permitir que otros elementos se ajusten a la página dentro de StackLayout de maneras que sean incoherentes y a veces sorprendentes.

En .NET MAUI, ScrollView se expande hasta el tamaño que quiera tener a menos que se restrinja de otra manera. Esto significa que dentro de un VerticalStackLayout, que puede expandirse infinitamente, un ScrollView se expandirá a su alto de contenido completo y no se desplaza. Este comportamiento puede resultar confuso si eres usuario de Xamarin.Forms.