XAML Designer Data Bound in Windows Store Apps

Introduction

This article explains how to bind data to the XAML designer in Windows Store apps. Windows Store apps allow setting binding properties using the dartboard and the properties windows. In this example we are discussing how to bind data to a UI Element control.

How to bind data to XAML designer in Windows Store apps

Step 1

Open Visual Studio 2012 and start a new Windows Store apps project.

Step 2

Now go to the "MainPage.xaml.cs" page and add the following code to your application. After adding the code, build your application.

public class Employee

    {

        public string Name

        {

            get { return "Aman"; }

            set { value = "Aman"; }

        }

        public string Role

        {

            get { return "Developer"; }

            set { value = "Developer"; }

        }

        public int Salary

        {

            get { return 60000; }

            set { value = 60000; }

        }

        public string Address

        {

            get { return "Delhi"; }

            set { value = "Delhi"; }

        }

    }

Step 3

Go to the "MainPage.xaml" page, select Grid. and go to the Grid properties window.

Step 4

In the properties window go to the "Common" option and click on "New" on DataContext.

Step 5

In the select object window, select the class name under the project name and click on "OK".

Step 6

Now add four "Text Block" controls to the application, as in the following:

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

   <Grid.DataContext>

       <local:Employee/>

   </Grid.DataContext>

   <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" FontSize="20" Margin="463,254,0,0"/>

   <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" FontSize="20" Margin="463,308,0,0"/>

   <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" FontSize="20" Margin="463,361,0,0"/>

   <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" FontSize="20" Margin="463,401,0,0"/>

</Grid>

Step 7

Select the first "Text Block" control and go to the properties window. In the properties window click on "Text Binding" under common and select "Create Data Binding".

Step 8

The Data Binding window will be opened. Select the value that you want to display with this control and click on "OK". Repeat this step for all controls

Bi

Step 9

After doing the binding, run the application. The result will be as in the following: