Forums Retired Products and Controls
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Urfan
415
Column header background
posted

I'm trying to style the XamGrid so that the column headers only have a border on the bottom and a gap between the borders.

In Expression Blend I've created a template for the Header Style and I've set the right margin setter property on the igPrim:HeaderCellControl to 9. This is fine and leaves a nice gap between the underlines on the column headers. However, when I use the vertical scrollbar, the gaps between the columns (caused by the margin) are transparent meaning that the background colour of the row and any text that goes beyond the width of the header is displayed between columns.

This is a particular problem when a row is selected. In my example the selection colour is dark grey and when this row is scrolled behind the columns header the effect is not pleasant!

I've looked at the template for the XamGrid style hoping that there would be a container that can be styled that the column headers are displayed on top of, however I've had no luck.

Does anyone know if there's a way to force the area below the column headers to a specific colour so that scrolled rows do not interfere with the display. Alternatively, does anyone have any other suggestions on how to achieve this effect.

Many thanks!

  • 40030
    Offline posted

    Hi, 

    So Here is what i'd recommend. Add another Grid element to the controlTemplate, set the background of the spacing on the "NormalFill" container, and move the Background TemplateBinding to the "Bd" grid. Then set the Margin on your newly created Grid. 

    <ControlTemplate TargetType="igPrim:HeaderCellControl">

    <igPrim:SimpleClickableContainer

    x:Name="NormalFill"

    Background="Red"

    BorderBrush="{TemplateBinding BorderBrush}"

    BorderThickness="{TemplateBinding BorderThickness}">

    <igBase:Commanding.Commands>

                                <ig:XamGridColumnCommandSource CommandType="Select" EventName="SimpleClick"/>

                                <ig:XamGridColumnCommandSource CommandType="SortToggle" EventName="SimpleClick"/>

    </igBase:Commanding.Commands>

                            <Grid Margin="9"> <!-- Inserted Grid -->

                                <Grid x:Name="Bd" Background="{TemplateBinding Background}">

    .Hope this helps, 

    -SteveZ