Platformspecifieke waarden in XAML
- 5 minuten
De visuele ervaring van uw app verschilt per platform. U moet uw gebruikersinterface vaak verfijnen voor elk platform op basis van de visuele elementen die u gebruikt. Met .NET MAUI kunt u de indeling van uw app beheren op basis van deze apparaateigenschappen.
In deze les leert u meer over de functies die .NET MAUI biedt, zodat u de gebruikersinterface voor uw apps kunt aanpassen op basis van het platform waarop ze worden uitgevoerd.
De apparaatklasse gebruiken
De DeviceInfo klasse is een hulpprogrammaklasse die apparaatspecifieke informatie biedt voor het apparaat waarop uw app wordt uitgevoerd. Deze informatie wordt weergegeven via een set eigenschappen. De belangrijkste eigenschap is, die een tekenreeks retourneert die het type apparaat aangeeft dat momenteel in gebruik is DeviceInfo.Platform: Android, iOS, WinUI, of macOS.
Bekijk het volgende scenario als voorbeeld van wanneer u deze functie kunt gebruiken. Het standaardgedrag van een .NET MAUI iOS-app is dat inhoud die wordt toegevoegd aan een pagina, op de iOS-statusbalk boven aan het scherm wordt weergegeven. U wilt dit gedrag wijzigen. De eenvoudigste oplossing is om de inhoud omlaag te verplaatsen op de pagina. Met de oplossing Notities die u in de vorige oefening hebt gemaakt, wordt dit probleem opgelost door de Padding eigenschap van het VerticalStackLayout besturingselement in te stellen om de inhoud met 60 punten omlaag te verplaatsen:
<VerticalStackLayout x:Name="MyStackLayout" Padding="30,60,30,30">
...
</VerticalStackLayout>
Het probleem is dat dit probleem alleen van toepassing is op iOS. Het verschuiven van de inhoud op Android en WinUI resulteert in een verspilling van schermvastgoed boven aan de pagina.
U kunt een query uitvoeren op de DeviceInfo.Platform eigenschap om dit weergaveprobleem op te lossen. U kunt de volgende code toevoegen aan de paginaconstructor van uw app om de opvulling boven aan de pagina uit te vouwen, maar alleen voor iOS:
MyStackLayout.Padding =
DeviceInfo.Platform == DevicePlatform.iOS
? new Thickness(30, 60, 30, 30) // Shift down by 60 points on iOS only
: new Thickness(30); // Set the default margin to be 30 points
Notitie
DevicePlatform.iOS is een DevicePlatform struct die de tekenreekswaarde iOSretourneert. Er zijn gelijkwaardige eigenschappen voor de andere ondersteunde platforms. U moet deze eigenschappen gebruiken in plaats van te vergelijken met vastgelegde tekenreeksen; het is raadzaam om uw code toekomstbestendig te maken als sommige van deze tekenreekswaarden in de toekomst veranderen.
Deze code werkt, maar bevindt zich in het code-behind-bestand van de pagina. De opvulling is een gebruikersinterfacespecifieke waarde. Het is waarschijnlijk beter en handiger om dit te doen vanuit XAML in plaats van in de code-behind.
De extensie OnPlatform Markup gebruiken
.NET MAUI XAML biedt de OnPlatform markeringsextensie, waarmee u het runtimeplatform kunt detecteren vanuit uw XAML-code. U kunt deze markeringsextensie toepassen als onderdeel van de XAML-code waarmee een eigenschapswaarde wordt ingesteld. Voor de extensie moet u het eigenschapstype opgeven, samen met een reeks blokken waarin u de eigenschapswaarde instelt op basis van On Platform het platform.
Notitie
De OnPlatform markeringsextensie is algemeen. Er wordt een typeparameter gebruikt. Het type dat het TypeArguments kenmerk opgeeft, zorgt ervoor dat het juiste extensietype wordt gebruikt.
U kunt de Padding eigenschap als volgt instellen. U ziet dat het type van de Padding eigenschap is Thickness:
<VerticalStackLayout>
<VerticalStackLayout.Padding>
<OnPlatform x:TypeArguments="Thickness">
<On Platform="iOS" Value="30,60,30,30" />
</OnPlatform>
</VerticalStackLayout.Padding>
<!--XAML for other controls goes here -->
...
</VerticalStackLayout>
Voor andere platforms dan iOS blijft de opvulling ingesteld op de standaardwaarde 0,0,0,0. Voor WinUI en Android kunt u de opvulling instellen op 30 punten met extra OnPlatform blokken:
<VerticalStackLayout>
<VerticalStackLayout.Padding>
<OnPlatform x:TypeArguments="Thickness">
<On Platform="iOS" Value="30,60,30,30" />
<On Platform="Android" Value="30" />
<On Platform="WinUI" Value="30" />
</OnPlatform>
</VerticalStackLayout.Padding>
...
</VerticalStackLayout>
U kunt dezelfde techniek toepassen op andere eigenschappen. In het volgende voorbeeld wordt de achtergrondkleur van de stack-indeling op een pagina gewijzigd in Silver op iOS, in Groen op Android en in Geel in Windows.
<VerticalStackLayout>
...
<VerticalStackLayout.BackgroundColor>
<OnPlatform x:TypeArguments="Color">
<On Platform="iOS" Value="Silver" />
<On Platform="Android" Value="Green" />
<On Platform="WinUI" Value="Yellow" />
</OnPlatform>
</VerticalStackLayout.BackgroundColor>
...
</VerticalStackLayout>
Deze syntaxis is een beetje uitgebreid, maar er is een verminderde syntaxis beschikbaar voor de OnPlatform extensie. U kunt het voorbeeld vereenvoudigen waarmee de opvulling als volgt wordt ingesteld:
<VerticalStackLayout Padding="{OnPlatform iOS='30,60,30,30', Default='30'}">
<!--XAML for other controls goes here -->
</VerticalStackLayout>
U kunt een standaardwaarde voor een eigenschap opgeven, samen met platformspecifieke waarden. In dit formulier wordt de typeparameter afgeleid van de eigenschap waarnaar het OnPlatform kenmerk wordt toegepast.
Als u de achtergrondkleur wilt instellen, kunt u dit XAML-fragment gebruiken in plaats van het tweede voorgaande voorbeeld:
<VerticalStackLayout BackgroundColor="{OnPlatform WinUI=Yellow, iOS=Silver, Android=Green}">
...
</VerticalStackLayout>