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.