Question

I am just started learning silverlight and it’s controls. I am pretty much sure we can create this kind of headers for datagrid using silverlight too like other technologies like JQuery and Flex. But i am not sure how to do it. Can somebody suggest some examples or sites where i can learn to customize the headers like this?

   _______________________________________________________
   |       Name          |   Age     |        Marks      |
   |_____________________|           |___________________|
   |First Name| Last Name|           |Sub1 | Sub2  |Sub3 |
   |_____________________|___________|___________________|

Answer 1

Try This Code In Xaml:

   <UserControl  x:Class="SilverlightApplication16.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
    xmlns:dataprimitives="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls.Data"

mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<UserControl.Resources>
    <Style x:Key="DataGridBaseHeaderStyle"    
           TargetType="dataprimitives:DataGridColumnHeader">
        <Setter Property="FontWeight" Value="Bold" />
    </Style>
    <Style x:Key="NameHeaderStyle"   TargetType="dataprimitives:DataGridColumnHeader"     
           BasedOn="{StaticResource DataGridBaseHeaderStyle}">
        <Setter Property="Foreground" Value="#FF000000"/>
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="SeparatorBrush" Value="#FFC9CACA"/>
        <Setter Property="Padding" Value="8"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <Grid x:Name="Root">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <Rectangle x:Name="BackgroundRectangle" Fill="#FF1F3B53" Stretch="Fill" Grid.ColumnSpan="2"/>
                        <Rectangle x:Name="BackgroundGradient" Stretch="Fill" Grid.ColumnSpan="2">
                            <Rectangle.Fill>
                                <LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
                                    <GradientStop Color="#FCFFFFFF" Offset="0.015"/>
                                    <GradientStop Color="#F7FFFFFF" Offset="0.375"/>
                                    <GradientStop Color="#E5FFFFFF" Offset="0.6"/>
                                    <GradientStop Color="#D1FFFFFF" Offset="1"/>
                                </LinearGradientBrush>
                            </Rectangle.Fill>
                        </Rectangle>
                        <Grid HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="20" />
                                <RowDefinition Height="1" />
                                <RowDefinition Height="20" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="100"/>
                                <ColumnDefinition Width="1" />
                                <ColumnDefinition Width="100"/>
                            </Grid.ColumnDefinitions>
                            <!-- Row 0 -->
                            <ContentPresenter Content="Name"                                       
                                              VerticalAlignment="Center" HorizontalAlignment="Center"                                        Grid.ColumnSpan="3" />
                            <!-- Row 1 -->
                            <Rectangle Fill="#FFC9CACA" VerticalAlignment="Stretch" Height="1"                                 Visibility="Visible" Grid.Row="1" Grid.ColumnSpan="3" />
                            <!-- Row 2 -->
                            <ContentPresenter Content="First Name " Grid.Row="2" VerticalAlignment="Center"                                        HorizontalAlignment="Center" />
                            <Rectangle Fill="#FFC9CACA" VerticalAlignment="Stretch" Width="1"                                  Visibility="Visible" Grid.Row="2" Grid.Column="1" />
                            <ContentPresenter Content="Last Name" Grid.Row="2" Grid.Column="2"                                        VerticalAlignment="Center" HorizontalAlignment="Center" />
                        </Grid>
                        <Rectangle x:Name="VerticalSeparator" Fill="#FFC9CACA"                           
                                   VerticalAlignment="Stretch" Width="1" Visibility="Visible"               
                                   Grid.Row="1" Grid.Column="1"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="MarkHeaderStyle"   TargetType="dataprimitives:DataGridColumnHeader"     BasedOn="{StaticResource DataGridBaseHeaderStyle}">
        <Setter Property="Foreground" Value="#FF000000"/>
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="SeparatorBrush" Value="#FFC9CACA"/>
        <Setter Property="Padding" Value="8"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <Grid x:Name="Root">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <Rectangle x:Name="BackgroundRectangle" Fill="#FF1F3B53" Stretch="Fill" Grid.ColumnSpan="2"/>
                        <Rectangle x:Name="BackgroundGradient" Stretch="Fill" Grid.ColumnSpan="2">
                            <Rectangle.Fill>
                                <LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
                                    <GradientStop Color="#FCFFFFFF" Offset="0.015"/>
                                    <GradientStop Color="#F7FFFFFF" Offset="0.375"/>
                                    <GradientStop Color="#E5FFFFFF" Offset="0.6"/>
                                    <GradientStop Color="#D1FFFFFF" Offset="1"/>
                                </LinearGradientBrush>
                            </Rectangle.Fill>
                        </Rectangle>
                        <Grid HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}" >
                            <Grid.RowDefinitions>
                                <RowDefinition Height="20" />
                                <RowDefinition Height="1" />
                                <RowDefinition Height="20" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="100"/>
                                <ColumnDefinition Width="1" />
                                <ColumnDefinition Width="100"/>
                                <ColumnDefinition Width="1" />
                                <ColumnDefinition Width="100"/>
                            </Grid.ColumnDefinitions>
                            <!-- Row 0 -->
                            <ContentPresenter Content="Marks"                                        VerticalAlignment="Center" HorizontalAlignment="Center"                                        Grid.ColumnSpan="6" />
                            <!-- Row 1 -->
                            <Rectangle Fill="#FFC9CACA" VerticalAlignment="Stretch" Height="1"                                 Visibility="Visible" Grid.Row="1" Grid.ColumnSpan="5" />
                            <!-- Row 2 -->
                            <ContentPresenter Content="Sub1" Grid.Row="2" VerticalAlignment="Center"                                        HorizontalAlignment="Center" />
                            <Rectangle Fill="#FFC9CACA" VerticalAlignment="Stretch" Width="1"                                  Visibility="Visible" Grid.Row="2" Grid.Column="1" />
                            <ContentPresenter Content="Sub2" Grid.Row="2" Grid.Column="2"                                        VerticalAlignment="Center" HorizontalAlignment="Center" />
                            <Rectangle Fill="#FFC9CACA" VerticalAlignment="Stretch" Width="1"                                  Visibility="Visible" Grid.Row="2" Grid.Column="3" />
                            <ContentPresenter Content="Sub3" Grid.Row="2" Grid.Column="4"                                        VerticalAlignment="Center" HorizontalAlignment="Center" />
                        </Grid>
                        <Rectangle x:Name="VerticalSeparator" Fill="#FFC9CACA"                            
                                   VerticalAlignment="Stretch" Width="1" Visibility="Visible"                      
                                   Grid.Row="1" Grid.Column="1"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
    <sdk:DataGrid AutoGenerateColumns="False" Height="100" HorizontalAlignment="Left" Margin="12,101,0,0" Name="dataGrid1" VerticalAlignment="Top" Width="598">
        <sdk:DataGrid.Columns>
            <sdk:DataGridTemplateColumn Header="Tue" HeaderStyle="{StaticResource NameHeaderStyle}">
                <sdk:DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <TextBox Text="{Binding FistName}"/>
                            <Rectangle Fill="#FFC9CACA" VerticalAlignment="Stretch" Width="1" />
                            <TextBox Text="{Binding LastName}" Margin="2,0,0,0"/>
                        </StackPanel>
                    </DataTemplate>
                </sdk:DataGridTemplateColumn.CellTemplate>
            </sdk:DataGridTemplateColumn>
            <sdk:DataGridTemplateColumn   HeaderStyle="{StaticResource DataGridBaseHeaderStyle}" CanUserReorder="True" Header="Age" CanUserResize="True" CanUserSort="True" Width="Auto" />
            <sdk:DataGridTemplateColumn Header="Tue" HeaderStyle="{StaticResource MarkHeaderStyle}">
                <sdk:DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <TextBox Text="{Binding Subject1}"/>
                            <Rectangle Fill="#FFC9CACA" VerticalAlignment="Stretch" Width="1" />
                            <TextBox Text="{Binding Subject2}" Margin="2,0,0,0"/>
                            <Rectangle Fill="#FFC9CACA" VerticalAlignment="Stretch" Width="1" />
                            <TextBox Text="{Binding Subject3}" Margin="2,0,0,0"/>
                        </StackPanel>
                    </DataTemplate>
                </sdk:DataGridTemplateColumn.CellTemplate>
            </sdk:DataGridTemplateColumn>
        </sdk:DataGrid.Columns>
    </sdk:DataGrid>
</Grid>