Question

In the Windows 7 UX Guide under the section on group boxes, there are recommendations to move away from group boxes (under certain conditions) and use separator lines. A sample is given for such a separator and I’ve included a screenshot below. I have two questions. Is there a WPF headered control that implements this UX recommendation so that all apps look consistent? If not, where the text says “You can implement a separator with an etched rectangle…” what do they mean? I know how to draw a rectangle but don’t see an “etched” effect or property for it.

There is a separator control which would seem like the logical thing to use but it appears to be thinner than the examples and doesn’t allow a header or adding etch effects. I realize I can create my own control but given how basic a control this is I wanted to know if there was a canonical approach to take.

Answer 1

Etching is really just a graphic design technique used by using colors that contrast in a certain way.

The screenshot you posted is actually two horizontal lines of 1 pixel each. The top line is darker than the bottom one. And they both contrast the white background to provide a visual effect. You can easily replicate this by using two horizontal lines.

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    x:Class="TestingWPF.TestWindow"
    d:DesignWidth="477" d:DesignHeight="214">
    <Window.Resources>
        <Style x:Key="LineGroupBox" TargetType="{x:Type HeaderedContentControl}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type HeaderedContentControl}">
                        <StackPanel>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <ContentPresenter ContentSource="Header" Margin="5 0 5 0"/>
                                <Canvas Name="canvas" Grid.Column="1" Height="10">
                                    <Line X1="0" Y1="5" X2="{Binding ElementName=canvas, Path=ActualWidth}" Y2="5" Stroke="#FFACACAC" />
                                    <Line X1="0" Y1="6" X2="{Binding ElementName=canvas, Path=ActualWidth}" Y2="6" Stroke="#FFCBCBCB" />
                                </Canvas>
                            </Grid>
                            <Grid>
                                <Rectangle Fill="{TemplateBinding Background}"/>
                                <ContentPresenter ContentSource="Content" Margin="{TemplateBinding Property=Padding}"/>
                            </Grid>
                        </StackPanel>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

    <StackPanel Margin="5">
        <HeaderedContentControl Style="{StaticResource LineGroupBox}" Header="Header 1" Padding="5">
            <TextBlock>This is some content.</TextBlock>
        </HeaderedContentControl>

        <HeaderedContentControl Style="{StaticResource LineGroupBox}" Header="Header 2" Padding="5">
            <TextBlock>This is some content.</TextBlock>
        </HeaderedContentControl>
    </StackPanel>
</Window>