MercatorPenguin 3.0 is gebouwd op het MAUI-ontwikkelplatform, in tegenstelling tot eerdere versies die gebaseerd waren op Xamarin Forms. Het algemene principe met betrekking tot XAML-code blijft behouden: XAML-code uit eerdere versies kan nog steeds worden gebruikt in versie 3.0, hoewel soms kleine aanpassingen nodig zijn. Het is echter nuttig om rekening te houden met de onderstaande aanbevelingen om te voldoen aan een aantal nieuwe standaarden voor XAML-code.
De belangrijkste verandering betreft de StackLayout, die niet langer de primaire container is in MAUI. Omwille van prestatieoverwegingen wordt aanbevolen om elke StackLayout te vervangen door een VerticalStackLayout of HorizontalStackLayout. De eigenschap Orientation van StackLayout (die moet worden verwijderd) staat een dynamische verandering van de lay-outoriëntatie toe, maar dit kost veel rekenkracht en wordt zelden gebruikt.
Daarnaast wordt de StackLayout niet langer beperkt door de schermgrootte van het apparaat. Een StackLayout kan dus nu een hoogte/breedte hebben die de afmetingen van het scherm overschrijdt. Bovendien zijn alle ...AndExpand-attributen verouderd en worden ze genegeerd, hoewel ze geen fouten veroorzaken. Buiten een StackLayout wordt bijvoorbeeld FillAndExpand een eenvoudige Fill.
In veel gevallen is het voordelig om een StackLayout te vervangen door een Grid.
Bijvoorbeeld, deze XAML-code
<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>
kan als volgt worden aangepast:
<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>
In de bovenstaande wijziging zien we het volgende:
- de eerste StackLayout is vervangen door een Grid met 3 rijen. Dit is zichtbaar in de eigenschap RowDefinitions.
- de kindelementen van deze grid zijn gekoppeld aan een van de rijen:
- de tweede Grid aan de eerste rij: Grid.Row="0"
- de HorizontalStackLayout aan de tweede rij: Grid.Row="1"
- de SearchScannerConnector aan de derde rij: Grid.Row="2"
- De StackLayout is vervangen door een HorizontalStackLayout omdat deze oriëntatie niet verandert en de weergave van deze 3 (kleine) elementen nooit de schermbreedte zal overschrijden.
- Alle FillAndExpand-attributen zijn verwijderd.
Een grid kan ook worden georganiseerd in kolommen via ColumnDefinitions (werkt zoals RowDefinitions). Beide attributen kunnen tegelijkertijd worden gebruikt. Mogelijke waarden, gescheiden door een komma, zijn:
- een getal dat de breedte in pixels vertegenwoordigt,
- Auto : voor automatische berekening van de breedte/hoogte op basis van de inhoud van de cel,
- * : om aan te geven dat al de vrije ruimte, die niet door andere rijen of kolommen wordt gebruikt, aan de cel kan worden toegewezen.
Een ander voorbeeld van aanpassing:
<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" />
kan als volgt worden aangepast:
<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" />
In de bovenstaande wijziging zien we het volgende:
- De horizontale StackLayout is vervangen door een grid met 2 kolommen.
- De twee kindelementen zijn elk gekoppeld aan een van deze kolommen.
- De tweede kolom heeft een vaste breedte, wat het mogelijk maakt om het WidthRequest-attribuut van de tweede SearchEntry te verwijderen.
- Het HorizontalOptions-attribuut is niet langer nodig, omdat de positionering wordt beheerd door de grid.
Benoemde lettergroottes zijn ook verouderd. Het wordt daarom aanbevolen om bijvoorbeeld Font="Micro" te vervangen door FontSize="10".
De overeenkomst tussen de benoemde groottes is als volgt:
- micro = 10
- small = 12
- medium = 14
- large = 18.
In MAUI 10.0 zal de Frame-component worden afgeschaft. Deze moet worden vervangen door Border.
<Frame BackgroundColor="White" BorderColor="Red" CornerRadius="40">
...
</Frame>
kan als volgt worden gewijzigd:
<Border BackgroundColor="White" Stroke="Red" StrokeShape="RoundRectangle 40,40,40,40" >
...
</Border>
Automatisering van bepaalde XAML-code aanpassingen door MercatorPenguin
MercatorPenguin bevat een algoritme dat de XAML-code analyseert die afkomstig is van de configuratie in Mercator, en automatisch deze aanpassingen doorvoert:
- Het Font-attribuut gevolgd door een benoemde grootte wordt vervangen door het FontSize-attribuut.
- Onder Android worden deze benoemde groottes vervangen om de weergaveconsistentie te behouden:
- Large > Medium
- Medium > Small
- Small > 12
- Micro > 10
- Alle StackLayouts, HorizontalStackLayouts en VerticalStackLayouts zonder gedefinieerd Spacing-attribuut krijgen de waarde 6 (de oude standaardwaarde).
- Alle grids met kolommen zonder gedefinieerde ColumSpacing krijgen de waarde 6 (de oude standaardwaarde).
- Alle grids met rijen zonder gedefinieerde RowSpacing krijgen de waarde 6 (de oude standaardwaarde).
- Als ColumnDefinitions niet aanwezig is in een grid maar deze wel kolommen bevat, voegt MercatorPenguin het vereiste aantal Auto-kolommen toe (dit gebeurde automatisch in Xamarin Forms).
- Als RowDefinitions niet aanwezig is in een grid maar deze wel rijen bevat, voegt MercatorPenguin het vereiste aantal Auto-rijen toe (dit gebeurde automatisch in Xamarin Forms).
- In een grid controleert MercatorPenguin of geen enkel element in een kolom een WidthRequest heeft die groter is dan de breedte van de kolom.
- In een grid controleert MercatorPenguin of geen enkel element in een rij een HeightRequest heeft die groter is dan de hoogte van de rij.
- Een StackLayout zonder oriëntatie of met een verticale oriëntatie, zonder kinderen met een ...AndExpand-attribuut, wordt vervangen door een VerticalStackLayout.
- Een StackLayout met een horizontale oriëntatie, zonder kinderen met een ...AndExpand-attribuut, wordt vervangen door een HorizontalStackLayout.
- Frame wordt vervangen door Border. De eigenschap BorderColor wordt Stroke.