What WPF control implements the Win 7 UX Guide recommended separator? - wpf

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>