Data Binding with collection and XAML

Dhananjay Kumar
15y
68.1k
0
0

100

Article

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="[email protected]",Image="anuska.jpg"},
                new Person {Name="Asin",Age=26,Email="[email protected]",Image="asin.jpg"},
                new Person{Name="Deepika",Age=25,Email="[email protected]",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>

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

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="[email protected]",Image="anuska.jpg"},
                new Person {Name="Asin",Age=26,Email="[email protected]",Image="asin.jpg"},
                new Person{Name="Deepika",Age=25,Email="[email protected]",Image="deepika.jpg"}
            };
            list1.ItemsSource = persons;
        }
    }
}

Step 7:

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

Step 8:

Bind images to List box.

Add following code

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.

Complete Xaml code will look like

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

Up Next

Ebook Download

View all

Programming XAML

Read by 6.4k people

Download Now!

Learn

View all