GridSplitter Styles and Templates
This topic describes the styles and templates for the GridSplitter control. You can modify the default ControlTemplate to give the control a unique appearance. For more information, see Customizing the Appearance of an Existing Control by Using a ControlTemplate.
The following table lists the named parts for the GridSplitter control.
|
Part |
Type |
Description |
|---|---|---|
|
HorizontalTemplate |
Represents a horizontal GridSplitter. |
|
|
VerticalTemplate |
Represents a vertical GridSplitter. |
The following table lists the visual states for the GridSplitter control.
|
GridSplitter VisualState Name |
VisualStateGroupName |
Description |
|---|---|---|
|
Normal |
CommonStates |
The default state. |
|
MouseOver |
CommonStates |
The state that is triggered when the mouse pointer is over the GridSplitter. |
|
Disabled |
CommonStates |
The state that is triggered when the GridSplitter is disabled. |
|
Focused |
FocusStates |
The control has focus. |
|
Unfocused |
FocusStates |
The control does not have focus. |
The following table lists the Style properties of the GridSplitter control. You must set the TargetType property when you create a Style.
|
Property Name |
Target Type |
Description |
|---|---|---|
|
The style applied to the control that displays the preview. |
The following example shows how to add a custom style as a StaticResource. For more information, see Customizing the Appearance of an Existing Control by Using a ControlTemplate. In this example, the StaticResource refers to an x:Key attribute value that you must add to the Style element when you modify it for your project.
<GridSplitter x:Name="gridSplitter1" Style="{StaticResource newGridSplitterStyle}" />
The following shows the XML namespace mappings that you have to specify when you work with styles and templates.
<!-- XML Namespace mappings. --> xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows" xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
 Important Note: |
|---|
The default templates for controls in Silverlight 4 still use the Silverlight 3-style prefixes, such as controls: and data: instead of sdk:. This is because the default control templates support Silverlight 3 and Silverlight 4 simultaneously. For more information, see Prefixes and Mappings for Silverlight Libraries. |
| Note: |
|---|
The default templates still specify the vsm: XML namespace mapping for the VisualStateManager element for legacy reasons. You can however, use the VisualStateManager element without specifying the vsm: mapping. |
The following XAML shows the default style and template for the GridSplitter control.
<Style TargetType="controls:GridSplitter"> <Setter Property="Background" Value="#FFFFFFFF" /> <Setter Property="IsTabStop" Value="true" /> <Setter Property="HorizontalAlignment" Value="Right" /> <Setter Property="PreviewStyle"> <Setter.Value> <Style TargetType="Control"> <Setter Property="Background" Value="#FF868686" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Control"> <Grid x:Name="Root" Opacity=".5"> <!-- Background --> <Rectangle Fill="{TemplateBinding Background}" /> <!-- Horizontal Template --> <Grid x:Name="HorizontalTemplate" Height="6"> <!-- Just show the faint gray grid splitter rectangle with no other details --> </Grid> <!-- Vertical Template --> <Grid x:Name="VerticalTemplate" Visibility="Collapsed" Width="6"> <!-- Just show the faint gray grid splitter rectangle with no other details --> </Grid> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </Setter.Value> </Setter> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="controls:GridSplitter"> <Grid x:Name="Root" IsHitTestVisible="{TemplateBinding IsEnabled}"> <!-- VSM --> <vsm:VisualStateManager.VisualStateGroups> <vsm:VisualStateGroup x:Name="CommonStates"> <vsm:VisualState x:Name="Normal" /> <vsm:VisualState x:Name="MouseOver" /> <vsm:VisualState x:Name="Disabled"> <Storyboard> <DoubleAnimation Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="0.5" Duration="0" /> </Storyboard> </vsm:VisualState> </vsm:VisualStateGroup> <vsm:VisualStateGroup x:Name="FocusStates"> <vsm:VisualStateGroup.Transitions> <vsm:VisualTransition GeneratedDuration="0" /> </vsm:VisualStateGroup.Transitions> <vsm:VisualState x:Name="Unfocused" /> <vsm:VisualState x:Name="Focused"> <Storyboard> <DoubleAnimation Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Opacity" To="1" Duration="0" /> </Storyboard> </vsm:VisualState> </vsm:VisualStateGroup> </vsm:VisualStateManager.VisualStateGroups> <!-- Background --> <Rectangle Fill="{TemplateBinding Background}" StrokeThickness="0" /> <!-- Horizontal Template --> <Grid x:Name="HorizontalTemplate" Height="10"> <StackPanel Height="6" VerticalAlignment="Center"> <Rectangle Height="1" Margin="1" Width="10" StrokeThickness="0" Fill="#FF868686" /> <Rectangle Height="1" Margin="1" Width="10" StrokeThickness="0" Fill="#FF868686" /> </StackPanel> </Grid> <!-- Vertical Template --> <Grid x:Name="VerticalTemplate" Visibility="Collapsed" Width="10"> <StackPanel Width="6" VerticalAlignment="Center" Orientation="Horizontal"> <Rectangle Width="1" Margin="1" Height="10" StrokeThickness="0" Fill="#FF868686" /> <Rectangle Width="1" Margin="1" Height="10" StrokeThickness="0" Fill="#FF868686" /> </StackPanel> </Grid> <!-- Focus Visual --> <Rectangle x:Name="FocusVisual" Stroke="#FF6DBDD1" StrokeThickness="1" Opacity="0" IsHitTestVisible="false" /> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>
