Add DataTemplate in Silverlight

In this blog we learn how to add DataTemplate in Silverlight.

Introduction : This blog demonstrates How we can add DataTemplate programmatically

In silverlight application as well as we can DataTemplate on silverlight Page.

Step1 : Add DataTemplate(CheckBox) in silverlight page programmatically

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

        DataGridTemplateColumn templateColumn = new DataGridTemplateColumn();
               templateColumn.Header = "";
               templateColumn.CellTemplate = (System.Windows.DataTemplate)
               XamlReader.Load(@"<DataTemplate 
               xmlns='http://schemas.microsoft.com/client/2007' 
               xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'>                                                   
              <CheckBox ></CheckBox> </DataTemplate>");
        this.dataGrid1.Columns.Add(templateColumn);

We can template columns in datagrid on dataGrid1_AutoGeneratingColumn

Event as below.Here set flat true for avoiding addition of columns in datagrid.
 
        bool chkflag = true;
        void dataGrid1_AutoGeneratingColumn(object sender,  
        DataGridAutoGeneratingColumnEventArgs e)
        {
            if (chkflag == true)
            {
                DataGridTemplateColumn templateColumn = new DataGridTemplateColumn();
                templateColumn.Header = "";
                templateColumn.CellTemplate = (System.Windows.DataTemplate)
                XamlReader.Load(@"<DataTemplate 
                xmlns='http://schemas.microsoft.com/client/2007'  
                xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'>
                <CheckBox ></CheckBox> </DataTemplate>");
                this.dataGrid1.Columns.Add(templateColumn);
            }
        }

Its look as following.



Step 2 : Add DataTemplate(Button) in silverlight page programmatically
Add Button Control In Datagrid as their datagridTempleteColumns.

        bool chkflag = true;
        void dataGrid1_AutoGeneratingColumn(object sender, 
        DataGridAutoGeneratingColumnEventArgs e)
        {
            if (chkflag == true)
            {
                 DataGridTemplateColumn templateColumn1 = new DataGridTemplateColum();
                 templateColumn1.Header = "";
                 templateColumn1.CellTemplate = (System.Windows.DataTemplate)
                 lReader.Load(@"<DataTemplate 
                 Xamxmlns='http://schemas.microsoft.com/client/2007'   
                 xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'>  
                 <Button Content='Button' Width='50' ></Button> </DataTemplate>");
                 this.dataGrid1.Columns.Add(templateColumn1);
                 chkflag = false;
            } 
        }
Its look like as following.

Summary : We can create DataTemplete Programmatically as well on page using UserControl.Resource.



Step 3 : Add DataTemplate on silverlight page (UserControl.Resource)

Add DataTemplete on silverlight page using their UserControl.Resource

<UserControl.Resources>
        <DataTemplate x:Key="datatemplateaccount">
            <HyperlinkButton Content="Open" Tag="{Binding Id}"
                                 NavigateUri="http://www.c-sharpcorner.com/"
                                 TargetName="LayoutRoot" 
                                 VerticalAlignment="Center"></HyperlinkButton>
        </DataTemplate>
    </UserControl.Resources>
 
<sdk:DataGrid AutoGenerateColumns="True" Height="195" HorizontalAlignment="Left" 
                   Margin="56,29,0,0" Name="dataGrid1" VerticalAlignment="Top"
                   Width="305" >
            <sdk:DataGrid.Columns>
                <sdk:DataGridTemplateColumn CanUserReorder="True" 
                        CanUserResize="True" CanUserSort="True" Width="Auto">
                     <sdk:DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <HyperlinkButton Content="Open" Tag="{Binding Id}"
                                 NavigateUri="http://www.c-sharpcorner.com/"
                                 TargetName="LayoutRoot" 
                                 VerticalAlignment="Center"></HyperlinkButton>
                        </DataTemplate>
                    </sdk:DataGridTemplateColumn.CellTemplate>
                </sdk:DataGridTemplateColumn>
            </sdk:DataGrid.Columns>
        </sdk:DataGrid>

Its look like as following.