How to eliminate the RowHeader within a Silverlight DataGrid
I am not a huge fan of the default templates for the Silverlight Controls but, hey at least we have controls now right?
I wanted to eliminate that bulky cell to the left of each row to allow for my DataGrid’s to be a little more concise. Below you will find a complete Style that will accomplish this. You can copy & paste & use in your Silverlight apps.
<Style x:Key="GridWithoutRowHeaders" TargetType="swcd:DataGrid">
<Setter Property="RowBackground">
<Setter.Value><SolidColorBrush Color="#FFF2F2F2"/></Setter.Value>
</Setter>
<Setter Property="AlternatingRowBackground">
<Setter.Value><SolidColorBrush Color="#FFFFFFFF"/></Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="swcd:DataGrid">
<Border BorderBrush="#FF000000" BorderThickness="1">
<Border BorderBrush="#FFFFFFFF" BorderThickness="1">
<Border BorderBrush="#FFA4A4A4" BorderThickness="1">
<Grid Name="RootElement">
<Grid.Resources>
<!-- Focus related animations -->
<Storyboard x:Name="Normal State">
<DoubleAnimation Duration="0:0:0" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity" To="1" />
</Storyboard>
<Storyboard x:Name="Unfocused State">
<DoubleAnimation Duration="0:0:0" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity" To="0" />
</Storyboard>
<ControlTemplate x:Key="TopLeftHeaderTemplate" TargetType="swcd:DataGridColumnHeader">
<Grid Name="RootElement">
<Grid.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0.28,0.71">
<GradientStop Color="#FFF9FAFA" Offset="0"/>
<GradientStop x:Name="StopColor2" Color="#FFEDF1F4" Offset="0.37259"/>
<GradientStop x:Name="StopColor3" Color="#FFE2E8EF" Offset="0.372881"/>
<GradientStop x:Name="StopColor4" Color="#FFC3C9CD" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Line Stretch="Fill" Grid.Column="1" Grid.RowSpan="2" X1="0" X2="0" Y1="0" Y2="1" StrokeThickness="1" Stroke="#FFA4A4A4" />
<Line Stretch="Fill" Grid.ColumnSpan="2" Grid.Row="2" X1="0" X2="1" Y1="0" Y2="0" StrokeThickness="1" Stroke="#FFA4A4A4" />
<!--<Line Stretch="Fill" Grid.RowSpan="2" X1="0" X2="0" Y1="0" Y2="1" StrokeThickness="1" Stroke="{TemplateBinding SeparatorBrush}" Visibility="{TemplateBinding SeparatorVisibility}"/>-->
<Rectangle Stretch="Fill" Width="39" StrokeThickness="2" Stroke="#FFFFFFFF" Grid.RowSpan="2"/>
<Path Margin="1,1,1,0" Stretch="Fill" Data="F1 M 547.239,124.863L 430.795,124.863L 430.795,135.106C 447.845,138.848 467.753,140.997 489.017,140.997C 510.281,140.997 530.188,138.848 547.239,135.106L 547.239,124.863 Z ">
<Path.Fill>
<LinearGradientBrush StartPoint="0.5125,-0.0864589" EndPoint="0.5125,1.00202">
<GradientStop Color="#B3FFFFFF" Offset="0"/>
<GradientStop Color="#3CFFFFFF" Offset="1"/>
</LinearGradientBrush>
</Path.Fill>
</Path>
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="TopRightHeaderTemplate" TargetType="swcd:DataGridColumnHeader">
<Grid Name="RootElement">
<Grid.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0.28,0.71">
<GradientStop Color="#FFF9FAFA" Offset="0"/>
<GradientStop x:Name="StopColor2" Color="#FFEDF1F4" Offset="0.37259"/>
<GradientStop x:Name="StopColor3" Color="#FFE2E8EF" Offset="0.372881"/>
<GradientStop x:Name="StopColor4" Color="#FFC3C9CD" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!--<Line Stretch="Fill" Grid.RowSpan="2" X1="0" X2="0" Y1="0" Y2="1" StrokeThickness="1" Stroke="{TemplateBinding SeparatorBrush}" Visibility="{TemplateBinding SeparatorVisibility}"/>-->
<Line Stretch="Fill" Grid.RowSpan="2" X1="0" X2="0" Y1="0" Y2="1" StrokeThickness="1" Stroke="#FFA4A4A4" />
<Line Stretch="Fill" Grid.ColumnSpan="2" Grid.Row="2" X1="0" X2="1" Y1="0" Y2="0" StrokeThickness="1" Stroke="#FFA4A4A4" />
<Rectangle Stretch="Fill" StrokeThickness="2" Stroke="#FFFFFFFF" Grid.Column="1" Grid.RowSpan="2"/>
<Path Grid.Column="1" Margin="1,1,1,0" Stretch="Fill" Data="F1 M 547.239,124.863L 430.795,124.863L 430.795,135.106C 447.845,138.848 467.753,140.997 489.017,140.997C 510.281,140.997 530.188,138.848 547.239,135.106L 547.239,124.863 Z ">
<Path.Fill>
<LinearGradientBrush StartPoint="0.5125,-0.0864589" EndPoint="0.5125,1.00202">
<GradientStop Color="#B3FFFFFF" Offset="0"/>
<GradientStop Color="#3CFFFFFF" Offset="1"/>
</LinearGradientBrush>
</Path.Fill>
</Path>
</Grid>
</ControlTemplate>
</Grid.Resources>
<Grid.Background>
<SolidColorBrush Color="Transparent" />
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<!-- Row 0 -->
<!--<swcd:DataGridColumnHeader Name="TopLeftCornerHeaderElement" Template="{StaticResource TopLeftHeaderTemplate}" />-->
<Canvas Name="ColumnHeadersPresenterElement" Grid.Column="1"/>
<swcd:DataGridColumnHeader Name="TopRightCornerHeaderElement" Grid.Column="2" Template="{StaticResource TopRightHeaderTemplate}" />
<!-- Row 1 -->
<!--<Canvas Name="RowHeadersPresenterElement" Grid.Row="1"/>-->
<Canvas Name="CellsPresenterElement" Grid.Column="1" Grid.Row="1">
<Canvas.Resources>
<SolidColorBrush x:Key="DefaultVerticalGridlinesBrush" Color="#FFACACAC"/>
<SolidColorBrush x:Key="DefaultHorizontalGridlinesBrush" Color="#FFACACAC"/>
</Canvas.Resources>
</Canvas>
<Rectangle Name="FocusVisualElement" Stroke="#FF400000" StrokeDashArray=".2 4" HorizontalAlignment="Left" VerticalAlignment="Top" StrokeDashCap="Round" IsHitTestVisible="false" Opacity="0" Grid.Column="1" Grid.Row="1"/>
<ScrollBar Name="VerticalScrollbarElement" Orientation="Vertical" Grid.Column="2" Grid.Row="1" Width="18" />
<!-- Row 2 -->
<!--<Rectangle Fill="#FFE7E7E7" Grid.Row="2"/>-->
<ScrollBar Name="HorizontalScrollbarElement" Orientation="Horizontal" Grid.Column="1" Grid.Row="2" Height="18" />
<Rectangle Fill="#FFE7E7E7" Grid.Column="2" Grid.Row="2" />
</Grid>
</Border>
</Border>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>