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