Monday, January 7, 2013

WPF Simple Data Template Example



Simple Data Template Example

Step 1:

In the simplest form, we can create list box in the following was where we declare the list items within list box tag.


<Window x:Class="DataBindingExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:DataBindingExample"
        Title="MainWindow" Height="350" Width="525"
        >
    <Grid>
        <ListBox>
            <ListBoxItem>Payroll</ListBoxItem>
            <ListBoxItem>Trading</ListBoxItem>
            <ListBoxItem>Sales</ListBoxItem>
        </ListBox>
    </Grid>
</Window>




Step 2:

Now, for the we can create the list from an enumeration of objects ( in this case, list of department) instead of declaring list box item in xaml. So let us define a class:

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

namespace DataBindingExample
{

    public class Department
    {
        private string _name;
        private int _numemp;

        public int Numemp
        {
            get { return _numemp; }
            set { _numemp = value; }
        }

        public string Name
        {
            get { return _name; }
            set { _name = value; }
        }
    }


    public class Departments
    {
        public List<Department> AllDepartments
        {
            get
            {
                return new List<Department>()
                {
                    new Department{Name = "Payroll", Numemp=100},
                    new Department {Name="Trading", Numemp=500},
                    new Department{Name = "Sales", Numemp=1000},
                };
            }
        }
    }

}



Then bind this list of departments as the ItemsSource property of ListBox.

<Window x:Class="DataBindingExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:DataBindingExample"
        Title="MainWindow" Height="350" Width="525"
        >
    <Window.Resources>
        <local:Departments x:Key="depts"></local:Departments>
    </Window.Resources>
    <Grid>
      
        <ListBox ItemsSource="{Binding Source={StaticResource ResourceKey=depts},
Path=AllDepartments}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Label Content="{Binding Path=Name}"></Label>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</Window>


Notice, above a “Department” class was defined. Another class “Departments” is defined which has a public property called “AllDepartments”.
Inside xaml, a resource is declared with key as “depts” which is used as the binding of ItemsSource as StaticResource which represents a list of “Department” objects.
List box item template is defined as data template displaying a label where content of the label is bound to “Name” property of the each “Department” object whining the list of department that is bound to the list box as ItemsSource.


Step 3:


Now let us also move the DaTaTemplate declaration into resource section.


<Window x:Class="DataBindingExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:DataBindingExample"
        Title="MainWindow" Height="350" Width="525"
        >
    <Window.Resources>
        <local:Departments x:Key="depts"></local:Departments>
        <DataTemplate x:Key="deptDataTemplt">
            <Label Content="{Binding Path=Name}"></Label>
        </DataTemplate>
    </Window.Resources>
    <Grid>      
        <ListBox Width="75" Height="100" ItemsSource="{Binding Source={StaticResource
ResourceKey=depts}, Path=AllDepartments}"
                 
ItemTemplate="{StaticResource ResourceKey=deptDataTemplt}">
          
        </ListBox>
    </Grid>
</Window>


See how the same DataTemplate section is moved to resources section and given a key and it is then used with ListBox declarion as resource key value of ItemTemaplate property.



Step 4:


Now let us just play with the DataTemplate called deptDataTemplt that we just created. Instead of just “Name” we can display an image, Name and NumEmp value as follows:

<DataTemplate x:Key="deptDataTemplt">
            <StackPanel Orientation="Horizontal">
                <Image
Source="C:\Users\Public\Pictures\Sample Pictures\Chrysanthemum.jpg"
Width="20"></Image>
                <Label Content="{Binding Path=Name}"></Label>
                <Label Content="{Binding Path=NumEmp}"></Label>
            </StackPanel>
</DataTemplate>




No comments:

Post a Comment