GridSplitter Styles and Templates

Microsoft Silverlight will reach end of support after October 2021. Learn more.

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.

GridSplitter Parts

The following table lists the named parts for the GridSplitter control.

Part	Type	Description
HorizontalTemplate	Grid	Represents a horizontal GridSplitter.
VerticalTemplate	Grid	Represents a vertical GridSplitter.

GridSplitter States

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.

GridSplitter Style Properties

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
PreviewStyle	Control	The style applied to the control that displays the preview.

Example

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}" />

Default Style and Template

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>

See Also

Concepts

Control Customization

Customizing the Appearance of an Existing Control by Using a ControlTemplate

Other Resources

Control Styles and Templates