Set background color of header panel

Oct 30, 2008 at 11:20 PM
Hello,
I have styled my column header with rounded borders, but now I can see the background of the panel where all headers are located. How do I set this background color to transparent? I have set the Background of DataGridColumnHeader to null, but that only makes the Header itself transparent, not the panel behind it.
Thanks for any help!

Joachim
Coordinator
Oct 31, 2008 at 2:48 PM
Haven't tried it out, but does setting the DataGrid.Background to transparent work?
Oct 31, 2008 at 3:14 PM
No, DataGrid.Background only affects the area where the rows are displayed.
Coordinator
Oct 31, 2008 at 4:06 PM
Could you post a code snippet of the column header style you have.
Oct 31, 2008 at 9:33 PM
        <LinearGradientBrush x:Key="MGridHeaderBorder" StartPoint="0,0" EndPoint="1,0">
            <GradientStop Offset="0" Color="#FFDADADA"/>
            <GradientStop Offset="1" Color="#FFCACACA"/>
        </LinearGradientBrush>

        <LinearGradientBrush x:Key="MGridHeaderBackground" StartPoint="0,0" EndPoint="1,0">
            <GradientStop Offset="0" Color="#FFC4C4C4"/>
            <GradientStop Offset="1" Color="#FFE8DD98"/>
        </LinearGradientBrush>

        <LinearGradientBrush x:Key="MGridColumnHeaderBackground" StartPoint="0,0" EndPoint="1,0">
            <GradientStop Offset="0" Color="#66ffffff"/>
            <GradientStop Offset="0" Color="#36FFFFFF"/>
            <GradientStop Offset="1" Color="#B5EBE7E7"/>
        </LinearGradientBrush>

        <SolidColorBrush x:Key="MGridHeaderDecendingArrowFill" Color="#FF6A6A6A" />

        <LinearGradientBrush x:Key="MGridHeaderColumnPressedBackground" StartPoint="0,0" EndPoint="1,0">
            <GradientStop Offset="0" Color="#FFAFA98F"/>
            <GradientStop Offset="1" Color="#FFFFEA00"/>
        </LinearGradientBrush>

        <LinearGradientBrush x:Key="MGridHeaderColumnPressedBorder" StartPoint="0,0" EndPoint="1,0">
            <GradientStop Offset="0" Color="#FFD9CF66"/>
            <GradientStop Offset="1" Color="#FFCCCC71"/>
        </LinearGradientBrush>

        <LinearGradientBrush x:Key="MGridHeaderColumnSortAscendingBackground" StartPoint="0,0" EndPoint="1,0">
            <GradientStop Offset="0" Color="#FFBFA600"/>
            <GradientStop Offset="1" Color="#FFFFDE00"/>
        </LinearGradientBrush>

        <LinearGradientBrush x:Key="MGridHeaderColumnSortAscendingBorder" StartPoint="0,0" EndPoint="1,0">
            <GradientStop Offset="0" Color="#FFDCD2A3"/>
            <GradientStop Offset="1" Color="#FFFEFA94"/>
        </LinearGradientBrush>

        <LinearGradientBrush x:Key="MGridHeaderColumnSortDescendingBackground" StartPoint="0,0" EndPoint="1,0">
            <GradientStop Offset="0" Color="#FFF9F581"/>
            <GradientStop Offset="1" Color="#FFCAC777"/>
        </LinearGradientBrush>

        <LinearGradientBrush x:Key="MGridHeaderColumnSortDescendingBorder" StartPoint="0,0" EndPoint="1,0">
            <GradientStop Offset="0" Color="#FFD9D566"/>
            <GradientStop Offset="1" Color="#FFFEFA94"/>
        </LinearGradientBrush>

        <SolidColorBrush x:Key="MGridAlternatingRowBackground" Color="#7FFFFFFF"/>
        <SolidColorBrush x:Key="MGridRowBackground" Color="#A9FFFFFF"/>
        <SolidColorBrush x:Key="MGridBackground" Color="#00FFFFFF"/>
        <SolidColorBrush x:Key="MGridHorizontalGridLinesBrush" Color="#FFE4E4E4"/>
        <SolidColorBrush x:Key="MGridVerticalGridLinesBrush" Color="#FFC2C2C2"/>
        <SolidColorBrush x:Key="MGridColumnHeaderForeground" Color="Gray" />
        <Color x:Key="ExpanderMouseOver1">#FF5BC5D0</Color>

        <Style x:Key="GridColumnHeader" TargetType="toolkit:DataGridColumnHeader" >
            <Setter Property="Background" Value="{x:Null}"/>
            <Setter Property="Foreground" Value="{StaticResource MGridColumnHeaderForeground}" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type toolkit:DataGridColumnHeader}">
                        <ControlTemplate.Resources>
                            <Storyboard x:Key="MouseIn">
                                <DoubleAnimation  Storyboard.TargetName="GradientBorder" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Offset)" From="0" To="0.8" Duration="00:00:00.4"/>
                                <DoubleAnimation  Storyboard.TargetName="GradientBorder" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[2].(GradientStop.Offset)" From="1" To="1.1" Duration="00:00:00.4"/>
                            </Storyboard>
                            <Storyboard x:Key="MouseOut">
                                <DoubleAnimation  Storyboard.TargetName="GradientBorder" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Offset)" From="0.8" To="0" Duration="00:00:00.1"/>
                                <DoubleAnimation  Storyboard.TargetName="GradientBorder" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[2].(GradientStop.Offset)" From="1.1" To="1" Duration="00:00:00.1"/>
                            </Storyboard>
                        </ControlTemplate.Resources>
                        <Grid>
                            <Border Name="MainBorder" BorderThickness="2,2,2,0" CornerRadius="8,8,0,0" Margin="0,0,1,0" BorderBrush="{StaticResource MGridHeaderBorder}" Background="{StaticResource MGridHeaderBackground}">
                                <Grid>
                                    <Grid>
                                        <Grid.RowDefinitions>
                                            <RowDefinition/>
                                            <RowDefinition/>
                                        </Grid.RowDefinitions>
                                        <Border Name="GradientBorder" CornerRadius="8,8,0,0" Background="{StaticResource MGridColumnHeaderBackground}">
                                        </Border>
                                        <Border Grid.Row="1"/>
                                    </Grid>
                                    <ContentPresenter Margin="2,0,2,0" HorizontalAlignment="Center" VerticalAlignment="Center" Content="{TemplateBinding Content}"
                                                  ContentStringFormat="{TemplateBinding ContentStringFormat}" ContentTemplate="{TemplateBinding ContentTemplate}"
                                                  />
                                </Grid>
                            </Border>
                            <Path Name="DescendingArrow" Fill="{StaticResource MGridHeaderDecendingArrowFill}" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,7,0" Visibility="Hidden">
                                <Path.Data>
                                    <PathGeometry>
                                        <PathFigure StartPoint="0,0">
                                            <LineSegment Point="6,0"/>
                                            <LineSegment Point="3,5"/>
                                            <LineSegment Point="0,0"/>
                                        </PathFigure>
                                    </PathGeometry>
                                </Path.Data>
                            </Path>
                            <Path Name="AscendingArrow" Fill="{StaticResource MGridHeaderDecendingArrowFill}" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,7,0" Visibility="Hidden">
                                <Path.Data>
                                    <PathGeometry>
                                        <PathFigure StartPoint="0,5">
                                            <LineSegment Point="6,5"/>
                                            <LineSegment Point="3,0"/>
                                            <LineSegment Point="0,5"/>
                                        </PathFigure>
                                    </PathGeometry>
                                </Path.Data>
                            </Path>
                            <Thumb HorizontalAlignment="Left" x:Name="PART_LeftHeaderGripper" Cursor="SizeWE" Width="8">
                                <Thumb.Template>
                                    <ControlTemplate TargetType="{x:Type Thumb}">
                                        <Border Background="Transparent" Padding="{TemplateBinding Padding}"/>
                                    </ControlTemplate>
                                </Thumb.Template>
                            </Thumb>
                            <Thumb HorizontalAlignment="Right" x:Name="PART_RightHeaderGripper" Width="8" Cursor="SizeWE">
                                <Thumb.Template>
                                    <ControlTemplate TargetType="{x:Type Thumb}">
                                        <Border Background="Transparent" Padding="{TemplateBinding Padding}"/>
                                    </ControlTemplate>
                                </Thumb.Template>
                            </Thumb>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <!--EventTrigger RoutedEvent="Mouse.MouseEnter">
                            <BeginStoryboard Storyboard="{StaticResource MouseIn}"/>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="Mouse.MouseLeave">
                            <BeginStoryboard Storyboard="{StaticResource MouseOut}"/>
                        </EventTrigger-->
                            <Trigger Property="DisplayIndex" Value="0">
                                <Setter Property="Visibility" TargetName="PART_LeftHeaderGripper" Value="Collapsed"/>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="Background" TargetName="MainBorder" Value="{StaticResource MGridHeaderColumnPressedBackground}" />
                                <Setter Property="BorderBrush" TargetName="MainBorder" Value="{StaticResource MGridHeaderColumnPressedBorder}" />
                            </Trigger>
                            <Trigger Property="SortDirection" Value="Ascending">
                                <Setter Property="Background" TargetName="MainBorder" Value="{StaticResource MGridHeaderColumnSortAscendingBackground}" />
                                <Setter Property="BorderBrush" TargetName="MainBorder" Value="{StaticResource MGridHeaderColumnSortAscendingBorder}" />
                                <Setter TargetName="AscendingArrow" Property="Visibility" Value="Visible"/>
                                <Setter TargetName="DescendingArrow" Property="Visibility" Value="Hidden"/>
                            </Trigger>
                            <Trigger Property="SortDirection" Value="Descending">
                                <Setter Property="Background" TargetName="MainBorder" Value="{StaticResource MGridHeaderColumnSortDescendingBackground}" />
                                <Setter Property="BorderBrush" TargetName="MainBorder" Value="{StaticResource MGridHeaderColumnSortDescendingBorder}" />
                                <Setter TargetName="AscendingArrow" Property="Visibility" Value="Hidden"/>
                                <Setter TargetName="DescendingArrow" Property="Visibility" Value="Visible"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
Coordinator
Oct 31, 2008 at 10:52 PM
You can do something like this:

 

 

<Style TargetType="{x:Type dg:DataGridColumnHeadersPresenter}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type dg:DataGridColumnHeadersPresenter}">
                <Grid>
                    <dg:DataGridColumnHeader Background="Transparent" IsHitTestVisible="False"/>
                    <ItemsPresenter />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

It is basically the same as the original except it sets the DataGridColumnHeader in the template to Transparent.

By the way, with the new VSM feature out for WPF you may want to consider trying that out with your custom button.