In this section, we will take a look at how to update the user interface for our WalksMainPage, to apply ValueConverters and utilize ImageConverter in our XAML, so that we can display an image for the data-bind property of our Difficulty level.

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" 
                 xmlns:customEffect="clr-namespace:TrackMyWalks.CustomEffects" 
                 xmlns:valueConverters="clr-namespace:TrackMyWalks.ValueConverters"              
                 x:Class="TrackMyWalks.Views.WalksMainPage">

        <ContentPage.Resources>
            <ResourceDictionary>
                <valueConverters:ImageConverter x:Key="imageConverter" />
            </ResourceDictionary>
        </ContentPage.Resources>
        <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.Effects>
                                        <customEffect:LabelShadowEffect />
                                    </Label.Effects>
                                </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}" />
                                <Image Aspect="AspectFit" HeightRequest="50" 
                                       WidthRequest="50" HorizontalOptions="Start" 
                                       Source="{Binding Difficulty, 
                                       Converter={StaticResource imageConverter}}" />
                                <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 cover in the preceding code snippet:

1. We started by creating a xmlns:valueConverters reference to our ValueConverters namespace, so that we can access the ImageConverter in our XAML that we have defined in our namespace
2. We created a ResourceDictionary attribute, added the ImageConverter class in our valueConverters namespace, and defined a value for the Key property so that we can reference the imageConverter name in our XAML page.

3. We created an Image attribute and set the Aspect ratio to use, as well as the Height, Width, and HorizontalOptions, and the Source property for the image
4. You'll notice that for our Source property, we provided the Converter property in our binding for our difficulty level, in order to use the imageConverter ValueConverter, which will take a String value for our Difficulty and return the URL to use