Introduction

Sometimes it is necessary to bind only a single item or sometimes multiple items (a collection of items) into a single control. In this article I explain how to bind an item to a single control as well as multiple items to a single control. To do this use the following steps.

Step 1

First open the Visual Studio 2012 RC and click on File -> New -> Project. Then a window appears; in it select Windows Store inside the Visual C# from the left pane and blank page from the center pane and give the name of the application that you want to give then click on the ok button.

Step 2

1. Binding a Control to a Single item

To bind a control to a single item first write the code in the MainPage.xaml file as:

<Page

x:Class="App4.MainPage"

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

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

xmlns:local="using:App4"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d">

<Grid Background="#FFDC6767">

<Grid x:Name="LayoutRoot">

<Grid.Background>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="Black"/>

<GradientStop Color="#FFB0A8A8" Offset="1"/>

</LinearGradientBrush>

</Grid.Background>

<TextBox x:Name="textBox1" Text="{Binding}" FontSize="30" IsReadOnly="True" TextWrapping="Wrap" AcceptsReturn="True" Margin="141,324,202,342" />

</Grid>

</Grid>

</Page>

Write the code in the MainPage.xaml.cs file as:

namespace App4

{

public sealed partial class MainPage : Page

{

public MainPage()

{

InitializeComponent();

// Set the data context to a new Recording.

textBox1.DataContext = new Employee("Richa Garg", "Delhi",

new DateTime(2012, 6, 12));

}

// A simple business object

public class Employee

{

public Employee() { }

public Employee(string EmployeeName, string EmployeeAddress, DateTime JoiningDate)

{

Name = EmployeeName;

Address = EmployeeAddress;

DateOfJoining = JoiningDate;

}

public string Name { get; set; }

public string Address { get; set; }

public DateTime DateOfJoining { get; set; }

// Override the ToString method.

public override string ToString()

{

return Name + " Lives in " + Address + " Joined the Company From: " + DateOfJoining.ToString("d");

}

}

}

}

Now Run the application by pressing F5. The output will look like:

Binding-a-Control-In-a-Single-Item-In-Windows-8-Apps.jpg

2. Binding a control to a collection of items

In order to do this write the code in the MainPage.xaml file as:

<Page

x:Class="App4.MainPage"

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

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

xmlns:local="using:App4"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d">

<Grid Background="#FFDC6767">

<Grid x:Name="LayoutRoot">

<Grid.Background>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="Black"/>

<GradientStop Color="#FFB0A8A8" Offset="1"/>

</LinearGradientBrush>

</Grid.Background>

<ListBox x:Name="listbox1" ItemsSource="{Binding}" FontSize="25" Margin="293,359,305,119"/>

</Grid>

</Grid>

</Page>


Add a class and write the code in this like:

namespace App4

{

public class Employee

{

public Employee() { }

public Employee(string EmployeeName, string EmployeeAddress, DateTime JoiningDate)

{

Name = EmployeeName;

Address = EmployeeAddress;

DateOfJoining = JoiningDate;

}

public string Name { get; set; }

public string Address { get; set; }

public DateTime DateOfJoining { get; set; }

// Override the ToString method.

public override string ToString()

{

return Name + " Lives in " + Address + " Joined the Company From: " + DateOfJoining.ToString("d");

}

}

}

Write the code in the MainPage.xaml.cs file as:

namespace App4

{

public sealed partial class MainPage : Page

{

public List<Employee> emp=new List<Employee>();

public MainPage()

{

InitializeComponent();

emp.Add(new Employee("Richa Garg", "Delhi",new DateTime(2012, 6, 12)));

emp.Add(new Employee("Megha Goyal","Hapur", new DateTime(2012, 4, 3)));

emp.Add(new Employee("Gaurav Gupta","Delhi", new DateTime(2012, 2, 6)));

// Set the data context for the list box.

listbox1.DataContext=emp;

}

// A simple business object

public class Employee

{

public Employee() { }

public Employee(string EmployeeName, string EmployeeAddress, DateTime JoiningDate)

{

Name = EmployeeName;

Address = EmployeeAddress;

DateOfJoining = JoiningDate;

}

public string Name { get; set; }

public string Address { get; set; }

public DateTime DateOfJoining { get; set; }

// Override the ToString method.

public override string ToString()

{

return Name + " Lives in " + Address + " Joined the Company From: " + DateOfJoining.ToString("d");

}

}

}

}

Now run the application; the output will looks like:

Binding-a-control-with-a-collection-of-items-In-Windows-8-Apps.jpg

Summary

In this article I explained how to bind the control to a single object or to a collection of objects.