Ticket T226286
Visible to All Users

How to customize column headers in one GridControl?

created 10 years ago

Hello,

I have a task to create different header style for the DevEx Data Grid and apply it to only one Grids in our program. Right now the Grid Header style is defined in our ColumnHeader.xaml file and is implicit. I can create another style with a key name in XAML, but I'm not sure how to apply it to the Data Grid control in the XAML code.

Here's the sample of our Grid in the XAML:

XAML
<devExControlLib:DataGridControl Grid.Row="4" Grid.ColumnSpan="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ItemsSource="{Binding SelectedSheetData}" ShowGroupPanel="False" AutoPopulateColumns="True" AllowEditing="False" ShowColumnHeader="True"> <devExControlLib:DataGridControl.ExtendedProperties> <devExControlLib:DataGridExtendedProperties ShowFooter="Collapsed" ShowHeaderSelectAllCheckBox="Collapsed"/> </devExControlLib:DataGridControl.ExtendedProperties> </devExControlLib:DataGridControl>

I basically want to say something like - Style.Header="{StaticResource MyNewHeaderStyle}" So that I can overwrite the implicit style that we have applied currently.

Thanks.

mike

Answers approved by DevExpress Support

created 10 years ago

Hello Mike,
I suggest that you create a separate resource dictionary with the overridden "dxgt:GridColumnHeaderThemeKey ResourceKey=ControlTemplate" template. To apply this template to a specific GridControl, put the resource dictionary in the GridControl's resources:

XAML
<dxg:GridControl Name="grid" AutoGenerateColumns="AddNew"> <dxg:GridControl.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="CustomStyles.xaml"/> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </dxg:GridControl.Resources>

I have attached a sample project to demonstrate how to accomplish this task in version 13.2. Please note that the "dxgt:GridColumnHeaderThemeKey ResourceKey=ControlTemplate" template was chanted in version 14.1.
See also: How to modify DX themes in WPF

Thanks,
Alexander

    Comments (2)

      Appreciate it Alexander, this worked just fine for me.

      Alexander Russkov (DevExpress) 10 years ago

        You are welcome, Mike. Let us know if you have any other questions!

        Other Answers

        created 10 years ago (modified 10 years ago)

        Hello Mike,

        There are several ways to do it:

        1. Set a style for a specific GridColumn:
        XAML
        <dxg:GridColumn ... ColumnHeaderContentStyle="{StaticResource myStyle}"/>
        1. Override default style for a specific GridControl:
        XAML
        <dxg:GridControl ...> <dxg:GridControl.Resources> <Style TargetType="{x:Type dxg:HeaderContentControl}"> <Setter Property="FontFamily" Value="Arial" /> <Setter Property="FontWeight" Value="DemiBold"/> <Setter Property="FontSize" Value="14"/> </Style> </dxg:GridControl.Resources> . . .
        1. Define a DataTemlate
        XAML
        <DataTemplate x:Key="ColumnHeaderTemplate"> <TextBlock Text="{Binding}" FontWeight="DemiBold" TextWrapping="Wrap"/> </DataTemplate>

        and set it to a specific GridColumn:

        XAML
        <dxg:GridColumn HeaderTemplate="{StaticResource ColumnHeaderTemplate}">

        Best regards,
        Mikhail

          Comments (3)

            Thank you for the assistance, I will try one of these methods.

              Mikhail,
              When I try to use option 2 (2. Override default style for a specific GridControl) I get an error:
              Error 188 The name "HeaderContentControl" does not exist in the namespace "http://schemas.devexpress.com/winfx/2008/xaml/grid";.
              Also, is there a way that I can just define the style at the root level of the Data Grid instead of adding it to the resources? I would like to create a style that I can call to each Grid instead of adding it every time in the resources. Something like - Style.Header="{StaticResource MyNewHeaderStyle} that I can put as a property like ShowColumnHeader.

              M M
              Mikhail Shubin [DevExpress MVP] 10 years ago

                There is no GridColumn.HeaderStyle property, you can use GridColumn.HeaderTemplate property.
                It's strange, styling by TargetType="{x:Type dxg:HeaderContentControl}" work in my side… oh, I see, you use the old version of the Components.
                Another way is to override ColumnHeader ControlTemplate in the GridControl.Resources.
                Thanks,
                Mikhail

                Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

                Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.