Putting a visual separator in a GroupBox

Now that my blog is no longer hosted by my employer, I’m free to write whatever I want.  Those silent shackles of professionalism are now removed and I can post whatever weird thoughts I want here.  Hurrah!

To commemorate this occasion of new opportunities for creativity and individuality, I’ve decided to show the world how to do something incredibly mundane and conventional.  This post explains how to draw a separator in a GroupBox.  The separator separates the OK and Cancel buttons from the rest of the content in that GroupBox.  This is a UI design seen relatively often in Windows applications; particularly in dialog boxes.  Here’s a screenshot of what I’m referring to:
GroupBox with separator

Back in the pre-WPF days many developers would create that separator by taking a Label control, setting its background color to gray, and making it have a one or two pixel height.  Fortunately the wonderful new world of WPF provides a very simple and non-hacky way of achieving the same effect.  The trick is to use a Line element and configure a few of its properties so that it stretches across the GroupBox.  Enough blabber, here’s the XAML:

 <GroupBox Name="settingsGroupBox"
  Header="Settings" 
  Margin="4">
  <StackPanel>
    <StackPanel.Resources>
      <!-- Give the CheckBoxes some room to breath. -->
      <Style TargetType="CheckBox">
        <Setter Property="Margin" Value="4" />
      </Style>
    </StackPanel.Resources>

    <!-- Some CheckBoxes that represent settings. -->
    <CheckBox IsChecked="True">
      Start application when Windows loads
    </CheckBox>
    <CheckBox>
      Auto-detect proxy settings
    </CheckBox>
    <CheckBox>
      Allow remote login
    </CheckBox>
    <CheckBox IsChecked="True">
      Show context-sensitive help
    </CheckBox>

    <!-- A separator between settings and buttons. -->
    <Line
      Margin="0,4"
      SnapsToDevicePixels="True"
      Stroke="{Binding
                ElementName=settingsGroupBox,
                Path=BorderBrush}"
      Stretch="Fill"
      X1="0" X2="1" 
      />

    <!-- The standard OK and Cancel Buttons. -->
    <StackPanel
      HorizontalAlignment="Right"
      Orientation="Horizontal"
      >
      <StackPanel.Resources>
        <Style TargetType="Button">
          <Setter Property="Margin" Value="4" />
          <Setter Property="Width" Value="60" />
        </Style>
      </StackPanel.Resources>
      <Button>_OK</Button>
      <Button>_Cancel</Button>
    </StackPanel>
  </StackPanel>
</GroupBox>

I bound the Line’s Stroke property to the GroupBox’s BorderBrush property so that the Line would be the same color as the GroupBox’s border.  If you want the Line to intersect the GroupBox’s border, set the Line’s Margin to have a Left and Right value of -6 (it seems that GroupBox has a default horizontal padding of 6 logical pixels).

In case you’re wondering why I set SnapsToDevicePixels=”True” on the Line, here’s a good overview of what that property is all about: http://msdn2.microsoft.com/en-us/library/aa970908.aspx

That’s all folks!

Comments are closed.

%d bloggers like this: