Binding and Defining Layout Through XAML in Metro Style Application

Introduction

In this article we are going to explore how to define layouts inside a Metro Style Application and the concept of binding as well. It's the quite same as we have done before in Silverlight; it's not quite different if you have already done programming with Silverlight and Windows Phone 7 you can learn it easily. In this section we will discuss how to define the layout inside the Metro Style Application and later we will binding it through XAML code which is a simple and easy to learn. First ao all we will see how to start to build that Metro Style Application for building that type of application you have to install the Windows 8 operating system and then install Visual Studio 2011. Let us see the steps given below of how to start building your application.

Open Visual Studio 2011
File-->New Project
Select Metro Style Application in C# language
Click OK.

Further we will describe in brief that a Silverlight program is generally a mix of code and XAML. Most often, you'll use XAML for defining the layout of the visuals of your application, and you'll use code for event handling, including all user-input events and all events generated by controls as a result of processing user-input events. Further as much of the object creation and initialization performed in XAML would traditionally be done in the constructor of a page or window class, although XAML is usually concerned with object creation and initialization, certain features of Silverlight provide much more than object initialization would seem to imply.

Experienced programmers encountering XAML for the first time are sometimes resistant to it. I know I was. Everything that we value in a programming language such as C#-required declarations, strong typing, array-bounds checking, tracing abilities for debugging-largely goes away when everything is reduced to XML text strings.

In this section we will learn how to define and bind layout in XAML; further we will have a look at the Panels, Grid And StackPanel. As much we know that we are familiar with these objects but inside it we have to learn how to position your objects such as a grid and whatever you may choose from the toolbox. First of all we will take care of the Panel object; if we want exact positioning then you have to put them inside the Panel control or other container object. Here are some Panel controls which has been provided by XAML layouts named as Grid, Canvas, and StackPanel; they will help you to arrange the positions of controls. Firstly we are going to define its layout description which is given below.

Defining layout

Defining Property Inheritance

To experiment with some XAML, it's convenient to create a project specifically for that purpose. Let's call the project Myfirstmetroapp, and put a TextBlock in the content grid:

<Grid HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="364" Margin="154,45,0,0">
<TextBlock Text="Hiii this is my first Metro App" />
</Grid>

The text shows up in the upper-left corner of the page's client area. Let's make the text italic. You can do that by setting the FontStyle property in the TextBlock:

Defining Property-Element Syntax

Let's remove any FontStyle settings that might still be around, set the TextBlock attributes to these values:

Because this is XML, we can separate the TextBlock tag into a start tag and end tag with nothing in between:

But you can also do something that will appear quite strange initially. You can remove the FontSize attribute from the start tag and set it like this:

Defining Colors and Brushes

Inside this we will learn how to use various types of brushes inside the Metro Style Application. Here you can set them by using the property window and then you can use any type of brush such as SolidColorBrush, LinearGradientBrush and RadialGradientBrush; whatever you want to use you may use. The Grid has a Background property but no Foreground property. The TextBlock has a Foreground property but no Background property. The Foreground property is inheritable through the visual tree, and it may sometimes seem that the Background property is as well, but it is not.

Example:

Code:

<UserControl x:Class="Application3.MainPage"

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-compatibility/2006"

mc:Ignorable="d"

d:DesignHeight="768" d:DesignWidth="1366">

<Grid.Background>

</LinearGradientBrush>

</Grid.Background>

</Grid>

</UserControl>

Further you will see the design of the Metro Style Application which looks like as shown below.

Now we will discuss about binding through XAML code inside the Metro Style Application in which we will see that we have a progress bar and whenever we will click on that bar it will show you how the width of the rectangle is being changed and also see how actually its width has increased so to do that we have to take a progress bar from the toolbox and a textblock and a rectangle; we will bind the width of the rectangle so that on every click of the progress bar the rectangle width increases and the value of the width is also shown in the textblock. A data binding is a link between two properties of two objects, so that when one property changes, the other is updated with that change.

In a typical data binding, a property of one object is updated automatically from a property of another object. The source of a data binding is usually given a name:

<Slider Name="slider"... />
You can break out the target property as a property element and assign to it an object of type Binding:

Let's take an example or a Demo Metro Style Application whose code design is given below and inside that you will also see the binding of objects from one to another.

Code:

<UserControl x:Class="Application2.MainPage"
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-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="768" d:DesignWidth="1366">
<Grid x:Name="MyContentPanel1" Grid.Row="1" Margin="12,0,12,0">

<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Slider Name="slider" Value="100" Grid.Row="0" Maximum ="300" Margin="24" />

<Button Name="btn1" Height="106" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" FontFamily="Comic Sans MS"

FontSize="48" Opacity="9" Content="Resize width of rectangle" Margin="-33,0,135,41" />
<TextBlock Name ="Mytxt" Text ="{Binding ElementName=slider, Path=Value}" Grid.Row="1"
FontSize="48" HorizontalAlignment="Center" VerticalAlignment ="Center" />
<Rectangle Grid.Row="1" Width="{Binding ElementName=slider, Path=Value}"
RenderTransformOrigin="0.5 0.5" Fill ="Cyan" Margin="169,179,197,77" Grid.RowSpan="2">

<Rectangle.RenderTransform>
<RotateTransform x:Name="rotate" Angle="90" />
</Rectangle.RenderTransform>
</Rectangle>
</Grid>
</UserControl>

Explanation: Here we will discuss what we are doing in the XAML code which is given above. Let's look at what this XAML does in more detail. To define rows in a Grid, you add RowDefinition objects to the Grid.Rows collection. You can set properties on the RowDefinition to specify the appearance of the row. You add columns in the same way, using ColumnDefinition objects and the Grid.Columns collection which are given below.

<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>

Use the ElementName property to indicate the name of the source element; use the Path property for the name of the source property, which is the Value property of the Slider. The SliderBindings program includes this binding and lets you experiment with some variations.

Output: Further we have to run the application by pressing F5 and the output regarding the binding is given below.

Output 1: In this output we will see that by default the width of the rectangle width is shown in the figure given below.

Output 2: In this output we will see that whenever we click on the progress bar the width of the rectangle increases gradually.

Here are some other useful resources which may help you.

List View Data Binding in Windows 8 JavaScript Metro Application

Silverlight 2 Web Service Part II - User Defined Type

Consuming JSON service in Windows 8 HTML5 Metro App

Defining Layouts through XAML in Windows Phone 7

Introduction to Windows 8 Metro Style Application