Chapter 11 Getting Specific
This class will only be compiled when the Android platform is being targeted and therefore you get a very similar compiled output to the one in the “Platform-Specific Code with Compiler Directives” section. The key difference is that you don’t need to add any of those unpleasant #if directives.
When building platform-specific implementations this way, the namespace of your partial classes must match! Otherwise, the compiler won’t be able to build a single class.
Overriding the Platform-Specific UI
One fundamental part of .NET MAUI is in the fact that it utilizes the underlying platform controls to handle the rendering of our applications. This will result in our applications looking different on each of the platforms. In the majority of scenarios, this is considered a good thing because the application is in keeping with the platform’s look and feel. At times, though, you will need to override some of the platform-specific
rendering or even just to tweak how controls render in your application on a specific platform.
OnPlatform
A common example of needing to change control properties are around the sizing of text or spacing around controls (Margin or Padding). I always find that the final finishing touches to get an application feeling really slick and polished can result in needing to tweak details like this per platform. There are two main ways to achieve this, and they depend on whether you are a XAML or C# oriented UI builder. Let’s look over both with an example.
355
Chapter 11 Getting Specific
OnPlatform Markup Extension
XAML, as mentioned, is not as feature-rich in terms of what can be written and achieved. Therefore, additional functionality is provided by .NET MAUI to overcome these limitations. One such example is the OnPlatform markup extension. XAML markup extensions help enhance the power and flexibility of XAML by allowing element attributes to be set from a variety of sources.
You might decide that in your ClockWidgetView.xaml file the FontSize property is too large for iOS and Android and opt to change it only for those platforms. Let’s take a look at the code and see how you can modify the property based on the platform the application is running on.
<?xml version="1.0" encoding="utf-8" ?> <Label
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:viewmodels="clr-namespace:WidgetBoard.ViewModels" x:Class="WidgetBoard.Views.ClockWidgetView"
FontSize="60"
VerticalOptions="Center"
HorizontalOptions="Center"
x:DataType="viewmodels:ClockWidgetViewModel" Text="{Binding Time}">
<Label.BindingContext> <viewmodels:ClockWidgetViewModel />
</Label.BindingContext>
</Label>
356
Chapter 11 Getting Specific
The code above shows that the FontSize property is currently fixed to a value of 60. With the OnPlatform markup extension, you can change this value based on the platform the application is running on. The following code example shows how you can retain the default value of 60 and then override for the platforms that you wish:
FontSize="{OnPlatform Default=60, Android=25, iOS=30}"
The code example above states that all platforms will default to using a FontSize of 60 unless the application is running on Android and a value of 25 will be used or if the application is running on iOS and a value of 30 will be used.
Conditional Statements
If you had built your UI in C# or wanted to at least modify the FontSize property of a Label control in a similar way you could write the following conditional C# statement:
public ClockWidgetView()
{
if (DeviceInfo.Platform == DevicePlatform.Android)
{
FontSize = 25;
}
else if (DeviceInfo.Platform == DevicePlatform.iOS)
{
FontSize = 30;
}
else
{
FontSize = 60;
}
}
357