In this section, we will take a look at how to update the user interface for our WalkTrailInfoPage, to apply Explicit Styles to our XAML elements so that our control elements will take on each of the platform-specific styles that our app is running on.

Whenever you use Explicit Styles, these must be declared in your XAML pages using a ResourceDictionary, and unlike Global Styles, they must be added to the XAML page using one or more Style declarations.

A Style is made Explicit by giving its declaration an x:Key attribute, which provides it with a descriptive key in the ResourceDictionary. These will then need to be applied to specific visual elements by setting their Style properties, as we will see in this section.

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

1. Locate and open the WalkTrailInfoPage.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.WalkTrailInfoPage">   
       <ContentPage.Resources>
           <ResourceDictionary>
               <Style x:Key="labelTrailName" TargetType="Label">
                   <Setter Property="HorizontalOptions" Value="Start" />
                   <Setter Property="FontAttributes" Value="Bold" />
                   <Setter Property="Style" Value="{DynamicResource TitleStyle}" />
                   <Setter Property="TextColor" Value="Black" />
               </Style>
               <Style x:Key="labelTrailKilometers" TargetType="Label">
                   <Setter Property="HorizontalOptions" Value="Start" />
                   <Setter Property="FontAttributes" Value="Bold" />
                   <Setter Property="Style" Value="{DynamicResource CaptionStyle}" />
                   <Setter Property="TextColor" Value="Black" />
               </Style>
               <Style x:Key="labelTrailDifficulty" TargetType="Label">
                   <Setter Property="HorizontalOptions" Value="Start" />
                   <Setter Property="FontAttributes" Value="Bold" />
                   <Setter Property="Style" Value="{DynamicResource ListItemTextStyle}" />
                   <Setter Property="TextColor" Value="Black" />
               </Style>
               <Style x:Key="labelTrailDescription" TargetType="Label">
                   <Setter Property="HorizontalOptions" Value="Start" />
                   <Setter Property="Style" Value="{DynamicResource BodyStyle}" />
                   <Setter Property="TextColor" Value="MidnightBlue" />
               </Style>
           </ResourceDictionary>
       </ContentPage.Resources>
       <ScrollView>
           <StackLayout.Padding>
               <OnPlatform x:TypeArguments="Thickness">
                   <On Platform="Android, WinPhone" Value="2,0" />
                   <On Platform="iOS" Value="2,0" />
               </OnPlatform>
           </StackLayout.Padding>
           <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand">
               <Image x:Name="TrailImage" Aspect="AspectFill" 
                      Source="{Binding ImageUrl}" HorizontalOptions="FillAndExpand" 
                      VerticalOptions="FillAndExpand" />
              <Label x:Name="TrailName" Text="{Binding Title}" 
                     Style="{DynamicResource labelTrailName}">
              </Label>
              <Label x:Name="TrailKilometers" Text="{Binding Distance, 
                     StringFormat='Kilometers: {0} km'}" 
                     Style="{StaticResource labelTrailKilometers}" />
              <Label x:Name="TrailDifficulty" Text="{Binding Difficulty, 
                     StringFormat='Difficulty: {0}'}" 
                     Style="{StaticResource labelTrailDifficulty}" />
              <Label x:Name="TrailFullDescription" Text="{Binding Description}" 
                     HorizontalOptions="FillAndExpand" 
                     Style="{StaticResource labelTrailDescription}" />
              <Button x:Name="BeginTrailWalk" Text="Begin this Trail" 
                      Clicked="BeginTrailWalk_Clicked" Margin="20" 
                      Style="{StaticResource buttonStyle}">
              </Button>
           </StackLayout>
       </ScrollView>
    </ContentPage>

Let's now take a look at what we covered in the preceding code snippet:

1. We declared the ResourceDictionary in our ContentPage.Resources attribute, and then we created a single Explicit labelTrailName and set the TargetType, which will be used to set the appearance of Label instances in the XAML page that we apply this attribute to, using the descriptive Key.
2. We created a number of setter properties that we can apply to our Label control. Here, we specified the HorizontalOptions to be Start, which will left-align our button control in our XAML page prior to setting FontAttributes, as well as defining Style using the Device.Styles class and the device-specific class type and specifying TextColor to use for this control element.
3. We added the Style property to each of our Label control elements using StaticResource to apply the Explicit Style.
4. We added the Style property to our Button using StaticResource to apply the Global Style to our control element, which we defined in our App.xaml file. If you remember, Global Styles can also be referred to as Explicit or Implicit Styles.