Here we will see how to create and use separator control in XAML.
Separator control
- The Separator Control is used to separate items in items controls.
- The intention is to divide the items on the menu or toolbar into logical groups.
- It uses borders and rectangles.
Example
Drag and drop StackPannel, GroupBox, Button, CheckBoxes and separator control from Toolbox on the window form.
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.
XAML code
<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid Height="260" Width="302">
<GroupBox Name="settingsGroupBox"
Header="Select Course"
Margin="4,4,0,45" 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="chk3">
c-sharp,visual basic
</CheckBox>
<CheckBox Name="chk4" >
Oracle,Sql Server
</CheckBox>
<Separator Height="12" Name="Separator1" Width="261" />
<!-- A separator between settings and buttons. -->
<!-- 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>
Now run the application.
Figure1.gif
In this example line show as a separator between CheckBox and Button.