In this section, we will take a look at how to update the user interface for our WalksMainPage to
apply Device Styles to our XAML elements using the Device.Styles class so that our control elements will take on each of the platform-specific styles of the platforms that our app is running on.
Let's start by updating the user interface for our WalksMainPage by perf
orming the following steps:
-
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" Style="{DynamicResource TitleStyle}">
<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" TextColor="#666"
Style="{DynamicResource CaptionStyle}" />
<Label Text="{Binding Difficulty,
StringFormat='Difficulty: {0}'}"
FontAttributes="Bold" TextColor="Black"
Style="{DynamicResource ListItemTextStyle}" />
<StackLayout Spacing="3" Orientation="Vertical">
<Label Text="{Binding Description}" FontAttributes="None"
TextColor="Blue" VerticalOptions="FillAndExpand"
Style="{DynamicResource BodyStyle}" />
</StackLayout>
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>
Let's now take a look at what we covered in the preceding code snippet:
- First, we started by adding the Style property to our Title and using the DynamicResource to apply the device-specific TitleStyle
- We proceeded to add the Style property to our Distance bindable property and use the DynamicResource to apply the device-specific CaptionStyle
- We added the Style property to our Difficulty bindable property to use the DynamicResource to apply the device-specific ListItemTextStyle
- We added the Style property to our Description bindable property and used the DynamicResource to apply the device-specific BodyStyle
For more information on the Device.Styles class, please refer to the Microsoft Developer Documentation at https://docs.microsoft.com/en-us/dotnet/api/xamarin.forms.device.styles?view=xamarin-forms.