Updating our WalksEntryPage to use our Implicit Style

In this section, we will take a look at how to update the user interface for our WalksEntryPage, to apply Implicit Styles to each of the XAML element controls that are of the same type without requiring each control to reference the style.

Implicit Styles are very different from Global and Explicit Styles, as they don't require you to specify the x:Key declaration attribute. The Style will then be applied to all visual elements that match the TargetType, as we will see in this section.

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

  1. Locate and open the WalkTrailInfoPage.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>
<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" />
<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 covered in the preceding code snippet:

  1. We declared the ResourceDictionary in our ContentPage.Resources tag, and then we created and set the TargetType, which will be used to set the appearance of all Picker instances that are declared in our XAML page.
  2. We created a number of setter properties that we can apply to our picker control. Here, we specified VerticalOptions to be Center, which will center our control in our XAML page.
  3. We set the HorizontalOptions and specified TextColor, FontSize, and BackgroundColor to use for this control element.

Now that you have created and implemented the necessary Global, Implicit, Explicit, and Device Styles in your XAML pages, our next step is to take a look at how we can use and work with the PlatformEffects API to create and implement ButtonShadowEffects and LabelShadowEffects for both iOS and Android platforms.  

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

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