Change background color of Datagrid Header in Silverlight 2.0 RTW

Question

I want to change background color of Datagrid header in Silverlight 2.0 RTW

Answer 1

You can use the HeaderStyle property:

<data:DataGridTextColumn Header="Group"  HeaderStyle="{StaticResource aHeaderStyle}">

Then define the style like this

<UserControl.Resources>
    <Style TargetType="prim:DataGridColumnHeader" x:Key="aHeaderStyle">
        <Setter Property="ContentTemplate">
            <Setter.Value>
                <DataTemplate>
                    <TextBox Text="{Binding}" Background="Green" />
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>

(You have to add the "System.Windows.Controls.Primitives" namespace, for example: xmlns:prim="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls.Data")

Now still is the problem that the TextBox doesn't fill all the area :(. But I hope this can help you someway...

Answer 2

Although the DataGrid does not expose a Header Background property, it does have a property for the ColumnHeaderStyle. Using the technique that DaniCE has previously suggested for a single column we can replace the header template for all header columns including the empty space on the right hand side. The down side with replacing the entire template for a header is that we lose the sorting arrows and separators which are present in the default header template. Fortunately we can use a template browser to extract the default template being used and then modify a copy of it.

Here I've thrown together a quick example that will change the background of the column headers to LightBlue while keeping the separators and sorting. Take a look at the default DataGridColumnHeader template in a template browser to see how to deal with modifying the Background when the mouse hovers over the ColumnHeader.

<data:DataGrid x:Name="grid">
    <data:DataGrid.ColumnHeaderStyle>
        <Style 
            xmlns:primitives="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls.Data" 
            xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
            TargetType="primitives:DataGridColumnHeader" >
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="primitives:DataGridColumnHeader">
                        <Grid Name="Root">
                            <vsm:VisualStateManager.VisualStateGroups>
                                <vsm:VisualStateGroup x:Name="SortStates" >
                                    <vsm:VisualStateGroup.Transitions>
                                        <vsm:VisualTransition GeneratedDuration="00:00:0.1" />
                                    </vsm:VisualStateGroup.Transitions>
                                    <vsm:VisualState x:Name="Unsorted" />
                                    <vsm:VisualState x:Name="SortAscending">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="SortIcon" Storyboard.TargetProperty="Opacity" Duration="0" To="1.0" />
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="SortDescending">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="SortIcon" Storyboard.TargetProperty="Opacity" Duration="0" To="1.0" />
                                            <DoubleAnimation Storyboard.TargetName="SortIconTransform" Storyboard.TargetProperty="ScaleY" Duration="0" To="-.9" />
                                        </Storyboard>
                                    </vsm:VisualState>
                                </vsm:VisualStateGroup>
                            </vsm:VisualStateManager.VisualStateGroups>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*" />
                                <RowDefinition Height="*" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <Rectangle x:Name="BackgroundRectangle" Stretch="Fill" Fill="LightBlue" Grid.ColumnSpan="2" Grid.RowSpan="2"  />
                            <ContentPresenter Grid.RowSpan="2" Content="{TemplateBinding Content}" Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}" />
                            <Rectangle Name="VerticalSeparator" Grid.RowSpan="2" Grid.Column="2" Width="1" VerticalAlignment="Stretch" Fill="{TemplateBinding SeparatorBrush}" Visibility="{TemplateBinding SeparatorVisibility}" />
                            <Path Grid.RowSpan="2" Name="SortIcon" RenderTransformOrigin=".5,.5" HorizontalAlignment="Left" VerticalAlignment="Center" Opacity="0" Grid.Column="1" Stretch="Uniform" Width="8" Data="F1 M -5.215,6.099L 5.215,6.099L 0,0L -5.215,6.099 Z ">
                                <Path.Fill>
                                    <SolidColorBrush Color="#FF444444" />
                                </Path.Fill>
                                <Path.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform x:Name="SortIconTransform" ScaleX=".9" ScaleY=".9"  />
                                    </TransformGroup>
                                </Path.RenderTransform>
                            </Path>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </data:DataGrid.ColumnHeaderStyle>
</data:DataGrid>

Hope this helps!

Answer 3

Okay, John. Here's my stab at 'decent communications skills.'

The answer to your question: "Because in this case, there isn't a straight answer WITHOUT changing or replacing a lot of code." Unfortuantely, there is no Background Color property that works across the entire control. If there was, there wouldn't even be a post about this topic because any moron can change the value of a single property. (Well, most morons can. :) ) I think everyone here would like it to be as simple as that, but in this case it just isn't.

Once upon a time, as in pre-WPF/Silverlight, controls were essentially unchangable. There were exposed properties that would let you change certain things. But only certain things. The rest was untouchable. If you wanted to change something else, you were out of luck. You had to write your own control.

With WPF and Silverlight, the controls basically don't have an innate look and feel. They get them from styles and templates. There are default styles and templates and, yes, some commonly used properties are exposed and are simple to set and change. Others, however, are not. If you want to change THOSE things, then you have to learn about styles and templates and replace the defaults - which means defining a lot more than the one setting you want to change.

I'm sorry it's not as simple as you would like. I agree that, with something as basic as the background color of the control, you would think it would be exposed, but it isn't. So unfortunately, that means putting up with 100-line posts that explain how to change everything you need.

I hope this helps.

John

Answer 4

Check out solution on my blog post http://blog.developers.ba/post/2009/02/08/Styling-silverlight-datagrid-control.aspx

Answer 5

Hi! I came up with a "Clean" solution.. Hopefully it works for you. I simply override the DataGrid and I exposed the GetTemplateChild method. Using it you can access the DataGridColumnHeaderPresenter and the DataGridColumnHeaders contained in it...

1) Override datagrid

/// <summary>
/// Extends the DataGrid so that it's possible to access the template objects
/// </summary>
public class DataGridEx : System.Windows.Controls.DataGrid
{
    /// <summary>
    /// Exposes Template items
    /// </summary>
    public Object GetTemplateObject(String name)
    {
        return this.GetTemplateChild(name);
    }
}

2) Change the background

DataGridEx grid = new DataGridEx();

... after the template is applied ...

DataGridColumnHeadersPresenter obj = DataGrid.GetTemplateObject("ColumnHeadersPresenter") as DataGridColumnHeadersPresenter;

DataGridColumnHeader h = obj.Children[0] as DataGridColumnHeader;

h.Background = new SolidColorBrush(Colors.Red);

Answer 6

Could someone post the template of the DataGridRow here as well please? The program referred to in the first post isnt importing assemblies for me and I'd like to change the color of the selected DataGridRow on my DataGrid.

Thanks in advance

Answer 7

hi how to make datagrid colum header transparent