#462 – 画一个外观更漂亮的GridSplitter(Drawing a Better Looking GridSplitter)

最新推荐文章于 2024-09-04 21:12:31 发布

翻译最新推荐文章于 2024-09-04 21:12:31 发布 · 2.1k 阅读

文章标签：

#WPF #GridSplitter #Style

WPF 专栏收录该内容

191 篇文章

订阅专栏

本文介绍如何通过自定义样式来美化WPF中GridSplitter控件的外观，包括使用线性渐变背景和绘制水平线条以增强视觉效果。

GridSplitter 用来分隔Grid面板的行和列。默认情况下，GridSplitter 控件由一个单独的Border 元素组成。你可以设置border的边框，颜色和背景色来改变GridSplitter 的外观。

我们可以在其表面画一对水平线使GridSplitter 的外观更漂亮。

我们通过重写GridSplitter 默认样式来实现这个外观。

<Window.Resources>
    <Style x:Key="GridSplitterPreviewStyle" >
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Rectangle Fill="#80000000"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="GridSplitterStyle1" TargetType="{x:Type GridSplitter}">
        <Setter Property="Background"
                Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
        <Setter Property="PreviewStyle" Value="{StaticResource GridSplitterPreviewStyle}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type GridSplitter}">
                    <Border BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Background="{TemplateBinding Background}"
                            CornerRadius="5">
                        <Canvas RenderOptions.EdgeMode="Aliased" UseLayoutRounding="True"
                                Height="6" VerticalAlignment="Center"
                                Width="50" HorizontalAlignment="Center">
                            <Line X1="0" X2="50" Y1="0" Y2="0"
                                  Stroke="White" StrokeThickness="1"/>
                            <Line X1="0" X2="50" Y1="1" Y2="1"
                                  Stroke="#A0A0A0" StrokeThickness="1"/>
                            <Line X1="0" X2="50" Y1="4" Y2="4"
                                  Stroke="White" StrokeThickness="1"/>
                            <Line X1="0" X2="50" Y1="5" Y2="5"
                                  Stroke="#A0A0A0" StrokeThickness="1"/>
                        </Canvas>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

同时，也为GridSplitter 指定渐变的背景色。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition Height="Auto"/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
 
    <Label Content="Row 0 Col 0" Background="Azure" Grid.Row="0" Grid.Column="0" />
    <Label Content="Row 0 Col 1" Background="Lavender" Grid.Row="0" Grid.Column="1" />
    <Label Content="Row 2 Col 0" Background="Moccasin" Grid.Row="2" Grid.Column="0" />
    <Label Content="Row 2 Col 1" Background="Honeydew" Grid.Row="2" Grid.Column="1" />
 
    <GridSplitter Grid.Row ="1" Grid.ColumnSpan="2" Height="16"
                  VerticalAlignment="Center" HorizontalAlignment="Stretch"
                  BorderBrush="White" BorderThickness="1"
                  Style="{DynamicResource GridSplitterStyle1}">
        <GridSplitter.Background>
            <LinearGradientBrush EndPoint="0.5,0" StartPoint="0.5,1">
                <GradientStop Color="#A0A0A0" Offset="0"/>
                <GradientStop Color="#E5E5E5" Offset="0.15"/>
                <GradientStop Color="#ECECEC" Offset="0.8"/>
                <GradientStop Color="#E5E5E5" Offset="1"/>
            </LinearGradientBrush>
        </GridSplitter.Background>
    </GridSplitter>
</Grid>

原文地址：https://wpf.2000things.com/2011/12/30/462-drawing-a-better-looking-gridsplitter/