Alterações de comportamento de layout do Xamarin.Forms

Você pode observar ao executar o aplicativo .NET Multi-platform App UI (.NET MAUI) atualizado que o comportamento de layout é diferente. Parte disso é o resultado de alterações nos valores de espaçamento de layout. Para obter mais informações, consulte Alterações de valor padrão do Xamarin.Forms.

A tabela a seguir mostra alterações de comportamento adicionais entre layouts no Xamarin.Forms e no .NET MAUI:

Os controles MAUI do .NET geralmente honram solicitações de tamanho explícito. Se você solicitar que um controle tenha 200 unidades independentes de dispositivo, o MAUI do .NET fará com que esse controle tenha 200 unidades de largura, mesmo que o contêiner do controle tenha apenas 100 unidades de largura.

Alterações de valor de layout padrão do Xamarin.Forms

O Xamarin.Forms usa valores padrão arbitrários para alguns valores de propriedade, como preenchimento, margens e espaçamento. O MAUI do .NET altera esses valores arbitrários de propriedade para zero.

Para preservar os valores padrão do Xamarin.Forms em projetos que não definem valores explícitos, adicione estilos implícitos ao seu projeto. Para obter mais informações sobre estilos implícitos, consulte estilos implícitos.

A tabela a seguir lista os valores de propriedade de layout que foram alterados entre o Xamarin.Forms e o .NET MAUI:

Os seguintes estilos mantêm os padrões do 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>

Frame

Frame foi substituído no .NET MAUI por Border. No entanto, ele está incluído para facilitar a migração do Xamarin.Forms. O layout do .NET MAUI mede corretamente Frame Padding em todas as plataformas, enquanto o Xamarin.Forms apresentava algumas discrepâncias entre as plataformas. Isso pode fazer com que seus aplicativos não sejam iguais no MAUI do .NET. O exemplo acima conta para isso se você estiver usando valores padrão.

Grid

A maior alteração no Grid comportamento entre o Xamarin.Forms e o .NET MAUI é que as grades não adicionam automaticamente linhas e colunas ausentes para você. Por exemplo, no Xamarin.Forms, você pode adicionar controles a um Grid sem especificar seu comportamento de linha:

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

No Xamarin.Forms, apesar de não declarar que ela Grid contém duas linhas, uma segunda linha seria adicionada automaticamente para você. O MAUI do .NET não faz isso. Em vez disso, você precisa especificar explicitamente quantas linhas estão no Grid com a propriedade RowDefinitions.

No Xamarin.Forms, quando um Label está em uma coluna em que a largura de seu ColumnDefinition é definida como Auto, ocorrem implicitamente quebras de linha, como quebra automática de linha e truncamento de cauda. No .NET MAUI, neste cenário, as quebras de linha não ocorrem implicitamente porque a coluna se expande além da largura da tela para acomodar o conteúdo do filho. Se quiser que o Label que seja encapsulado na borda do Grid defina o ColumnDefinition apropriado como * ou outro valor.

StackLayout

Há várias diferenças entre os layouts de pilha no .NET MAUI (StackLayout, VerticalStackLayout e HorizontalStackLayout) e o StackLayout no Xamarin.Forms.

A principal diferença é que os layouts de pilha do .NET MAUI são muito simples. Eles empilham suas exibições filho em uma única direção até que todas elas tenham sido empilhadas. Eles continuarão até que o último filho tenha sido empilhado, mesmo que isso os leve além do espaço disponível na direção do empilhamento. Portanto, os layouts de pilha do .NET MAUI organizam controles em uma direção específica. Eles não subdividem um espaço. Isso é completamente diferente do Xamarin.Forms StackLayout, que altera seu comportamento de layout com base em circunstâncias e na presença de quaisquer *AndExpand opções de layout, como FillAndExpand ou CenterAndExpand. Às vezes, o Xamarin.Forms StackLayout subdivide o espaço, expandindo ou parando na borda de seu contêiner. Em outros casos, ele se expande além de seu contêiner.

Os novos layouts de pilha no .NET MAUI, HorizontalStackLayout e VerticalStackLayout, não reconhecem as opções de layout de *AndExpand. Se encontrarem um filho com essas opções de layout, eles simplesmente o tratarão como se o AndExpand não estivesse lá. Por exemplo, FillAndExpand se tornará Fill. No entanto, para simplificar a migração do Xamarin.Forms, o StackLayout do .NET MAUI respeita as opções de layout de *AndExpand, embora tenham sido marcadas como obsoletas. Para evitar avisos sobre como usar membros obsoletos, você deve converter seus layouts que usam *AndExpand opções de layout para o tipo de layout apropriado. O que pode ser alcançado da seguinte maneira:

1. Se o layout for diferente de um StackLayout, remova todos os usos de AndExpand. Assim como no Xamarin.Forms, no .NET MAUI, as opções de layout de AndExpand não têm nenhum efeito em nenhum layout que não seja StackLayout.

2. Remova as propriedades ortogonais de AndExpand para a direção de empilhamento. Por exemplo, se você tiver um StackLayout com um Orientation de Vertical, e ele tiver um filho com um HorizontalAligment="CenterAndExpand", essas opções de layout não terão efeito e poderão ser removidas.

3. Se você tiver as propriedades de AndExpand restantes em um StackLayout, deverá converter essa StackLayout em um Grid. Um Grid foi projetado para subdividir um espaço e fornecerá o layout que AndExpand fornecido no Xamarin.Forms. O exemplo a seguir mostra um StackLayout do Xamarin.Forms que usa uma propriedade AndExpand:

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

   Isso pode ser convertido em um Grid no .NET MAUI:

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

   Ao executar essa conversão, qualquer coisa marcada AndExpand no StackLayout deve ir em sua própria linha ou coluna com um tamanho de * no Grid.

RelativeLayout

O uso de RelativeLayout não é recomendado no .NET MAUI. Em vez disso, use um Grid sempre que possível.

Se você precisar absolutamente de um RelativeLayout, ele poderá ser encontrado no namespace 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

Embora ScrollView muitas vezes não seja considerado um layout, ele pode ser considerado como um layout, pois é usado para rolar seu conteúdo filho. No Xamarin.Forms, ScrollView não se comporta de forma consistente ao empilhar. Ele tem alguns limites arbitrários de tamanho mínimo que dependem parcialmente de seu conteúdo e, às vezes, compacta para permitir que outros itens se ajustem à página dentro de uma StackLayout de maneiras inconsistentes e às vezes surpreendentes.

No .NET MAUI, o ScrollView se expande para qualquer tamanho que queira ser, a menos que seja restringido de outra forma. Isso significa que, dentro de um VerticalStackLayout, que pode se expandir infinitamente, um ScrollView se expandirá para sua altura de conteúdo completa e não rolará. Esse comportamento pode ser confuso se você for um usuário do Xamarin.Forms.