8

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

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

就像现在一样，我必须将鼠标指向确切的 1px 线才能抓住它。

并且拆分器的宽度仍然必须为 1px

4

3 回答 3

18

您可以更改实际大小，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>

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

于 2010-03-14T18:33:10.683 回答
3

我知道这是一个古老的问题，但我想我还是会添加我的答案。经过大量试验后，以下似乎完美适用于 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和，可以为 2 或更多像素宽度的线调整相同的代码ColumnDefinition Width。你可以让鼠标抓得非常大，但问题是增加只在左侧；它不是以直线为中心的，增加的越多，它就会变得越明显。但是对于一条窄线，这是一种将鼠标抓取增加到可用的简单方法。

我使用 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在这种情况下，需要将 2 像素宽度线设置为 3 或 4。

于 2019-09-27T00:04:14.113 回答
2

我无法让 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 或类似的东西。

于 2015-02-02T14:53:55.470 回答