MercatorPenguin 3.0 est conçu sur la plateforme de développement MAUI contrairement aux versions précédentes qui étaient construites sur base de Xamarin Forms. Le principe général concernant le code XAML est la continuité : le code XAML des versions antérieures reste utilisable dans la version 3.0. Dans certains cas, des adaptations mineures devront être apportées. Il est toutefois utile de prendre note des recommandations effectuées ci-dessous afin d'adhérer à un certain nombre de nouveaux standards concernant le code XAML.
La préoccupation majeure concerne le StackLayout qui n'est plus le conteneur principalement utilisé en MAUI. Pour des raisons de performance, il est conseillé de remplacer tout StackLayout par un VerticalStackLayout ou HorizontalStackLayout. Le StackLayout contient une propriété Orientation (qui devra être retirée) qui permet un changement dynamique de l'orientation du layout. Cette fonctionnalité est coûteuse en ce qui concerne les performances mais est rarement utilisée.
Le StackLayout n'est plus "borné" aux limites de l'écran du device. Un StackLayout peut donc à présent avoir une hauteur/largeur qui dépasse les dimensions de l'écran. De plus, toutes les directives ...AndExpand sont dépréciées et ignorées. Elles ne provoquent toutefois pas d'erreur. En dehors d'un StackLayout, FillAndExpand devient, par exemple, un simple Fill.
Dans bien des cas, il est avantageux de remplacer le StackLayout par une Grid.
Par exemple, ce code XAML
<StackLayout Margin="10,10,10,10">
<StackLayout Orientation="Horizontal">
<m:SearchEntry Placeholder="Clé rech. articles" BackgroundColor="White" TextColor="Black" SqlParam="@key" HorizontalOptions="FillAndExpand" SearchWhenCompleted="True" />
<m:SearchScanButton SqlParamKey="@key" />
</StackLayout>
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Label Text="Avec articles en sommeil" Margin="0,0,10,0" FontSize="12" VerticalOptions="Center" />
<m:SearchSwitch SqlParam="@sommeil" BackgroundColor="%ThemeColor%" Margin="0,0,20,0" VerticalOptions="Center" />
<m:SearchButton Text="OK" WidthRequest="100" VerticalOptions="Center" />
</StackLayout>
<m:SearchScannerConnector Font="Micro" Margin="0,10,0,10" HorizontalOptions="FillAndExpand" SourceDefaultEntry="@key" AllowOverWrite="True" />
</StackLayout>
peut être modifié comme suit :
<Grid Margin="10,10,10,10" RowDefinitions="Auto,Auto,Auto">
<Grid ColumnDefinitions="*,Auto" Grid.Row="0">
<m:SearchEntry Placeholder="Clé rech. articles" BackgroundColor="White" TextColor="Black" SqlParam="@key" SearchWhenCompleted="True" Grid.Column="0" />
<m:SearchScanButton SqlParamKey="@key" Grid.Column="1" />
</Grid>
<HorizontalStackLayout Grid.Row="1">
<Label Text="Avec articles en sommeil" Margin="0,0,10,0" FontSize="12" VerticalOptions="Center" />
<m:SearchSwitch SqlParam="@sommeil" BackgroundColor="%ThemeColor%" Margin="0,0,20,0" VerticalOptions="Center" />
<m:SearchButton Text="OK" WidthRequest="100" VerticalOptions="Center" />
</HorizontalStackLayout>
<m:SearchScannerConnector FontSize="10" Margin="0,10,0,10" SourceDefaultEntry="@key" AllowOverWrite="True" Grid.Row="2" />
</Grid>
Dans la modification ci-dessus, nous observons :
- le premier StackLayout est remplacé par une Grid contenant 3 rangées. Ceci est visible dans sa propriété RowDefinitions.
- les éléments enfants de cette grille sont associés à une de ses rangées :
- la seconde Grid à la première rangée : Grid.Row="0"
- l'HorizontalStackLayout à la seconde : Grid.Row="1"
- le SearchScannerConnector à la troisième : Grid.Row="2"
- Le StackLayout est remplacé par un HorizontalStackLayout car cette orientation ne changera pas et l'affichage de ces 3 (petits) éléments ne dépassera jamais la largeur de l'écran.
- Tous les attributs FillAndExpand ont été retirés.
Une grille peut être organisée en colonnes via ColumnDefinitions (qui fonctionne comme RowDefinitions). Les deux attributs peuvent être utilisés simultanément. Les valeurs possibles, séparées par une virgule, sont :
- un nombre, représentant la largeur en pixels,
- Auto : pour un calcul automatique de la largeur/hauteur en fonction du contenu de la cellule,
- * : pour spécifier que tout l'espace libre qui n'est pas utilisé par d'autres rangées / colonnes peut être alloué à la cellule.
Autre exemple de modification :
<StackLayout Orientation="Horizontal" Margin="10, 10, 10, 10">
<m:SearchEntry Placeholder="Nom" BackgroundColor="White" TextColor="Black" SqlParam="@c_nom" HorizontalOptions="FillAndExpand" />
<m:SearchEntry Placeholder="Code postal" WidthRequest="120" BackgroundColor="White" TextColor="Black" SqlParam="@c_codep" HorizontalOptions="End" />
</StackLayout>
<m:SearchButton Text="Chercher Client" HorizontalOptions="Center" />
peut être modifié comme suit :
<Grid ColumnDefinitions="*,120" Margin="10, 10, 10, 10">
<m:SearchEntry Placeholder="Nom" BackgroundColor="White" TextColor="Black" SqlParam="@c_nom" Grid.Column="0" />
<m:SearchEntry Placeholder="Code postal" BackgroundColor="White" TextColor="Black" SqlParam="@c_codep" Grid.Column="1" />
</Grid>
<m:SearchButton Text="Chercher Client" HorizontalOptions="Center" />
Dans la modification ci-dessus, nous observons :
- Le StackLayout horizontal est remplacé par une grille avec 2 colonnes.
- Les deux enfants sont associés à chacune de ces colonnes.
- La seconde colonne à une largeur fixe. Ce qui permet de retirer l'attribut WidthRequest du second SearchEntry.
- Il n'est plus nécessaire d'utiliser l'attribut HorizontalOptions puisque le positionnement est géré par la grille.
Les tailles de police de caractères nommées sont aussi dépréciées. Il est dès lors recommandé de remplacer, par exemple Font="Micro" par FontSize="10".
La correspondance des tailles nommées est la suivante :
- micro = 10
- small = 12
- medium = 14
- large = 18.
En MAUI 10.0, le composant Frame sera déprécié. Il faut le remplacer par Border.
<Frame BackgroundColor="White" BorderColor="Red" CornerRadius="40">
...
</Frame>
peut être modifié comme suit :
<Border BackgroundColor="White" Stroke="Red" StrokeShape="RoundRectangle 40,40,40,40" >
...
</Border>
Automatisation de certaines modifications du code XAML par MercatorPenguin
MercatorPenguin est doté d'un algorithme qui analyse le code XAML provenant du paramétrage effectué dans Mercator et qui effectue automatiquement ces transformations :
- L'attribut Font suivi d'une taille nommée est remplacé par l'attribut FontSize.
- Sous Android, ces tailles nommées sont remplacées pour préserver la ressemblance d'affichage :
- Large > Medium
- Medium > Small
- Small > 12
- Micro > 10
- Tous les StackLayouts, HorizontalStackLayouts et VerticalStackLayouts qui n'ont pas l'attribut Spacing défini reçoivent pour ce dernier la valeur 6 (ancienne valeur par défaut).
- Toutes les grilles contenant des colonnes et qui n'ont pas l'attribut ColumSpacing défini reçoivent pour ce dernier la valeur 6 (ancienne valeur par défaut).
- Toutes les grilles contenant des rangées et qui n'ont pas l'attribut RowSpacing défini reçoivent pour ce dernier la valeur 6 (ancienne valeur par défaut).
- Si l'attribut ColumnDefinitions n'est présent dans une grille mais qu'elle contient des colonnes, MercatorPenguin ajoute le nombre nécessaire de colonnes Auto (ce qui se faisant automatiquement en Xamarin Forms).
- Si l'attribut RowDefinitions n'est pas présent dans une grille mais qu'elle contient des rangées, MercatorPenguin ajoute le nombre nécessaire de rangées Auto (ce qui se fait automatiquement en Xamarin Forms).
- Dans une grille, MercatorPenguin vérifie qu'aucun élément dans une colonne n'a une WidthRequest supérieure à la largeur de la colonne.
- Dans une grille, MercatorPenguin vérfie qu'aucun élément dans une rangée n'a une HeightRequest supérieure à la hauteur de la rangée.
- Un StackLayout sans orientation ou avec orientation verticale, ne contenant aucun enfant avec un attribut ...AndExpand est remplacé par un VerticalStackLayout.
- Un StackLayout avec orientation horizontale, ne contenant aucun enfant avec un attribut ...AndExpand est remplacé par un HorizontalStackLayout.
- Frame est remplacé par Border. Sa propriété BorderColor devient Stroke.