增加 WPF GridSplitter 鼠标抓取阈值

Question

是否可以增加与用户可以抓取它的网格拆分器的距离？

我的分割器只有 1px 宽。我希望能够从更远的距离抓住分离器。

现在我必须将鼠标指向精确的 1px 线才能抓住它。

并且分割器的宽度仍然必须是 1px

Answer 1

您可以更改GridSplitter 的实际大小，同时使其看起来更小。这将为您提供一个 7 像素宽度的区域来抓取它，同时以 1 像素显示：

<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>

该示例使用为拆分器提供自己的列的方法，但如果它在共享列中左对齐或右对齐，则同样的原则适用。

Answer 2

我知道这是一个古老的问题，但我想我还是会添加我的答案。经过大量实验后，以下内容似乎适用于 1 像素宽 Gridsplitter

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

用以下代码测试：

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}"/>

没有模板，“鼠标抓取区域”为1像素。但是按照上面的模板设置，它增加到7像素，这大约是正确的。通过调整Textblock、Width、Border Margin 和ColumnDefinition Width，可以针对 2 像素或更多像素宽度的线调整相同的代码。你可以让鼠标抓得非常大，但问题是增加只在左侧；它不是以直线为中心的，增加的越多，它就会变得越明显。但对于窄线，这是一种将鼠标抓取增加到可用的简单方法。

我使用 2 像素宽的 Gridsplitters 并使用样式来设置 IsMouseOver 属性等：

<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>

重要提示：ColumnDefinition Width 需要设置为 3 或 4 在这种情况下 2 像素宽度的线。

Answer 3

我无法让 John Bowen 的解决方案发挥作用。看起来很有效，但分离器似乎只有 1 个像素的抓取空间。

我最终这样做了：

<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>

这为分割器提供了 6 像素的高度，但只显示了 1 像素的顶部边框线。您使用负底部边距 ((Height / 2) - 1) 以使顶部边距线居中在行的中间。

背景是透明的，否则您将看到 6 像素的灰色或默认颜色。如果您使用 Blend 深入研究 GridSplitter 的控件模板，您会发现它只是一个带边框的样式化 Rectangle 或类似的东西。