Updating the WalkEntryPage user interface using XAML

In this section, we will begin by updating the user interface for our WalkEntryPage using XAML to specify the Binding Modes for each of our EntryCell fields, which will be used to allow the user to add new walk trail information whenever the user taps on the Add button or chooses the Edit menu context action from the WalksMainPage.

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

Locate and open the WalkEntryPage.xaml file which is located in the Views folder, ensuring that it is displayed within 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.WalkEntryPage">
<ContentPage.ToolbarItems>
<ToolbarItem Text="Save" Clicked="SaveWalkItem_Clicked" />
</ContentPage.ToolbarItems>
<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" Margin="15,0">
<Label Text="Trail Difficulty Level:" VerticalOptions="Center" />
<Picker Title="Choose Difficulty" VerticalOptions="Center"
HorizontalOptions="FillAndExpand"
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>

Now, let's start by taking a look at what we defined within the preceding XAML:

  1. We started by specifying the Binding as well as the binding Mode that we would like to set for each of our EntryCell fields. Here, we used the TwoWay binding to indicate that the binding should propagate any changes from the ViewModel to each of the bindable objects that we have specified, in both directions.
  2. Finally, we updated the Binding and binding Mode for our Picker control, as well as specified the Binding and binding Mode for our Image URL EntryCell property that will allow the user to specify the URL location for the image to use for the trail.

The following table provides a brief description of the different binding types, and when you should use these within your applications:

Binding Mode

Description

OneWay

The OneWay binding indicates that the binding should only propagate changes from a source (usually the ViewModel) to target the BindableObject. This is the default mode for most BindableProperty values.

OneWayToSource

The OneWayToSource binding indicates that the binding only propagates changes from the target BindableObject to the ViewModel and is mainly used for read-only BindableProperty values.

TwoWay

The TwoWay binding indicates that the binding should propagate the changes from the ViewModel to the target BindableObject in both directions.

 

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.118.189.251