WPF Datagrid Header Background

Posted by: m.bleimuth on 20 September 2017, 5:23 am EST

  • Posted 20 September 2017, 5:23 am EST

    Hi,

    i am trying to restyle the column header of a C1Datagrid. I can set the background color, but there is still a gradient appearing. How can i remove this gradient?
    I have tried to restyle the column header (green) but the gradient still appears.

    <c1:DataGridTextColumn Header="#" Width="30" Binding="{Binding Order}">
    <c1:DataGridTextColumn.HeaderStyle>
    <Style TargetType="c1:DataGridColumnHeaderPresenter">
    <Setter Property="Background" Value="Green"/>
    <Setter Property="HorizontalContentAlignment" Value="Center" />
    <Setter Property="Foreground" Value="Red"/>
    </Style>
    </c1:DataGridTextColumn.HeaderStyle>
    </c1:DataGridTextColumn>
  • Replied 20 September 2017, 5:26 am EST

  • Replied 25 September 2017, 4:36 am EST

    Hi,

    Thank you for attaching the screen-shot of your issue.
    However, what you are observing is the default behavior i.e, columns and rows that are moused over appear in a different color to indicate to users what area of the grid they are interacting with. But if you choose you can customize the appearance of cells that are moused by using MouseOverBrush property as follows:

    <c1:DataGridTextColumn.HeaderStyle>
    <Style TargetType="c1:DataGridColumnHeaderPresenter">
    <Setter Property="Background" Value="Green"/>
    <Setter Property="HorizontalContentAlignment" Value="Center" />
    <Setter Property="Foreground" Value="Red"/>
    <Setter Property="MouseOverBrush" Value="Green"/>
    </Style>
    </c1:DataGridTextColumn.HeaderStyle>


    I have uploaded a sample application for reference, which you may download from the following URL: https://www.dropbox.com/s/dbdtu41n733nds6/prj_ColumnHeaderStyle_DataGrid.zip?dl=0

    Thanks,
    Ruchir Agarwal
  • Replied 25 September 2017, 12:03 pm EST

    Hi Ruchir,

    i tested your project, but there is still also this light gray gradient as shown in my screenshot which i want to get rid of.

    Thanks manuel
  • Marked as Answer

    Replied 26 September 2017, 8:06 am EST

    Hi Manuel,

    Sorry I misunderstood your concern.
    For removing the gradient filling of C1DataGrid's Header, you may use HeaderBackGround property of grid, as follows:

    <Style x:Key="MyGridStyle" TargetType="c1:C1DataGrid">
    <Setter Property="HeaderBackground" Value="Aqua"/>
    <Setter Property="MouseOverBrush" Value="Aqua"/>
    </Style>


    Again, I have attached modified application for reference, which can be downloaded from: https://www.dropbox.com/s/jq86hdhxdluw9bb/prj_ColumnHeaderStyle_DataGrid_modified.zip?dl=0

    Regards,
    Ruchir Agarwal
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels