Reader Level:
TUTORIAL

Data Binding with collection and XAML

By Dhananjay Kumar on Dec 29, 2008
This tutorial will teach, how to bind XAML List Box with List collection.
  • 0
  • 0
  • 45037

Objective:

Here in this tutorial we are going to bind data from a collection (LIST) to XAML.

We are going to display Image, Name, Age and Email id of a Person.

Output would be something like below.


 
Step 1:

Open Visual Studio 2008; create a new project as WPF application. Give this name as Displayed here.

Step 2:

Add a business logic class.

Right click in solution explorer then add a new class called Person.


 
Step 3:

Add following code in Person.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace SimpleDataBinding
{
    class Person
    {
        public string Name { get; set; }
        public int Age { get; set; }
        public string Image { get; set; }
        public string Email { get; set; }
    }
}

Step 4:

Add image in Project Folder

Right Click on Solution Explorer and add existing Item. Then browse for image on your PC. Add all images in project.

I have added here, Anuska.jpg, Deepika.jpg, Asin.jpg

Step 5:

Create a List of persons. Make sure you are creating list inside constructor of Window.  Here I am creating list persons as follows.

Add the following code in Window.xaml.cs file.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace Display
{
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
            List<Person> persons = new List<Person>()
            {
                new Person{Name="Anuska Sharama",Age=21,Email="anuska@xyz.com",Image="anuska.jpg"},
                new Person {Name="Asin",Age=26,Email="asin@xyz.com",Image="asin.jpg"},
                new Person{Name="Deepika",Age=25,Email="deepika@xyz.com",Image="deepika.jpg"}
            };
        }
    }
}

Step 6:

Now it is time to write XAML code and bind collection persons to List of XAML
Create a Listbox in XAML as follows

      <ListBox x:Name="list1">          

        </ListBox>

Name it as list1. Then bind this list1 to collection persons.  So again go to Windows.xaml.cs file and add this line of code after creating collection persons
list1.ItemsSource = persons;

Window1.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace Display
{
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>

    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
            List<Person> persons = new List<Person>()
            {
                new Person{Name="Anuska Sharama",Age=21,Email="anuska@xyz.com",Image="anuska.jpg"},
                new Person {Name="Asin",Age=26,Email="asin@xyz.com",Image="asin.jpg"},
                new Person{Name="Deepika",Age=25,Email="deepika@xyz.com",Image="deepika.jpg"}
            };
            list1.ItemsSource = persons;
       
}
    }
}

Step 7:

Now add a Item Template and Data template inside listbox in xaml file.

<ListBox x:Name="list1">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
</
ListBox>

Step 8:

Bind images to List box.

Add following code

<Image Source="{Binding Image}"  Height="100" Stretch="UniformToFill" />

If you run at this point, you should be able to see images as output.

Step 9:

Now again add Stack panel with orientation Vertical. Then add three labels to display Name, age and email.

<StackPanel Orientation="Vertical">
                            <Label FontFamily="Tahoma" FontSize="20" Content="{Binding Name}" />
                            <Label FontFamily="Tahoma" FontSize="20" Content="{Binding Age}" >
                            <Label FontFamily="Tahoma" FontSize="20" Content="{Binding Email}" />
</
StackPanel>

Complete Xaml code will look like

<Window x:Class="Display.Window1"
    xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
    xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
    Title="Window1" Height="300" Width="300">
    <Grid>
        <ListBox x:Name="list1">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Image Source="{Binding Image}"  Height="100" Stretch="UniformToFill" />
                        <StackPanel Orientation="Vertical">
                            <Label FontFamily="Tahoma" FontSize="20" Content="{Binding Name}" />
                            <Label FontFamily="Tahoma" FontSize="20" Content="{Binding Age}" />
                            <Label FontFamily="Tahoma" FontSize="20" Content="{Binding Email}" />
                        </StackPanel>
                    </StackPanel>                   
               
</DataTemplate>
            </ListBox.ItemTemplate>
       </ListBox>
      </Grid>
</
Window>

Step 10:  Run the code to get the desired output.

Dhananjay Kumar

Dhananjay kumar is an independent trainer, a consultant and a programmer from India. He has mentored more than 1000 professionals and known for his unique way of teaching. He has been part of the multiple projects for bi... Read more

Personal Blog: http://debugmode.net/
COMMENT USING