WPF datagrid styling

Question

I want to style a WPF datagrid and it seems to be really easy . As far as I understand I have to have code such as the following:

<Style x:Key="DataGridColumnHeaderStyle" TargetType="{x:Type Custom:DataGridColumnHeader}"  >
<Setter Property="Background" Value="#88800080" />
    <Setter Property="Foreground" Value="White" /> 
</Style>

But my question is ..where do I place this code and how do I let the datagrid know to use the style above ?

Regards, S

Answer 1

Put it in the resource of the xaml (local or global). The easiest is to put it in the local resource of the current xaml file:

<Page Name="SomeName"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"&gt;
  <Page.Resources>
    <Style x:Key="DataGridColumnHeaderStyle" TargetType="{x:Type Custom:DataGridColumnHeader}"  >
      <Setter Property="Background" Value="#88800080" />
      <Setter Property="Foreground" Value="White" /> 
   </Style>
  </Page.Resources>
<!-- The rest of the xaml -->
</Page>

Answer 2

Styles usually go:

<UserControl.Resources>
    <Style x:Key="DataGridColumnHeaderStyle" TargetType="{x:Type Custom:DataGridColumnHeader}"  >
       <Setter Property="Background" Value="#88800080" />
       <Setter Property="Foreground" Value="White" /> 
    </Style>
</UserControl.Resources>

Use the appropriate container if this isn't within a UserControl you may use "Window" or whatever container you're in.

Also you need to reference it in your datagrid with:

<Custom:DataGrid ColumnHeaderStyle="{StaticResource DataGridColumnHeaderStyle}"/>

Answer 3

the following code does not seem to work for me. The error message I get is : "The type DataGridColumnHeader was not found.".

<UserControl x:Class="myprogram.InfoView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:my="clr-namespace:Microsoft.Windows.Controls;assembly=WPFToolkit"
    Height="500" Width="600" Loaded="UserControl_Loaded">

    <UserControl.Resources>
        <Style x:Key="DataGridColumnHeaderStyle" TargetType="{x:Type my:DataGridColumnHeader}"  >
            <Setter Property="Background" Value="#88800080" />
            <Setter Property="Foreground" Value="White" />
        </Style>
    </UserControl.Resources>


    <DockPanel LastChildFill="True">
........
    </DockPanel>
</UserControl>

Answer 4

The best place to put styles is in a resource dictionary, referenced in App.xaml.

Resource dictionary ("StyleResources.xaml" in this example):

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"&gt;
    <Style x:Key="TextBlockRightAlign" TargetType="TextBlock">
        <Setter Property="HorizontalAlignment" Value="Right" />
    </Style>
    <Style x:Key="TextBlockTitle" TargetType="TextBlock">
        <Setter Property="FontSize" Value="20" />
        <Setter Property="FontWeight" Value="Bold" />
    </Style>
</ResourceDictionary>

Referencing the style dictionary in App.xaml:

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="StyleResources.xaml"/>
        </ResourceDictionary.MergedDictionaries>
        <ValueConverters:PriceConverter x:Key="PriceConverter"/>
    </ResourceDictionary>
</Application.Resources>

Using the definition in a datagrid (column formatting here, but should work for headers as well):

<data:DataGridTextColumn Header="Charge" Width="100" 
       Binding="{Binding Charge, Mode=TwoWay, Converter={StaticResource PriceConverter}}"
       ElementStyle="{StaticResource TextBlockRightAlign}" />

Note that the element inside the cell is a TextBlock, so you can use a style with a target type of TextBlock.

Answer 5

As for the "Type DataGridColumnHeader was not found": you need a second xml namespace entry since the DataGridColumnHeader is in the System.Windows.Controls.Primitives namespace. You need something like

xmlns:dg="clr-namespace:Microsoft.Windows.Controls.Primitives;assembly=WPFToolkit"

and then reference the new namespace in your style, e.g.

<Style x:Key="DataGridColumnHeaderStyle" TargetType="{x:Type dg:DataGridColumnHeader}" >