Introduction to Blend and XAML

Suresh M
May 21, 2014

10.3k
0
0
- facebook
- twitter
- linkedIn
- Reddit
- WhatsApp
- Email
- Print
- Other Artcile

XAML

In this part, we will see XAML and Blend. XAML is similar to XML and HTML and is the EXtensible Application Markup Language for designing controls in a Windows Phone application page. In a Windows Phone application, we can see the file name as “MainPage.xaml” called a XAML page. By using this we can create all the controls in our application. Now we will see some example controls designed using XAML.

Create a new project and name it “XAMLandBlend”. Now our project looks like the following screen.

Now we will create a Button, TextBox, TextBlock. Before that see the XAML page that looks like the following screen. You can see the XAML page in the right hand side of your application page.

In the preceding screen we see our XAML page and that arrow mark indicates that we will design our control button, TextBox and textblock.

Write the following code:

Now you can see the layout page new button, the textblock and TextBox look like the following screen:

Blend

In this part we will see how to design the User Interface (UI) of a Windows Phone 8 application using Expression Blend. Expression Blend is a tool to design the applications rich user interface. It is embedded with your Visual Studio; you don't need to install it.
You can use this tool in one of two forms, one is directly by designing by Expression Blend and the other one is Visual Studio onwards.

Using Expression Blend directly

To start Expression Blend press the WIN key and type Blend. You will then see the Expression Blend application as in the following screen:

Run this Expression Blend application and create a new project. Select Windows Phone (select your language and target OS). You can open the project you created also.

In my case we will create a new project named “Blend”. You can see the screen below.

Now to design the button in four styles. Drag and drop 4 button controls to your application page and select button 1 and see the properties menu in the right side, select the Brush tab. You see three properties that are the Background BorderBrush and Foreground.

Background is for the button background color, Border brush is for the Button border color and Foreground is for the button name color change that as you wish your page looks as seen in the screen below.

Depending on your requirements design the project and finally save it.

Now to open this project using Visual Studio.

Procedure

Start Visual Studio 2012. Select open project and select your blend project.

Now the blend project will be opened (looks as in the screen below) and start coding it.

Procedure to design (Using Visual Studio Onwards)

We will previous example Blend application.

In this example we will design a new button using Blend.

Drag and drop the control button from the toolbox then the screen looks as in the following:

In Solution Explorer select “MainPage.xaml” then right-click on “MainPage.xaml” and select Open in Blend like the following screen:

The MainPage.xaml will open in Blend in that select the button and right-click on that button and select Edit Template on that select create Empty as shown as in the following screen:

Now the popup window is opened as in the following screen don't change anything on that, click OK.

Then see the Objects and Timeline panel. Right-click on “Grid” and select the “change layout type”. In that select the Border as shown below:

Now we will design the button, in the properties of the appearance set the Border thickness to “3” and the corner radius to 20 then set the button width to 176 and height to 61 your customized, set the border and background color as you want, now the button is as shown in the following screen:

Then we want to name the button so in the controls panel drag and drop a textblock under Objects and the timeline border.
Now design the textblock as you wish like a button and now the screen looks as in the following: