In this section, we will take a look at how to update the user interface for our WalkEntryPage to include naming to our control elements in our XAML, so that we can access these controls in our code-behind and apply Simple Animations and other animations using C# code.

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

1. Locate and open the WalEntryPage.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>
                  <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" x:Name="WalkDetails">
                     <TableView.Root>
                       ...
                       ...
                       <Image Aspect="AspectFill" x:Name="DifficultyLevel" 
                              HeightRequest="50" WidthRequest="50" 
                              HorizontalOptions="Start" 
                              Source="{Binding Difficulty, 
                              Converter={StaticResource imageConverter}}" />
                        ...
                        ...
                     </TableView.Root>
                  </TableView>
               </ContentPage.Content>
     </ContentPage>

2. Locate and open the WalkEntryPage.xaml.cs code-behind file, which is located in the Views folder, ensure that it is displayed in the code editor, and enter the following highlighted code sections:

     //
     //  WalkEntryPage.xaml.cs
     //  Data Entry screen that allows new walk information to be 
     //  added 
     //
     //  Created by Steven F. Daniel on 14/05/2018
     //  Copyright © 2018 GENIESOFT STUDIOS. All rights reserved.
     //
     using System;
     using TrackMyWalks.Services;
     using TrackMyWalks.ViewModels;
     using Xamarin.Forms;
 
     namespace TrackMyWalks.Views
     {
         public partial class WalkEntryPage : ContentPage
         {
             // Return the Binding Context for the ViewModel
             WalkEntryPageViewModel _viewModel => BindingContext as WalkEntryPageViewModel;
 
             public WalkEntryPage()
             {
                 InitializeComponent();
                 ...
                 ...
             }
             ...
             ...
             // Method to initialise our View Model when the ContentPage appears
             protected override async void OnAppearing()
             {
                  base.OnAppearing();
 
                 // Create a Simple Animation to rotate our Difficulty 
                 // Level Image
                 DifficultyLevel.AnchorY = (Math.Min(DifficultyLevel.Width, 
                                            DifficultyLevel.Height) / 2) / 
                                            DifficultyLevel.Height;

                 await DifficultyLevel.RotateTo(360, 2000, Easing.BounceOut);
             }
         }
     }

Let's take a look at what we defined in our XAML and code snippet:

1. We started by adding the x:Name="WalkDetails" property to our TableView property, so that we can access TableView in our code-behind file, in order to apply various animation techniques as we progress through this chapter
2. We added x:Name="DifficultyLevel" to our Image property, just like we did when we defined our TableView property, so that we can access our image in our code-behind file in order to apply various animations
3. We modified our OnAppearing method and defined a simple animation to rotate our DifficultyLevel Image by setting the AnchorY property on our image, which is calculated to center the image from the top of the image to the center point of the layout
4. We used the await keyword on our RotateTo extension method, and passed in 360, which will ensure that the image makes a full 360-degree rotation around the center point of the layout, and specify a duration of 2 seconds over which to animate the transition
5. We used the BounceOut property of the Easing class to bounce our image when the animation completes