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

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

1. Locate and open the WalkEntryPage.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:valueConverters="clr-namespace:TrackMyWalks.ValueConverters" 
                 x:Class="TrackMyWalks.Views.WalkEntryPage">
       <ContentPage.ToolbarItems>
           <ToolbarItem Text="Save" Clicked="SaveWalkItem_Clicked" />
       </ContentPage.ToolbarItems>
       <ContentPage.Resources>
            <ResourceDictionary>
               <valueConverters:ImageConverter x:Key="imageConverter" />
            </ResourceDictionary>
            <ResourceDictionary>
                <!-- Creating an Implicit Style in XAML -->
                <Style TargetType="Picker">
                    <Setter Property="VerticalOptions" Value="Center"/>
                    <Setter Property="HorizontalOptions" Value="FillAndExpand"/>
                    <Setter Property="TextColor" Value="Red"/>
                    <Setter Property="FontSize" Value="{DynamicResource CaptionStyle}"/>
                    <Setter Property="BackgroundColor" Value="LightGoldenrodYellow"/>
                </Style>
            </ResourceDictionary>
        </ContentPage.Resources>
        <ContentPage.Content>
            <TableView Intent="Form">
                <TableView.Root>
                    <TableSection Title="Enter Walk Trail Information">
                        <EntryCell Label="Title:" Text="{Binding Title, Mode=TwoWay}" 
                         Placeholder="Provide a Title for this trail" />
                        <EntryCell Label="Description:" Text="{Binding Description, Mode=TwoWay}" 
                         Placeholder="Provide trail description" />
                        <EntryCell Label="Latitude:" Text="{Binding Latitude, Mode=TwoWay}" 
                         Placeholder="Provide latitude coordinates" Keyboard="Numeric" />
                        <EntryCell Label="Longitude:" Text="{Binding Longitude, Mode=TwoWay}" 
                         Placeholder="Provide longitude coordinates" Keyboard="Numeric" />
                        <EntryCell Label="Distance:" Text="{Binding Distance, Mode=TwoWay}" 
                         Placeholder="Provide trail distance" Keyboard="Numeric" />
                        <ViewCell>
                          <StackLayout Orientation="Horizontal">
                              <StackLayout.Margin>
                                  <OnPlatform x:TypeArguments="Thickness">
                                      <On Platform="Android, WinPhone" Value="15,0" />
                                      <On Platform="iOS" Value="15,0" />
                                  </OnPlatform>
                              </StackLayout.Margin>
                              <Label Text="Difficulty:" VerticalOptions="Center" />
                              <Image Aspect="AspectFill" HeightRequest="50" 
                                     WidthRequest="50" HorizontalOptions="Start" 
                                     Source="{Binding Difficulty, 
                                     Converter={StaticResource imageConverter}}" />
                                     <Picker Title="Choose Difficulty" 
                                          SelectedItem="{Binding Difficulty, Mode=TwoWay}">
                                          <Picker.ItemsSource>
                                             <x:Array Type="{x:Type x:String}">
                                             <x:String>Easy</x:String>
                                             <x:String>Medium</x:String>
                                             <x:String>Hard</x:String>
                                             <x:String>Extreme</x:String>
                                             </x:Array>
                                          </Picker.ItemsSource>
                                     </Picker>
                          </StackLayout>
                        </ViewCell>
                        <EntryCell Label="Image URL:" Text="{Binding ImageUrl, Mode=TwoWay}" 
                         Placeholder="Provide an Image URL" />
                    </TableSection>
                </TableView.Root>
            </TableView>
        </ContentPage.Content>
    </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 create 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 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. Whenever you change the Picker value, the image will update to represent the chosen difficulty level.