Introduction to React XAML

XAML stands for Extensible Application Markup Language. It is a declarative Markup Language used for creating a User Interface for an application. XAML is most extensively used in WPF for frontend language.  It defines the contents of a webpage like HTML. Users can generate React XAML code using WYSIWYG editor to access programs like Microsoft Expression Studio or Blend for Visual Studio. Not only this, developers can create a XAML code from scratch too. XAML is built using WPF and supports any Windows App. It is a case sensitive and strongly typed language that separates the presentation from business logic. You can check a small example of using the XAML tag for a button:

<Button              x:Name=”button”

Content=”xyz_xaml”

HorizontalAlignment=”Left”

VerticalAlignment=”Top”

Margin=”150, 300, 0, 0”/>

 

Perks of choosing XAML:

  1. XAML is similar to XML syntax.
  2. XAML codes are smaller and easier to execute.
  3. XAML codes are easily understandable as compared to others.
  4. UI is easier to design with XAML instead of code.
  5. We can expect a clear separation between UI (XAML) and UI logic (C#).
  6. The roles of designers and developers are distinguishable.

 

Why XAML?

It is easy to layout User Interface in XAML. Apps become apparent and are made quickly when XAML is used to layout the visual tree controls on the page. 

 

XAML Data binding:

<Label Text=”{Binding FirstName}”/>

 

C# Data binding:

Label firstNameLabe;l= new Label();

firstNameLabel.SetBinding(Label.Text, “FirstName”);

The above example proves that XAML is easily understandable and readable. XAML syntax is much cleaner than C# syntax if control is data-bound to a property in a view model. Xamarin has also introduced a new version “XAML previewer” in both Xamarin Studio and Visual Studio. With the help of this tool, users can view the UI in IDE.

 

How does a XAML page looks like?

<? xml version=”1.0” encoding=“utf-8”?>

<ContentPage xmins=http://xamarin.com/schemas/2014/forms

             xmlns:x=http://schemas/microsoft.com/winfx/2009/xaml

             xmlns:local=“clr-namespace:XamarinFifecycle”

             x:Class =“XamarinLifecycle.MainPage”>

 

           <StackLayout>

               <!—Place new controls here–!>

          <Label text=“Welcome to Xamarin.Forms!”

               HorizontalOptions=”Center”

               VerticalOptions=”CenterAndExpand” />

          </StackLayout>

 

</ContentPage>

 

Here, in the opening <ContentPage> element, Xaml knows that it should instantiate as it has come across a content page. 

 

Properties of calm:

XAML has two properties. One is Attribute property and the other is Element property. 

Attribute properties are declared within the tag of UI component and are easiest and effective to understand. An attribute name will always be its original one but the value should compulsorily be a string. 

Example:

<Label Text =”BURGER AND FRIES” Text Color= “red”/>

It is important to specify a string always because XAML follows the rules of XML.

 We use the other property i.e. the element property when the value is too complex to explain within a simple string. In a blank ContentPage, the element falls under element property. It holds the rest of the content of the page which cannot be handled by a simple string. 

 

Benefits of XAML over Codes:

XAML doesn’t require complex maintenance and is easily modified. It can be easily parsed and edited with the help of Software tools. At times it may be more concise as compared to C# code.

           <StackLayout>

               <!—Place new controls here–!>

          <Label text=“Welcome to Xamarin.Forms!”

               HorizontalOptions=”Center”

               VerticalOptions=”CenterAndExpand” />

          </StackLayout>

 

You will not find any kind of loops, controls, algebraic calculation syntax or any kind of event handlers in XAML. This is the drawback of XAML over C# code because C# helps us to define all these things. 

 

Working of React XAML:

XAML is a declarative language. It defines what and how you want to perform. XAML processor manages the HOW part. XAML processor interprets the XAML file. It also converts the XAML code that describes the UI element. First, the internal code and the C# code are linked together through partial class definition and then the .Net compiler builds the app.

 

How to create XAML applications:
  • Creating and initializing an object: XAML can create and instantiate objects. It is another way to describe how objects need to be created and how they should be initialized before the execution of a program. 

 

  • Resources: Resources are general definitions connected to some object that is used more than once. It has the ability to store the data locally for controls or for the current window or globally for the entire applications. 

 

  • Styles: The XAML framework has several features to enhance the overall appearance of an application. Styles can set some properties of an object and also we can reuse these specific settings across multiple objects for a consistent look. The styles can set only the properties that exist. Like height, weight, font size, etc. We can only specify the default behavior of a control. We can add multiple properties to a style. 

 

  • Templates: Templates enhance the overall appearance of a control. Each control has its default template associated with it which gives the appearance to that control. 

 

  • Animations and Transformations: Like templates, this feature also improves the overall look of your application by building interactivity and movement. We can find animations or effects from the Windows Runtime animation library.

 

Working with App.xaml:

App.xaml is a declaration point of your application and Visual Studio will automatically create it for you when you start a new WPF application. It will also include a code behind the file called App.xaml.css. 

 

App.xaml structure:

<Application x:Class=”xyz.App”

                      xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation

                      xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml

                      StartupUri=”MainWindow.xaml”>

         <Application.Resources>

         </Application.resources>

</Application>

 

App.xaml.cs structure:

Initially, the automatic generated App.xaml will look like this for a new project:

using System;

using System.collections.Generic;

using System.windows;

namespace WpfTutorialSamples

{

     Public partial class App: Application

     {

 

     }

}

To create startup window manually we can do following steps:

<Application x:Class=”xyz.App”

                      xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation

                      xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml

                      Startup=”Application_Startup”>

         <Application.Resources>

 

         </Application.resources>

</Application>

Here, StartupUri is replaced with a Startup event.

We can use the event in code-behind like this:

using System;

using System.collections.Generic;

using System.windows;

namespace WpfTutorialSamples

{

     Public partial class App: Application

     {

           Public partial class App: Application

           {

                 // Create the Startup window

                MainWindow wnd= new MainWindow()

                // Do stuff here, e.g. to the window

               Wnd.Title=” Something else”;

              // Show the window

            Wnd.Show();

        }

   }

}

 

Leave a comment