Increase WPF GridSplitter mouse grabbing threshold

You can change the actual size of the GridSplitter while keeping it looking like it's smaller. This will give you a 7 pixel width area to grab it while showing at 1 pixel:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition Width="1"/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <GridSplitter Grid.Column="1"
                  Margin="-3,0"
                  BorderThickness="3,0"
                  BorderBrush="Transparent"
                  HorizontalAlignment="Stretch" />
</Grid>

The example is using the method of giving the splitter its own column but the same principle applies if it's Left or Right aligned in a shared column.


I know this is an ancient question but I thought I would add my answer anyway. After a lot of experimenting the following seems to work perfectly for a 1 pixel wide Gridsplitter

<ControlTemplate x:Key="gs0" TargetType="{x:Type GridSplitter}">
    <Border Margin="-5,0" Background="Transparent">
        <TextBlock Width="1"  Background="Green" />
    </Border>
</ControlTemplate>

Tested with the following code:

Grid HorizontalAlignment="Left"  >
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="200"/>
        <ColumnDefinition Width="1"/>
        <ColumnDefinition Width="200"/>
    </Grid.ColumnDefinitions>

<Grid Grid.Column="0">
    ....
</Grid>

<GridSplitter Grid.Column="1" HorizontalAlignment="Stretch" Template ="{StaticResource gs0}"/>

Without the template, the "mouse grabbing area" is 1 pixel. But set as above with the template, it is increased to 7 pixels which is about right. The same code can be adjusted for a 2 or more pixel width line, by tweaking the Textblock Width, Border Margin and ColumnDefinition Width. You can make the mouse grab ridiculously huge but the problem is that the increase is only on the left side; it's not centred on the line, which becomes more noticeable the more you increase it. But for a narrow line, it's an easy way to increase the mouse grab to something useable.

I'm using 2 pixel wide Gridsplitters and use a style to set IsMouseOver properties and such:

<Style TargetType="{x:Type GridSplitter}">
    <Setter Property="HorizontalAlignment" Value="Stretch"/>
    <Setter Property="Background" Value="LightGray"/>
    <Setter Property="OpacityMask" Value="{StaticResource gs_OpacityMask}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type GridSplitter}">
                <Border Margin="-3,0" Background="Transparent">
                    <TextBlock x:Name="tb" Width="2"  Background="{TemplateBinding Background}" />
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" TargetName="tb" Value="#FF0B75FD" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

IMPORTANT: The ColumnDefinition Width needs to be set to 3 or 4 in this case of a 2 pixel width line.