When creating Xamarin Forms applications most of the styling and sizing will be handled for you, however, there are often times you have to do something specific to a certain platform; especially when it comes to sizing fonts appropriately, since pixel densities vary widely across the platforms.

To support this case, Xamarin Forms provides the <OnPlatform> tag for Xaml.  This tag can be used in a variety of very useful ways, one of which is to support the Styling component added in version 1.3.  In fact, we can reference instances of <OnPlatform> as Static Resources within our XAML, like this:

<OnPlatform x:TypeArguments="Color" Android="Green" iOS="White" WinPhone="White"
            x:Key="PrimaryTextColor" />
<OnPlatform x:TypeArguments="Font" Android="30" iOS="40" WinPhone="20" x:Key="LargeFontSize" />

<Style x:Key="LargeLabel" TargetType="Label">
    <Setter Property="TextColor" Value="{StaticResource PrimaryTextColor}" />
    <Setter Property="Font" Value="{StaticResource LargeFontSize}" />
</Style>

<Label Text="{Binding Path=PointsAwardedDisplay, Mode=OneWay}" HorizontalOptions="StartAndExpand"
       Grid.Row="2" Grid.ColumnSpan="2" Style="{StaticResource LargeLabel}" />

In this example, we are defining a style for a Label called LargeLabel.  This Label will use a TextColor of White for all platforms except Android where it will be Green.  For the font size, Android will use 30, iOS will use 40, and Windows Phone will use 20.  I find this is the most common use for this tag with regard to styling, as the font sizing algorithms for the platform are different; be sure to run on simulators and actual devices to get the font that you want.

One of the other areas <OnPlatform> finds usage is in selective display.  I use this a lot for Navigation pages within Windows Phone.  As Windows Phone does not have the concept of a Navigation bar setting the Title will NOT show up anywhere on the page.  So what I tend to do is add the following bit of Xaml to each page

<Label Grid.Row="0" Style="{StaticResource HeaderLabel}">
    <Label.Text>
        <OnPlatform x:TypeArguments="x:String">
            <OnPlatform.WinPhone>
                Create User
            </OnPlatform.WinPhone>
        </OnPlatform>
    </Label.Text>
</Label>

In Xaml, you have the option of setting a value in either the attribute of the notation I used above, this allows for more complex values to be assigned to a property; very common with ListView as its how templates are set for list items.

In the case above, we are setting the Text to a value ONLY when the platform is determined to be Windows Phone.  This same approach can be applied throughout Xaml and is part of what gives it is amazing flexibility when designing UIs.

And beyond font sizing and selective UI you can do so much more once you understand this.  For example, I recently found out that the row height for the group header in my listview differed between Android and Windows Phone because of how the styling was translated.  I ended up having to do this:

<ListView.GroupHeaderTemplate>
    <DataTemplate>
      <ViewCell Height="{StaticResource PredictionsHeaderRowHeight}">
         <Grid BackgroundColor="{StaticResource DarkGreenColor}"
               HorizontalOptions="Fill" VerticalOptions="Fill">
            <StackLayout HorizontalOptions="Fill" VerticalOptions="Fill"
                         Padding="7,0,0,0">
               <Label Style="{StaticResource HeaderLabel}"
                      Text="{Binding Path=Key, Mode=OneWay}"
                      HorizontalOptions="Fill"
                      VerticalOptions="CenterAndExpand" />
               </StackLayout>
            </Grid>
        </ViewCell>
    </DataTemplate>
</ListView.GroupHeaderTemplate>

You can see that I provide a Static Resource as the value for the ViewCell Height property.  It is defined below

<OnPlatform x:TypeArguments="x:Double" Android="30" iOS="30" WinPhone="50" x:Key="PredictionsHeaderRowHeight" />

I hope that helps get you started styling your Xamarin Forms apps.  Check out my previous post which talks about how to centralize these styles into a central file.