Changements du comportement de disposition par rapport à Xamarin.Forms

Article
05/14/2024

Vous pouvez remarquer lors de l’exécution de votre application .NET MAUI mise à niveau que le comportement de la disposition est différent. Voici quelques-unes des modifications apportées aux valeurs d’espacement de la disposition. Pour plus d’informations, consultez Changements des valeurs par défaut par rapport à Xamarin.Forms.

Le tableau suivant montre les modifications de comportement supplémentaires entre les dispositions dans Xamarin.Forms et dans .NET MAUI :

Disposition	Xamarin.Forms	.NET MAUI	Recommandation
Tous	Dans certains cas, les demandes de dimensionnement ne sont pas respectées.	Les demandes de dimensionnement sont respectées.
Grid	Les colonnes et les lignes peuvent être inférées du XAML.	Les colonnes et les lignes doivent être déclarées explicitement.	Ajoutez ColumnDefinitions et RowDefinitions .
HorizontalStackLayout		`*AndExpand` n’a pas d’effet.
RelativeLayout		Nécessite l’espace de noms de compatibilité.	Utilisez Grid à la place, ou ajoutez le `xmlns` comme espace de noms de compatibilité.
StackLayout	Les enfants peuvent remplir l’espace dans le sens de l’empilement.	Les enfants sont empilés et vont au-delà de l’espace disponible.	Si vous avez besoin vues enfants pour remplir de l’espace, passez à un Grid.
VerticalStackLayout		`*AndExpand` n’a pas d’effet.

Les contrôles .NET MAUI respectent généralement les demandes de dimensionnement explicites. Si vous demandez un contrôle d’une largeur de 200 unités indépendantes de l’appareil, .NET MAUI va produire ce contrôle de 200 unités de large, même si le conteneur du contrôle est seulement de 100 unités de large.

Changements des valeurs de disposition par défaut par rapport à Xamarin.Forms

Xamarin.Forms utilise des valeurs par défaut arbitraires pour certaines valeurs de propriété, comme le remplissage, les marges et l’espacement. .NET MAUI change ces valeurs de propriété arbitraires sur zéro.

Pour conserver les valeurs par défaut de Xamarin.Forms dans les projets qui ne définissent pas de valeurs explicites, ajoutez des styles implicites à votre projet. Pour plus d’informations sur les styles implicites, consultez Styles implicites.

Remarque

Le modèle de projet .NET MAUI inclut des dictionnaires de ressources qui fournissent des styles par défaut pour la plupart des contrôles. Il est recommandé d’adopter une approche similaire dans vos applications, en modifiant ou en héritant de ces dictionnaires de ressources.

Le tableau suivant liste les valeurs de propriété de disposition qui ont changé entre Xamarin.Forms et .NET MAUI :

Propriété	Valeur dans Xamarin.Forms	Valeur dans .NET MAUI
`Grid.ColumnSpacing`	6	0
`Grid.RowSpacing`	6	0
`StackLayout.Spacing`	6	0

Les styles suivants conservent les valeurs par défaut 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>

Frame

Frame a été remplacé dans .NET MAUI par Border. Cependant, il est inclus pour faciliter la migration depuis Xamarin.Forms. La disposition .NET MAUI mesure correctement FramePadding sur toutes les plateformes, tandis que Xamarin.Forms a quelques divergences entre les plateformes. Ceci peut entraîner une apparence différente de vos applications dans .NET MAUI. L’exemple ci-dessus prend cela en compte si vous utilisez des valeurs par défaut.

Grid

Le plus grand changement de comportement de Grid entre Xamarin.Forms et .NET MAUI est que les grilles n’ajoutent pas automatiquement des lignes et des colonnes manquantes pour vous. Par exemple dans Xamarin.Forms, vous pouvez ajouter des contrôles à une Grid sans spécifier leur comportement pour les lignes :

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

Dans Xamarin.Forms, même si vous ne déclarez pas que la Grid contient deux lignes, une deuxième ligne est ajoutée automatiquement pour vous. .NET MAUI ne fait pas cela. Au lieu de cela, vous devez spécifier explicitement le nombre de lignes dans la Grid avec la propriété RowDefinitions.

Important

Par défaut, .NET MAUI crée une Grid avec une colonne et une ligne. Par conséquent, il n’est pas nécessaire de définir les propriétés ColumnDefinitions et RowDefinitions si c’est votre intention.

StackLayout

Il existe plusieurs différences entre les dispositions des piles dans .NET MAUI (StackLayout, VerticalStackLayout et HorizontalStackLayout) et dans le StackLayout de Xamarin.Forms.

La principale différence est que les dispositions des piles .NET MAUI sont très simples. Elles empilent leurs vues enfants dans une même direction jusqu’à ce qu’elles aient toutes été empilées. Elle vont continuer jusqu’à ce que le dernier enfant ait été empilé, même si cela les amène au-delà de l’espace disponible dans la direction de l’empilement. Par conséquent, les dispositions de pile .NET MAUI organisent les contrôles dans une direction particulière. Ils ne subdivisent pas un espace. Ceci est complètement différent de la StackLayout de Xamarin.Forms, qui modifie son comportement de disposition en fonction des circonstances et de la présence des options de disposition *AndExpand, comme FillAndExpand ou CenterAndExpand. La StackLayout de Xamarin.Forms divise parfois l’espace, en l’étendant jusqu’au bord de son conteneur ou en s’y arrêtant. Dans d’autres cas, il s’étend au-delà de son conteneur.

Les nouvelles dispositions des piles dans .NET MAUI, HorizontalStackLayout et VerticalStackLayout, ne reconnaissent pas les options de disposition *AndExpand. Si elles rencontrent un enfant avec ces options de disposition, elles le traitent simplement comme si AndExpand n’était pas présent. Par exemple, FillAndExpand devient Fill. Cependant, pour simplifier la migration de Xamarin.Forms vers .NET MAUI, StackLayout respecte les options de disposition *AndExpand, bien qu’elles aient été marquées comme obsolètes. Pour éviter les avertissements concernant l’utilisation de membres obsolètes, vous devez convertir vos dispositions qui utilisent *AndExpand options de disposition en un type de disposition approprié. Vous pouvez le faire comme suit :

Si votre disposition est n’importe quoi d’autre qu’une StackLayout, supprimez toutes les utilisations de AndExpand. Tout comme dans Xamarin.Forms, dans .NET MAUI, les options de disposition AndExpand n’ont pas d’effet sur les dispositions autres que StackLayout.
Supprimez les propriétés AndExpand qui sont orthogonales à la direction de l’empilement. Par exemple, si vous avez une StackLayout avec une Orientation définie sur Vertical et qu’elle a un enfant avec un HorizontalAligment="CenterAndExpand", ces options de disposition n’ont pas d’effet et peuvent être supprimées.
Si vous avez des propriétés AndExpand restantes sur une StackLayout, vous devez convertir cette StackLayout en Grid. Une Grid est conçue pour subdiviser un espace et elle va fournir la disposition que AndExpand a fournie dans Xamarin.Forms. L’exemple suivant montre une StackLayout Xamarin.Forms qui utilise une propriété AndExpand :
```
<StackLayout>
    <Label Text="Hello world!"/>
    <Image VerticalOptions="FillAndExpand" Source="dotnetbot.png"/>
</StackLayout>
```
Ceci peut être converti en une Grid dans .NET MAUI :
```
<Grid RowDefinitions="Auto, *">
    <Label Text="Hello world!"/>
    <Image Grid.Row="1" Source="dotnetbot.png"/>
</Grid>
```
Quand cette conversion est effectuée, tout ce qui a été marqué AndExpand dans la StackLayout doit se trouver dans sa propre ligne ou colonne avec une taille de * dans la Grid.

Important

Une StackLayout continue dans sa direction d’empilement jusqu’à ce qu’elle ait épuisé le contenu. Elle ne subdivise pas son conteneur le long de cet axe. Si vous voulez limiter votre contenu à un espace limité dans une direction, vous devez utiliser une autre disposition, comme une Grid.

RelativeLayout

L’utilisation de RelativeLayout n’est pas recommandée dans .NET MAUI. Utilisez à la place une Grid quand c’est possible.

Si vous avez absolument besoin d’une RelativeLayout, vous pouvez la trouver dans l’espace de noms 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

Bien que ScrollView ne soit souvent pas considéré comme une disposition, elle peut être assimilée à une disposition, car elle est utilisée pour faire défiler son contenu enfant. Dans Xamarin.Forms, ScrollView ne se comporte pas de façon cohérente lors d’un empilement. Il a des limites arbitraires sur la taille minimale qui dépendent partiellement de son contenu, et elle va parfois être compressée pour permettre à d’autres éléments de tenir dans la page à l’intérieur d’une StackLayout d’une façon incohérente et parfois surprenante.

Dans .NET MAUI, la ScrollView s’étend jusqu’à la taille nécessaire, sauf si une contrainte a été définie. Cela signifie qu’à l’intérieur d’une VerticalStackLayout, qui peut s’étendre de façon infinie, une ScrollView s’étend jusqu’à la hauteur totale de son contenu et ne permet pas le défilement. Ce comportement peut être déroutant si vous êtes un utilisateur de Xamarin.Forms.

Share via