Updating the WalkEntryPage user interface using XAML

In this section, we will take a look at how to update the user interface for our WalkEntryPage to define Margins in your XAML, so that our control elements will display neatly in our user interface, based on the platform that is being run and using the OnPlatform attribute.

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"
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">
<StackLayout.Margin>
<OnPlatform x:TypeArguments="Thickness">
<On Platform="Android, WinPhone"
Value="15,0" />
<On Platform="iOS"
Value="15,0" />
</OnPlatform>
</StackLayout.Margin>
<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>

Let's now take a look at what we defined in the preceding XAML:

  1. We start by adding the <StackLayout.Margin for our StackLayout and specifying the OnPlatform and TypeArguments, as well as specifying the Thickness parameter, since we are working with the Margin feature of the StackLayout control
  2. Finally, we use the <On Platform attribute to specify each of the platforms that we want to target and provided a value for the Value property
..................Content has been hidden....................

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