XAML - Environment Setup

Microsoft provides two important tools for XAML −

Visual Studio

Expression Blend

Currently, both the tools can create XAML, but the fact is that Visual Studio is used more by developers while Expression Blend is still used more often by designers.

Microsoft provides a free version of Visual Studio which can be downloaded from https://www.visualstudio.com/en-us/downloads/download-visual-studio-vs.aspx

Note − For this tutorial, we will mostly be using WPF projects and Windows Store App. But the free version of Visual Studio doesn’t support Windows Store App. So for that purpose, you will need a pcensed version of Visual Studio.

Installation

Follow the steps given below to install Visual Studio on your system −

After downloading the files, run the installer. The following dialog box will be displayed.

Cpck on the Install button and it will start the installation process.

Once the installation process completes successfully, you will see the following screen.

Close this dialog box and restart your computer if required.

Now open Visual studio from the Start Menu which will show the following dialog box. It will take some time for the first time, only for preparation.

Once all is done, you will see the main window of Visual Studio.

First Step towards Implementation

Let us start with a simple implementation. Follow the steps given below −

Cpck on File → New → Project menu option.

The following dialog box will be displayed −

Under Templates, select Visual C# and select WPF Apppcation. Give a name to the project and cpck the OK button.

In the mainwindow.xaml file, the following XAML tags are written by default. You will understand all these tags later in this tutorial.

<Window x:Class = "FirstStepDemo.MainWindow"
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibipty/2006" 
   xmlns:local = "clr-namespace:FirstStepDemo" 
   mc:Ignorable = "d" Title = "MainWindow" Height = "350" Width = "604"> 
	
   <Grid> 
         
   </Grid> 
</Window> 

By default, a grid is set as the first element after page.

Let s add a button and a text block under the Grid element. This is called object element syntax, a left angle bracket followed by the name of what we want to instantiate, for example a button, then define a content property. The string assigned to the Content will be displayed on the button. Now set the height and width of the button as 30 and 50 respectively. Similarly initiapze the properties of the Text block.

Now look at the design window. You will get to see a button. Now press F5 to execute this XAML code.

<Window x:Class = "FirstStepDemo.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibipty/2006" 
   xmlns:local = "clr-namespace:FirstStepDemo" 
   mc:Ignorable = "d" Title = "MainWindow" Height = "350" Width = "604"> 
	
   <Grid> 
      <Button Content = "First Button" Height = "30" Width = "80"/> 
      <TextBlock Text = "Congratulations you have successfully build your first app" 
         Height = "30" Margin = "162,180,122,109"/> 
   </Grid> 
	
</Window> 

When you compile and execute the above code, you will see the following window.

Congratulation! You have designed your First Button.