Changes
<br>
== Showing Images and Icons ==
</tab>
</tabs>
== Device and Platform Responsiveness ==
{{UnderConstructionStart}}
<br>
Although '''OnPlatform''' and '''OnIdiom''' have been used in Xamarin, the following wiki article is valid from MAUI 5.0 (add version flag), as the syntax changed.
'''OnPlatform''' can be used to define different property values based on the platform. Valid Platform names are:
* iOS
* Android
* WinUI (for Windows)
* further ones see [https://learn.microsoft.com/en-us/dotnet/maui/platform-integration/customize-ui-appearance?view=net-maui-9.0#customize-ui-appearance-with-a-markup-extension-based-on-the-platform here]
'''OnIdom''' can be used to define different property values based on the device type (e.g. Phone, Tablet, Desktop).
When it comes to the proper syntax, we should stick with the approaches mentioned in the [https://learn.microsoft.com/en-us/dotnet/maui/platform-integration/customize-ui-appearance?view=net-maui-9.0 official documentation].
Means, we should avoid using the single-tag syntax like in the example below:
<tabs>
<tab name="OnPlatform">
<source lang = "XML">
<OnPlatform Android="..." iOS="..." />
</source>
</tab>
<tab name="OnIdiom">
<source lang = "XML">
<OnIdiom Phone="..." Desktop="..." />
</source>
</tab>
</tabs>
Instead, we should either use the OnPlatform / OnIdiom '''multi-tag syntax''' (''Default="..."'' only if necessary):
<tabs>
<tab name="OnPlatform">
<source lang = "XML">
<OnPlatform x:TypeArguments="Thickness" Default="20">
<On Platform="iOS, WinUI" Value="0,20,0,0" />
<On Platform="Android" Value="10,20,20,10" />
</OnPlatform>
</source>
</tab>
<tab name="OnIdiom">
<source lang = "XML">
<OnIdiom x:TypeArguments="Thickness" Default="20">
<OnIdiom.Desktop>0,60,0,0</OnIdiom.Desktop>
</OnIdiom>
</source>
</tab>
</tabs>
or the OnPlatform / OnIdiom '''inline syntax''' (with or without ''Default=''):
<tabs>
<tab name="OnPlatform">
<source lang = "XML">
<BoxView Color="{OnPlatform Default=Yellow, iOS=Red, Android=Green}" />
</source>
</tab>
<tab name="OnIdiom">
<source lang = "XML">
<BoxView Color="{OnIdiom Default=Yellow, Phone=Red, Tablet=Green}" />
</source>
</tab>
</tabs>
=== Complex values ===
* If the OnPlatform/OnIdiom value contains a '''Binding''', '''StaticResource''' or any other complex value in curly brackets, it is recommended to use the '''inline syntax'''. Although there is no official documentation, it seems to work more reliably according to our experience.
* DynamicResource values are not supported in OnIdiom / OnPlatform.
* If the value contains any special characters like '''"''' or ''',''' or a '''string''' when using the inline variant (both OnPlatform and OnIdiom), it needs to be wrapped between '''' ''''
<tabs>
<tab name="Don't">
<source lang = "XML">
Margin={OnIdiom 10,2, Phone=2,0}
</source>
</tab>
<tab name="Instead do">
<source lang = "XML">
Margin={OnIdiom '10,2', Phone='2,0'}
</source>
</tab>
</tabs>
* But be careful with using apostrophes - when using them around curly brackets {} it can lead to an error
* If OnIdiom / OnPlatform values contain multiple tags (e.g. when x:TypeArguments="View"), the '''multi-tag''' syntax should be used.
* When using '''GridLength''' as type in OnPlatform/OnIdiom, it should only be used with the inline syntax.
**The GridLengthTypeConverter is not accessible on the GridLength struct (https://github.com/dotnet/maui/issues/10894)
{{Attention|Whenever using complex values like bindings or resources (basically everything in curly brackets) in the scope of OnPlatform or OnIdiom, there doesn't seem to be a general solution that reliably works in every case. So it should be used carefully, and it can not be guaranteed that it always works as expected. To increase the possibility for it to work according to experiences, it is recommended to use the inline OnPlatform/OnIdiom syntax.}}
{{UnderConstructionEnd}}
[[Category:Client|XAML Tips]]
