WPF 控件专题 Separator控件详解

1、Separator介绍

    Separator ：分隔符/分割线，用于分隔项控件中各个项的控件。

**************************************************************************************************************

2、常用属性

    Background：背景色，分割线的颜色；
    
    HorizontalAlignment/VerticalContentAlignment：该元素在父类布局中水平对齐方式/垂直对齐方式；
    
    Margin：元素外边距；
    
    Opacity：透明度设置；
    
    Width/Height：宽度/高度；

**************************************************************************************************************

3、具体代码示例

<Window x:Class="WPFControlsTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPFControlsTest"
        mc:Ignorable="d" Background="#2d323c" Foreground="#dddddd"
        Title="MainWindow" Height="200" Width="320">
    <Grid Margin="10">
        <Separator Margin="0 0" Background="Red" Width="200" Height="10" SnapsToDevicePixels="True" HorizontalAlignment="Stretch" VerticalAlignment="Top"/>
        <Separator Margin="0 0" Background="Green" Width="100" Height="10" SnapsToDevicePixels="True" HorizontalAlignment="Left" VerticalAlignment="Center">
            <Separator.LayoutTransform>
                <TransformGroup>
                    <TransformGroup.Children>
                        <TransformCollection>
                            <RotateTransform Angle="90"/>
                        </TransformCollection>
                    </TransformGroup.Children>
                </TransformGroup>
            </Separator.LayoutTransform>
        </Separator>

    </Grid>
</Window>	

**************************************************************************************************************

4、运行效果图

**************************************************************************************************************

5、总结和扩展

    Separator中是没有属性可以设置数值分割线的，但是我们可以通过设置LayoutTransform来实现该功能。

    在实际写示例过程中发现，设置Height值（大于0）是没有效果的，运行后分割线高度始终是1个像素。

    其实要实现分割线的功能还可以用Border、Rectangle、GridSplitter控件。

**************************************************************************************************************