One of the features that comes as part of the Xamarin.Forms platform is the ability to manipulate the user interface by leveraging the various platform-specific APIs that are available, whether it be manipulating the appearance of controls and their elements using custom renderers or changing the appearance and styling of native control elements.

In this section, we will begin by updating the DataTemplate in our WalksMainPage, using XAML to apply additional features to change the appearance of control elements, such as updating font sizes based on the platform that our app is running on and using the OnPlatform argument.

Let's start by updating the user interface for our WalksMainPage by performing the following steps:

1. Locate and open the WalksMainPage.xaml file, which is located in the Views folder, ensure that it is displayed in the code editor, and enter the following highlighted code sections:

    <?xml version="1.0" encoding="UTF-8"?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"    
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
                 x:Class="TrackMyWalks.Views.WalksMainPage">
         <ContentPage.ToolbarItems>
             <ToolbarItem Text="Add" Clicked="AddWalk_Clicked" />
         </ContentPage.ToolbarItems>
         <StackLayout>
             <ListView x:Name="WalkEntriesListView" HasUnevenRows="true" 
                       SeparatorColor="#ddd" ItemTapped="myWalkEntries_ItemTapped">
                 <ListView.ItemTemplate>
                     <DataTemplate>
                         <ViewCell>
                             <ViewCell.ContextActions>
                                 <MenuItem Clicked="OnEditItem" 
                                  CommandParameter="{Binding .}" Text="Edit" 
                                  IsDestructive="False" />
                                 <MenuItem Clicked="OnDeleteItem" 
                                  CommandParameter="{Binding .}" Text="Delete" 
                                  IsDestructive="True" />
                             </ViewCell.ContextActions>
                             <StackLayout x:Name="cellLayout" Padding="2,2" 
                                 Orientation="Horizontal" HorizontalOptions="FillAndExpand">
                              <Image Aspect="AspectFill" Source="{Binding ImageUrl}" 
                                     WidthRequest="140" HeightRequest="140" 
                                     VerticalOptions="FillAndExpand" 
                                     HorizontalOptions="FillAndExpand" />
                                    <StackLayout x:Name="DetailsLayout" Padding="5,0"      
                                         HorizontalOptions="FillAndExpand">
                                         <Label Text="{Binding Title}" 
                                                FontAttributes="Bold" 
                                                TextColor="Black">
                                         <Label.FontSize>
                                             <OnPlatform x:TypeArguments="x:Double">
                                                 <On Platform="Android, WinPhone" Value="14" />
                                                 <On Platform="iOS" Value="16" />
                                             </OnPlatform>
                                         </Label.FontSize>
                                     </Label>
                                     <Label Text="{Binding Distance, 
                                            StringFormat='Kilometers: {0} km'}" 
                                            FontAttributes="Bold" FontSize="12" 
                                            TextColor="#666" />
                                     <Label Text="{Binding Difficulty, 
                                            StringFormat='Difficulty: {0}'}" 
                                            FontAttributes="Bold" FontSize="12" 
                                            TextColor="Black" />
                                     <StackLayout Spacing="3" Orientation="Vertical">
                                         <Label Text="{Binding Description}" 
                                                FontAttributes="None" FontSize="12" 
                                                TextColor="Blue" 
                                                VerticalOptions="FillAndExpand" />
                                     </StackLayout>
                                    </StackLayout>
                             </StackLayout>
                         </ViewCell>
                     </DataTemplate>
                 </ListView.ItemTemplate>
             </ListView>
         </StackLayout>
    </ContentPage>

Let's now take a look at what we defined in the preceding XAML:

1. We started by making some minor changes to our DataTemplate by defining a Label.FontSize attribute, which will set the FontSize based on the platform that our app is running on using the OnPlatform and specifying the x:TypeArguments of Double
2. We used the On Platform attribute, passed in each platform that we want to check for, and assigned the font size value for each platform prior to defining the Spacing and Orientation values for our StackLayout to display the Description that is associated with each trail