In some cases, it can be useful to customize content or appearance across platforms—for example, applying one style on Android and a different one on iOS to match each platform's native aesthetic. This extension provides a way to set content or property values depending on the device's OS platform.

Example

<Label Text="{OnPlatform iOS=Hello iOS!, Android=Hello Android!}" />

Example

<ContentView>
    <OnPlatform x:TypeArguments="View">
        <On Platform="iOS"><Label Text="Hello iOS"/></On>
        <On Platform="Android"><Label Text="Hello Android"/></On>
    </OnPlatform>
</ContentView>

Below is legacy documentation for the original Rock:OnDevicePlatform extension.

Properties

Examples

<Label Text="Hello World!"
    TextColor="{Rock:OnDevicePlatform Android=Blue, iOS=Red, Default=Black}" />

When running on an Android device, the text will be blue. If instead running on an iOS device then the text will be red. Otherwise, the text will be black. While not currently required, the Default value should be specified in case we add other platforms in the future.

<StackLayout>
    <Rock:OnDevicePlatform>
        <Rock:OnDevicePlatform.Android>
            <Button Text="Go" />
        </Rock:OnDevicePlatform.Android>
        <Rock:OnDevicePlatform.Default>
            <Label Text="This feature required Android." />
        </Rock:OnDevicePlatform.Default>
    </Rock:OnDevicePlatform>
</StackLayout>

Here is a more interesting example. In this case, we are replacing not just a property but an entire element. On Android, they will see a button that they can tap. On every other platform, they will see a label that informs them the feature only works on Android.