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:

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:

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.
   
   1. private void InitializeComponent()
   2. {
   3. this.LoadFromXaml(typeof(StyleInfo));
   4. BtnButton = this.FindByName<global::Xamarin.Forms.Button>("BtnButton");
   5. }
   Add the button and implement, as shown below:
   
   1. public partial class StyleInfo : ContentPage
   2. {
   3. public StyleInfo()
   4. {
   5. InitializeComponent ();
   6. }
   7. }
   InitializeComponent () function(StyleInfo.xaml.cs) is used to call the LoadFromXaml () to instantiate all the objects and call FindbyName () to instantiate all the objects.