In this section, we will take a look at how to update the user interface for our WalksMainPage to apply padding and set margins in your XAML, so that our control elements will display neatly in our user interface, based on the platform that is being run and using the OnPlatform tag.

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" Orientation="Horizontal" 
                                        HorizontalOptions="FillAndExpand">
                             <StackLayout.Padding>
                                 <OnPlatform x:TypeArguments="Thickness">
                                     <On Platform="Android, WinPhone" 
                                         Value="0,0" />
                                     <On Platform="iOS" Value="2,2" />
                                 </OnPlatform>
                             </StackLayout.Padding>                        
                             <Image Aspect="AspectFill" Source="{Binding ImageUrl}" WidthRequest="140" 
                                    HeightRequest="140" VerticalOptions="FillAndExpand" 
                                    HorizontalOptions="FillAndExpand" />
                             <StackLayout x:Name="DetailsLayout" HorizontalOptions="FillAndExpand">
                                 <StackLayout.Padding>
                                     <OnPlatform x:TypeArguments="Thickness">
                                         <On Platform="Android, WinPhone" 
                                             Value="5,0" />
                                         <On Platform="iOS" Value="5,0" />
                                     </OnPlatform>
                                 </StackLayout.Padding>
                                 <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 adding the StackLayout.Padding for our cellLayout and specifying the OnPlatform and TypeArguments, as well as specifying the Thickness parameter since we are working with the Padding feature of the StackLayout control
2. We used the On Platform attribute, which is used to specify each of the platforms that we want to target and provide a value for the Value property
3. We defined the StackLayout.Padding for our DetailsLayout, and also specified OnPlatform and TypeArguments, then specify the Thickness parameter, since we are working with the Padding feature of the StackLayout control
4. Finally, we used the <On Platform tag to specify each of the platforms that we want to target and provide a value for the Value property