How to eliminate the RowHeader within a Silverlight DataGrid

So 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>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s