Styled GridSplitter handles in WPF

Windows Presentation Foundation (WPF) uses Extensible Application Markup Language (XAML) to define semi-responsive user interfaces for desktop applications. Generally speaking, User Controls align to grids. On occasion though, it makes sense for the user to resource elements within the display. This can be accomplished with a GridSplitter.

Note: All features of XAML could be implemented in code.

Any element in WPF can contain resources (Application, Window, and UserControl can all contain resources). For this example, the style will be applied as a resource to the grid - specifying the target as a GridSplitter within the grid.


<Grid>
	<Grid.Resources>
		<Style TargetType="GridSplitter">
			<Style.Triggers>
				<Trigger Property="VerticalAlignment" Value="Stretch">
					<Setter Property="BorderThickness" Value="1,0,1,0"></Setter>
					<Setter Property="BorderBrush" Value="LightGray"></Setter>
					<Setter Property="HorizontalAlignment" Value="Center"></Setter>
					<Setter Property="Template">
						<Setter.Value>
							<ControlTemplate TargetType="{x:Type GridSplitter}">
								<Canvas Height="28" Width="7">
									<Ellipse Width="4" Height="4" Canvas.Left="1" Canvas.Top="0" Fill="LightGray"></Ellipse>
									<Ellipse Width="4" Height="4" Canvas.Left="1" Canvas.Top="8" Fill="LightGray"></Ellipse>
									<Ellipse Width="4" Height="4" Canvas.Left="1" Canvas.Top="16" Fill="LightGray"></Ellipse>
									<Ellipse Width="4" Height="4" Canvas.Left="1" Canvas.Top="24" Fill="LightGray"></Ellipse>
								</Canvas>
							</ControlTemplate>
						</Setter.Value>
					</Setter>
				</Trigger>
			</Style.Triggers>
		</Style>
	</Grid.Resources>
	<Grid.ColumnDefinitions>
		<ColumnDefinition Width="240" MaxWidth="420" MinWidth="128"></ColumnDefinition>
		<ColumnDefinition Width="7"></ColumnDefinition>
		<ColumnDefinition Width="*"></ColumnDefinition>
	</Grid.ColumnDefinitions>
	<GridSplitter Grid.Column="1"
		  Width="7"
		  VerticalAlignment="Stretch">
	</GridSplitter>
</Grid>

The above XAML will create a grid splitter handle similar to the main image.

Note: This style resource could also be placed in a separate style resource.

Obviously, the number of Ellipses can be changed, or a custom image can be added. This is mainly to get you started with no additional resources and will not modify existing styles.