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.