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

Artigo
05/14/2024

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:

Layout	Xamarin.Forms	.NET MAUI	Recomendação
Tudo	Em determinados casos, as solicitações de dimensionamento não são respeitadas.	As solicitações de dimensionamento são atendidas.
Grid	Colunas e linhas podem ser inferidas de XAML.	Colunas e linhas devem ser explicitamente declaradas.	Adicionar ColumnDefinitions e RowDefinitions.
HorizontalStackLayout		`*AndExpand` não tem efeito.
RelativeLayout		Requer o namespace de compatibilidade.	Em vez disso, use Grid ou adicione o `xmlns` para o namespace de compatibilidade.
StackLayout	Elementos filho podem preencher espaço na direção de empilhamento.	Elementos filho são empilhados e vão além do espaço disponível.	Se você precisar de exibições filho para preencher espaço, altere para um Grid.
VerticalStackLayout		`*AndExpand` não tem efeito.

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.

Observação

O modelo de projeto do .NET MAUI inclui dicionários de recursos que fornecem estilos padrão para a maioria dos controles. É recomendável que você use uma abordagem semelhante em seus aplicativos, modificando ou herdando desses dicionários de recursos.

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

Propriedade	Valor do Xamarin.Forms	Valor do MAUI do .NET
`Grid.ColumnSpacing`	6	0
`Grid.RowSpacing`	6	0
`StackLayout.Spacing`	6	0

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 FramePadding em todas as plataformas, enquanto o Xamarin.Forms tinha algumas discrepâncias entre 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.

Importante

Por padrão, o .NET MAUI cria um Grid com uma coluna e uma linha. Portanto, não é necessário definir as propriedades e RowDefinitions se ColumnDefinitions essa for sua intenção.

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:

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.
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.
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.

Importante

Um StackLayout continua em sua direção de empilhamento até ficar sem conteúdo. Ele não subdivide seu contêiner ao longo desse eixo. Se você quiser limitar seu conteúdo a um espaço restrito em uma direção, deverá usar outro layout, como um 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.

Compartilhar via