Separator Control in WPF

Separator Control in WPF Window Based

This article 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 WPF Windows Application..

Example:

<Window x:Class="WpfApplication7.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="370" Width="417">
    <Grid Height="260" Width="302">
        <GroupBox Name="settingsGroupBox"
  Header="Select Course" 
  Margin="4,4,32,99" Background="Azure">
            <StackPanel Height="141" Width="259" Background="Honeydew">
                <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 Name="chk1" >
                    .Net FrameWork With C#
                </CheckBox >
                <CheckBox  Name="chk2">
                    java And Advanced Java
                </CheckBox>
                <CheckBox  Name="chk3">
                    PHP,CAKE PHP,Smarty
                </CheckBox>
                <CheckBox  Name="chk4" >
                    Oracle,Sql Server
                </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 Click="Button_Click">_OK</Button>
                    <Button Click="Button_Click_1">_Cancel</Button>
                </StackPanel>
            </StackPanel>
        </GroupBox>

    </Grid>
</Window> 

.CS Code:

private void Button_Click(object sender, RoutedEventArgs e)
        {
            if (chk1.IsChecked == true)
            {
                MessageBox.Show("Your Selected Course is::" + chk1.Content);
            }
            else if (chk2.IsChecked == true)
            {
                MessageBox.Show("Your Selected Course is::" + chk2.Content);
            }
            else if (chk3.IsChecked == true)
            {
                MessageBox.Show("Your Selected Course is::" + chk3.Content);
            }
            else if (chk4.IsChecked == true)
            {
                MessageBox.Show("Your Selected Course is::" + chk4.Content);
            }
        } 

Design Output: