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
65
Trying to add an outline to the grid column headers
posted

You will have to excuse my lack of lingo since I am not a developer, I am a designer working in Blend with a developer on UI. Also apologize if I put this in the wrong forum. We are using the Aero theme (which we must use) and designing a hierarchical grid. The problem we are having is that with Aero theme, there is a brush fill that goes from white to gray to give that 3-D look on the headers. In the hierarchical grid, it gets confusing b/c there is no hard line to differentiate the headers from the data above with subsequent headers. We are trying to "trick" a hard line by applying a border to the header row that is the same color gray as the bottom outline and this will work to give the top of the headers that "hard line" (I hope I am making sense!).

The problem we are having is not with applying a border, but with a padding that is appearing in the columns. We just want the outline, not the inside line that is appearing (see the Class, and Class Description cells below, the first cell to the left is what we want it to look like sans the red color of course, but we colored it red just so it would stand out why we were working to find the solution and we will later change it to #D5D5D5 with value 1 thickness). Developer used the HeaderPresenter.

Can anyone help us out? Here is the code we added:

           <Style x:Key="HeaderOutlineStyle" TargetType="{x:Type igDP:HeaderPresenter}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type igDP:HeaderPresenter}" >
                        <Grid>                           
                            <Border BorderBrush="Red" BorderThickness="2" />
                            <ContentPresenter                                
                                Content="{TemplateBinding Content}"
                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                             />                           
                            </Grid>                      
                        </ControlTemplate>
                </Setter.Value>
                </Setter>
            </Style>

Here is another sample of what our grids currently look like and what we would like them to look like with the gray outline:

Thanks for any help.

Parents Reply Children