Styling GridSplitter wpf C#

Mostly for my own future reference, here is a vertical grid splitter that has the rounded shape of a button (but doesn't react to mouseover properly):

<GridSplitter Grid.Column="1" VerticalAlignment="Stretch" HorizontalAlignment="Center" Width="8">
    <GridSplitter.Template>
        <ControlTemplate TargetType="{x:Type GridSplitter}">
            <Grid>
                <Button Content="⁞" />
                <Rectangle Fill="#00FFFFFF" />
            </Grid>
        </ControlTemplate>
    </GridSplitter.Template>
</GridSplitter>

A horizontal splitter could just use "····" as the Button's Content.


<GridSplitter x:Name="gridSplitterTreeNodes" Width="5" BorderThickness="1,0" 
     Cursor="SizeWE" RenderTransformOrigin="-1.2,0.507" ShowsPreview="True"
     Style="{DynamicResource GridSplitterStyle1}">
  <GridSplitter.Background>
    <ImageBrush ImageSource="Images\gripDots.png" TileMode="FlipXY" 
                Stretch="UniformToFill"/>
  </GridSplitter.Background>
</GridSplitter>

You can also save image from Msnd Microsoft to get the same effect, More Info


Another way of adding a 'gripper' button/graphic to a GridSplitter, without losing mouse events, would be to use a simple label on top of the splitter.

    <GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Stretch" Background="Gray"/>

    <Label Grid.Column="1" Content="⁞" Foreground="White" VerticalAlignment="Center" FontSize="26" FontWeight="Bold" IsHitTestVisible="False"/>

Making sure the GridSplitter and Label are in the same Column, and that IsHitTestVisible=False is set in the Label.