Quick Start Tutorial: Creating Universal Apps Via Xamarin: XAML And Resource Dictionary - Part 10

Read the previous parts of the series here,

• Quick Start Tutorial: Creating Universal Apps Via Xamarin - Part One
• Quick Start Tutorial: Creating Universal Apps Via Xamarin - Part Two
• Quick Start Tutorial: Creating Universal Apps via Xamarin: Label and Button - Part Three
• Quick Start Tutorial: Creating Universal Apps Via Xamarin: Device class - Part Four
• Quick Start Tutorial: Creating Universal Apps via Xamarin: Device Class (cont.) - Part Five
• Quick Start Tutorial: Creating Universal Apps Via Xamarin: Entry Control - Part Six
• Quick Start Tutorial: Creating Universal Apps Via Xamarin: StackLayout and Layout Options - Part Seven
• Quick Start Tutorial: Creating Universal Apps Via Xamarin: DisplayAlert and DisplayActionSheet - Part Eight
• Quick Start Tutorial: Creating Universal Apps Via Xamarin: Date Picker, Time Picker and Activity Indicator - Part Nine

XAML in Xamarin Forms

This article explains about the overview of XAML and Resource dictionary

Basic Introduction of the XAML

XAML (Extensible Application Mark-up Language) is a mark-up language that describes UI elements. All the XAML elements are defined as a tree structure (like XML Nodes concept). The main advantage of XAML is we can construct our UI and separate UI design and code at the back end of the page.

Any differences between Microsoft XAML and Xamarin XAML?

There is no difference between these two. XAMLs, Xamarin Xaml are created based on Microsoft XAML, (XAML forms created, based on XAML 2009 specification), the only changes are controls and some functionality is limited in Xamarin (not big changes) and currently, there is no special design tool for Xamarin XAML (like VS Blend), shown below:

<?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="Sample1.StyleInfo">
</ContentPage>

Xaml code, shown above is divided into two parts:

1. XML Version
2. Page Object

XML Version tag is optional and it specifies version number and encoding

In Content Page class three attributes are specified. First tag declares Xamarin namespace and second is a XAML namespace specification and when it is declared with “x”, x is used for the elements and the attributes that are intrinsic to XAML.

Code Behind Page

When adding an XAML file in Visual Studio or Xamarin Studio two files are created.

Ex: Style Info File Name,

1. StyleInfo.Xaml
2. StyleInfo.xaml.cs

StyleInfo.Xaml

Construct the UI design, like adding the controls and style.

StyleInfo.xaml.cs: Handling the app logic and an event handler (MVVM is different).

Relationship between XAML and .xaml.cs

Add the button in the XAML and implement the event handler, shown below:

<Button x:Name="BtnButton" Text="Sample" Clicked="BtnButton_OnClicked"/>

and implement (.xaml.cs file), which is the event logic, shown below:

public partial class StyleInfo : ContentPage
{
        public StyleInfo()
        {
            InitializeComponent();
        }

        private void BtnButton_OnClicked(object sender, EventArgs e)
        {

        }
  }

Both are different files.

 

The communication takes place between the two, shown below:  

1. Class file Name should be the  same and define the partial class, as shown below:
   
   XAML file defines in the Class Name x:Class="Sample1.StyleInfo" & code behind page public partial class StyleInfo.
   
   
2. While comping the Application, one more file is created (“. xaml.g.cs”),?
   
   Ex: Sample1.StyleInfo.xaml.g.cs
   
   In this file, InitializeComponent function has been implemented. Load the XAML tags. Create the UI and call LoadFromXaml function.
   

   private void InitializeComponent()
          {
               this.LoadFromXaml(typeof(StyleInfo));
               BtnButton = this.FindByName<global::Xamarin.Forms.Button>("BtnButton");
           }

   Add the button and implement, as shown below:
   

   public partial class StyleInfo : ContentPage
   {
           public StyleInfo()
           {
               InitializeComponent ();
           }
   }

   InitializeComponent () function(StyleInfo.xaml.cs) is used to call the LoadFromXaml () to instantiate all the objects and call FindbyName () to instantiate all the objects.

Resource dictionary

Resource dictionary is mainly used to avoid the repetition of XAML code and use the resource object throughout the Application. Resource contains the object with the key, value relationship. We can add whatever we want like style, templates etc.

Two types of resource are available, which are:

1. Static Resource
2. Dynamic Resource

Resource can be defined in the three types, which are:

1. Control Level
2. Page level
3. Application level

All the resources are defined in XAML, inside the ResourceDictionary tag.

Example

<ContentPage.Resources>
    <ResourceDictionary>
      <Color x:Key="ColorValue">Red</Color>
    </ResourceDictionary>
  </ContentPage.Resources>

This resource defines the page level and is defined in the ContentPage.Resources tag.

Best Practice: Define the resource always on top of the page.

In the example given above; key is a ColorValue & value is Red. In order to apply this key in controls property, use the static or dynamic resource.

Syntax

Property = {StaticResource KeyName} or Property = {dynamicResource KeyName}

Static Resource

Static resource reads the elements at once. When the page is created (in run time, we can’t change the values) it is defined in the two curly braces, given below:

<StackLayout>
    <Label Text="ResourceDictionary Sameple" TextColor="{StaticResource ColorValue}"/>
  </StackLayout>

Note: If the key is not found, static resource throws an exception.

We can also define the value in the resource dictionary as platform specific.

Define the OnPlatform tag inside in the ResourceDictionary, creating the ResourceDictionary collection. The value is added to the collection, based on the platform (value field is not in the list, so only one value is assigned even “n” arguments are passed).

<ContentPage.Resources>
    <ResourceDictionary>
      <Color x:Key="ColorValue">Red</Color>
      <OnPlatform x:Key="FntSize" x:TypeArguments="x:Double" iOS="30" Android="50" WinPhone="75"/>
    </ResourceDictionary>
  </ContentPage.Resources>

  <StackLayout>
    <Label Text="ResourceDictionary Sameple" FontSize="{StaticResource FntSize}"
           TextColor="{StaticResource ColorValue}"/>
  </StackLayout>

FontSize is assigned, based on platform, shown below:



Dynamic Resource

Dynamic resource assigns the values “n” of times after the page has been created and it is defined within the two curly braces with DynamicResource tag.

Property = {dynamicResource KeyName}

dynamic values have changed in the code level, values are directly assign to the dictionary

ResourceDictionary[Key] = value;

We can assign both the static and dynamic resource the same control with different properties.

Resource Code

<ContentPage.Resources>
    <ResourceDictionary>
      <Color x:Key="ColorValue">Red</Color>
      <OnPlatform x:Key="FntSize" x:TypeArguments="x:Double" iOS="30" Android="50" WinPhone="40"/>
    </ResourceDictionary>
  </ContentPage.Resources>

DynamicResource code

<StackLayout>
  <Label Text="ResourceDictionary Static" FontSize="{StaticResource FntSize}"
         TextColor="{StaticResource ColorValue}"/>

  <Label Text="ResourceDictionary Dynamic"
         FontSize="{StaticResource FntSize}"
         TextColor="{DynamicResource ColorValue}"/>
</StackLayout>

Note

As far as creating the resource dictionary is concerned, there is no difference; whether is a static or dynamic resource, as reading the values from the dictionary is different.