In this article we are going to learn how to bind data in a binding control using a custom template in Windows Store Apps using XAML and C#. We learn how to design the template to display the item in the ListView or GridvView.
We can customize the display of data bound items using a DataTemplate. A DataTemplate of binding controls enables the developer to customize how list items are displayed in a control.
A DataTemplate is followed by the ContentTemplate property of the control or it can be under the ItemTemplate if you use an Items control. The DataTemplate can contain only one child element, but if you want to put more elements in it, then you must use a parent content control like Stackpanel or Grid.
This article shows you an example of how to create a DataTemplate control and how to bind the date in it.
Procedure to be used
Step 1
Create a blank application of Windows Store Apps using C#.
Step 2
In this step I create a custom class that contains the data to be bound; see:
public class Employee
{
public string Name { get; set; }
public string City { get; set; }
public string Desig { get; set; }
}
public class EmployeeList
{
List<Employee> Emp = new List<Employee>();
public EmployeeList()
{
Emp.Add(new Employee() { Name = "Deepak Kumar", City = "Delhi", Desig = "Accountant" });
Emp.Add(new Employee() { Name = "Amit Singh", City = "Bangluru", Desig = "Engineer" });
Emp.Add(new Employee() { Name = "Manish", City = "Noida", Desig = "Developer" });
Emp.Add(new Employee() { Name = "Gaurav Sharma", City = "Australia", Desig = "Counsellor" });
}
public List<Employee> GetEmployeeList()
{
return Emp;
}
}
Step 3
In the MainPage.XAML file I put a ListView Control. You will see the data template definition. The data template contains a StackPanel with three TextBlock controls. If we use a DataTemplate binding then the TextBlock controls are bound to the properties name of the DataSource that I will supply later. For each bound item, the binding provides the path to the property on the Recording object.
<Page
x:Class="CollectionViewSourceDataBidig.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:CollectionViewSourceDataBidig"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid >
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<ListView VerticalAlignment="Center" HorizontalAlignment="Center" x:Name="EmployeeRecord" ItemsSource="{Binding}">
<ListView.ItemTemplate>
<DataTemplate>
<Border Background="Brown" Width="200" CornerRadius="10" HorizontalAlignment="Left">
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding Path=Name}" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Center" FontWeight="Bold"/>
<TextBlock Text="{Binding Path= City}" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Center" FontWeight="Bold"/>
TextBlock Text="{Binding Path=Desig}" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Center" FontWeight="Bold"/>
</StackPanel>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</Page>
Step 4
In the MainPage.XAML.cs file give the source to the ListView control by setting the DataContext property of the ListView.
EmployeeList Emp = new EmployeeList();
EmployeeRecord.DataContext = Emp.GetEmployeeList();
Step 5
Output
Run the app using F5.
You will see that all the items are bound to that DataTemplate as we defined earlier and display it.
![Template-Binding-in-windows-store-apps.jpg]()