8

ユーザーがつかむことができるグリッドスプリッターからの距離を伸ばすことは可能ですか?

私のスプリッターの幅はわずか 1px です。より遠くからスプリッターをつかむことができるようにしたいと思います。

今のように、マウスを正確な 1px ラインに合わせてつかむ必要があります。

スプリッターの幅は 1 ピクセルのままにする必要があります

4

3 に答える 3

18

GridSplitter小さいように見えたまま、実際のサイズを変更できます。これにより、1 ピクセルで表示しているときにそれをつかむための 7 ピクセル幅の領域が得られます。

<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 Width2 ピクセル幅の線の場合、 を 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 のコントロール テンプレートを掘り下げると、Border などを使用したスタイル設定された Rectangle にすぎないことがわかります。

于 2015-02-02T14:53:55.470 に答える