How to change the background of a GridSplitter when focused/dragged in XAML (with a border)?

Question

I found it weird that there's no GridSplitter property like "DragBackground" or something alike.

This seems to work though:

<UserControl.Resources>
    <Style x:Key="CustomGridSplitterStyle" TargetType="GridSplitter">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="GridSplitter">
                    <Grid x:Name="Root" >
                        <!-- Background -->
                        <Rectangle Fill="White" StrokeThickness="0" />
                        <!-- Focus Visual -->
                        <Rectangle x:Name="FocusVisual" Stroke="White" StrokeThickness="1" Opacity="0" IsHitTestVisible="false" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>

 

  GridSplitter Style="{StaticResource CustomGridSplitterStyle}" Grid.Column="1" Width="6" HorizontalAlignment="Stretch" 
                  BorderThickness="2,0,0,0" BorderBrush="Blue" />

My problem with this solution however is that I'd like to set a border on the left side of the GridSplitter (see above), which doesn't work when using the custom GridSplitter style.
Does anybody know how to get this working ?

Answer 1

If you want to use BorderBrush and BorderThickness in your Template you can use TemplateBinding on some Border. You can also use Setter in your Style to define some default value.

<Style x:Key="CustomGridSplitterStyle" TargetType="{x:Type GridSplitter}">
    <Setter Property="Background" Value="White"/>
    <Setter Property="BorderBrush" Value="White"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="GridSplitter">
                <Border 
                    x:Name="FocusVisual" 
                    Background="{TemplateBinding Background}" 
                    BorderBrush="{TemplateBinding BorderBrush}" 
                    BorderThickness="{TemplateBinding BorderThickness}"/>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsDragging" Value="True">
                        <Setter TargetName="FocusVisual" Property="..." Value="..." />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Also since GridSplitter is a Thumb and as such has IsDragging property so you can create Trigger to do something when it is true as in the example above