Binding a Control to a Single Item and a Collection of Objects In Windows Store Apps

In this article I will explain how to bind a control to a single value or item and a collection of object.s

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.