Increase WPF GridSplitter Mouse Capture Threshold

Question

Is it possible to increase the distance from the grid divider from which the user can grab it?

My separator is only 1 pixel wide. I would like to be able to capture the splitter from a greater distance.

As now, I have to point the mouse to the exact 1px line to capture it.

And the splitter should still be 1px wide

Answer 1

You can change the actual size of the GridSplitter , while maintaining a smaller size. This will give you an area of ​​width of 7 pixels to capture it while it is being displayed by 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 uses the method of providing a separator with its own column, but the same principle applies if it is left or right aligned in a common column.

Answer 2

I could not get John Bowen to work. This seemed to work, but it looks like the splitter had only 1 pixel of capture space.

I ended up with this:

 <Grid> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition Height="Auto"/> <RowDefinition/> </Grid.RowDefinitions> <Stackpanel Grid.Row="0"/> <GridSplitter Grid.Row="1" HorizontalAlignment="Stretch" BorderBrush="DarkGray" Height="6" Background="Transparent" BorderThickness="0,1,0,0" Margin="0,0,0,-4"/> <Stackpanel Grid.Row="2"/> </Grid> 

This gives a splitter 6 pixels high, but shows only the top line border of 1 pixel. You use the negative bottom margin ((Height / 2) - 1) to center the top margin of the field in the middle of the line.

Background Transparent, otherwise you will see 6 pixels of gray or w / e color by default. If you look into the control pattern for the GridSplitter using Blend, you will find that it is just a Rectangle style with a border or something like that.

Answer 3

I know this is an ancient question, but I decided to add my answer anyway. After a lot of experimentation, it seems that the following works perfectly for a 1 pixel Gridsplitter

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

Verified 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 a template, the mouse capture area is 1 pixel. But, as indicated above, with the template, it is increased to 7 pixels, which is something like this. The same code can be adjusted for a line with a width of 2 or more pixels by setting Textblock Width , Border Margin and ColumnDefinition Width . You can make the mouse capture ridiculously huge, but the problem is that the zoom only happens on the left side; it does not center on the line, which becomes more noticeable the more you increase it. But for a narrow line, this is an easy way to increase mouse capture to something useful.

I use Gridsplitters with a width of 2 pixels and use the style to set IsMouseOver properties, for example:

 <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: ColumnDefinition Width must be set to 3 or 4 in this case for a line 2 pixels wide.