Data Template in Silverlight / WPF

OverView:

       This article is about how to use Data Template in silverlight or WPF.

Data Template:

         Template gives you option to change appearance of data item in controls like Grid, ListBox, ComboBox etc, for example simple ComboBox contain multiple value in drop down format but with the help of Template we can change the appearance of it like drop down with image enclosed it and even something more.

When using data template in control it replace the existing appearance with new appearance,

Create Data Template:

It can be create in different ways

1.  in XAML

2. in Code behind

3. Using XamlReader

In Xaml:

In this method it’s directly defined in XAML page under <UserControl.Resources> section,

Example:

<UserControl.Resources>

        <DataTemplate>

            <ComboBox x:Name="ddChar" SelectionChanged="ddChar_SelectionChanged">

                <ComboBoxItem>A</ComboBoxItem>

                <ComboBoxItem>B</ComboBoxItem>

                <ComboBoxItem>C</ComboBoxItem>

                <ComboBoxItem>D</ComboBoxItem>

                <ComboBoxItem>F</ComboBoxItem>

                <ComboBoxItem>G</ComboBoxItem>

            </ComboBox>

        </DataTemplate>

    </UserControl.Resources>

It can be applied to any control in code behind by using Resources Dictionary, its nothing but key value pair dictionary which hold some set of resources, template etc

lstNames = Resources["oddNumberTemplate"] as DataTemplate;

lstNames is an ListBox, in which we are binding our ComboBox, this method can be used in both Silverlight and WPF

In Code Behind:

 This method can only be used in WPF, Silverlight doesn’t support direct creation of DataTemplate, it can be created by

Example:

ListView lstView; //  ListView

// create and add the data template to the parent control

DataTemplate dTemp = new DataTemplate(typeof(ComboBox ));

lstView.ItemTemplate = dTemp;

// create and add the Combo box to the data template

FrameworkElementFactory cmbElement =

    new FrameworkElementFactory(typeof(ComboBox ));

dTemp.VisualTree = cmbElement;

// Create binding

Binding bind = new Binding();

bind.Path = new PropertyPath("ComboBoxItem");

bind.Mode = BindingMode.TwoWay;

// set the binding in the Combo Box

cmbElement.SetBinding(ComboBox.ComboBoxItem, bind);

cmbElement.SetValue(ComboBox.ComboBoxItem, "hello");

Steps:

1.  Create DataTemplate by specifying type ex: ComboBox

2. Attach Created Template to parent Element ItemTemplate

3. Create FrameworkElementFactory by specifying type of DataTemplate

4. Attach DataTemplate to Visual Tree.

5. Create Binding by specifying mode and path

Using XAML Reader:

It can be used in both Silverlight and WPF, but widely used in Silverlight, it can be created with the help of string builder or string

Example:

StringBuilder xamlData = new StringBuilder();

     xamlData.Append("<DataTemplate xmlns='http://schemas.microsoft.com/client/2007'  xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'>");

     xamlData.Append("<ComboBox ");

     xamlData.Append("SelectionChanged=\"ComboBox_SelectionChanged\" ");

     xamlData.Append(">");

     foreach (var number in Enumerable.Range(1,100))

        {

          xamlData.Append(String.Format("<ComboBoxItem Content='{0}'  />", number ));

        }

     xamlData.Append("</ComboBox> ");

     xamlData.Append("</DataTemplate>");

Add DataTemplate(ComboBox) in silverlight page programmatically

Here we have DataGridTemplateColumn,add this template column into datagrid as Follow.

        DataGridTemplateColumn template = new DataGridTemplateColumn();
               templateColumn.Header = "";
               templateColumn.CellTemplate = (DataTemplate)
               XamlReader.Load(@xamlData);
        this.dataGrid1.Columns.Add(template);