WPF重新定义GroupBox新样式

 先上图，看效果

是不是比原来的样式好看很多，这里面牵涉到了很多的常用功能，拿出来做个分享。

一、根据使用情况来定义控件的样式代码放置的位置

   首先就是WPF控件中的控件样式改变，这是WPF中特有的，在界面UI直接可以更改，而不需要像Winforms一样写很多的代码来实现，那控件的样式该如何重新定义呢？

1.界面上有大量相同的控件使用

仅仅在一个页码上，并且有多次使用的情况，可以直接在页面上去用<Window.Resources>来重新定义；

2.相同的控件，不同的样式 & 在不同的界面上均有使用

页面上有相同的控件，不同的样式时或者在不同的界面上会用到相同的控件样式时，避免我们多次是书写，可以在我们程序中的App.xaml文件中来定义不同的样式，在使用该样式时进行样式绑定即可；在App.xaml中需要使用<Style TargetType="GroupBox" x:Key="GroupBoxStyle > x:Key关键字来实现后期的样式绑定，使用时Style="{StaticResource GroupBoxStyle }"即可。

二、重新定义控件的样式

1.针对目标

 <Style TargetType="GroupBox">  直接通过Style样式来重新画，后面TargetType“目标”直接对应我们需要更改的控件，比如Textbox，Button，CheckBox，TextBlock等等，在WPF中可以用到的控件均可以重新定义；

2.针对选定目标的属性

<Setter Property="Foreground" Value="#2a2a2a"/>  接着在通过Setter设置，Property 属性  Value值所对应的关系写即可，Property 属性主要是你所针对目标所有的属性均可定义，Value  很好理解即是你需要的对应结果；

3.模版定义

<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="GroupBox">

通过 Template  模版的定义来实现我们的控件模版发生改变。

三、代码实现，代码分析

<Window.Resources>
    <Style TargetType="GroupBox">
        <Setter Property="Margin" Value="10,5"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="GroupBox">
                    <Grid>
                        <Polyline Points="0 30,0 10,10 0,30 0" Stroke="#2a2a2a" StrokeThickness="1" VerticalAlignment="Top" HorizontalAlignment="Left"/>
                        <Ellipse Width="4" Height="4" VerticalAlignment="Top" HorizontalAlignment="Left"
                                 Fill="#2a2a2a" Margin="24,-2,0,0"/>
                        <Ellipse Width="4" Height="4" VerticalAlignment="Top" HorizontalAlignment="Left"
                                 Fill="#2a2a2a" Margin="-2,24,0,0"/>
                        <Path Data="M0 0,3 3,30 3,33 0,68 0,73 7,78 7,78 10M8 0,25 0" Stroke="#2a2a2a" 
                              VerticalAlignment="Top" HorizontalAlignment="Right"/>
                        <Polyline Points="0,0 0,15 10,15" Stroke="#2a2a2a"  VerticalAlignment="Bottom" HorizontalAlignment="Left"/>
                        <Polyline Points="10,0 0,10" Stroke="#2a2a2a"  VerticalAlignment="Bottom" HorizontalAlignment="Right"/>
                        <Polygon Points="0,7 7 7 7 0" Fill="#2a2a2a" VerticalAlignment="Bottom" HorizontalAlignment="Right"/>
                        <Border BorderBrush="#2a2a2a" BorderThickness="0,1,0,0" VerticalAlignment="Top"
                                Margin="30,-0.5,78,0"/>
                        <Border BorderBrush="#2a2a2a" BorderThickness="0,0,1,0" HorizontalAlignment="Right" Margin="0,10"/>
                        <Border BorderBrush="#2a2a2a" BorderThickness="0,1,0,0" VerticalAlignment="Bottom" Margin="10,0"/>
                        <Border BorderBrush="#2a2a2a" BorderThickness="0,0,1,0" HorizontalAlignment="Left" Margin="-0.5,15"/>

                        <Path Data="M0 0,3 0,5 4,3 8,0 8,3 4" Fill="#2a2a2a" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="10,13"/>
                        <Path Data="M0 0,3 0,5 4,3 8,0 8,3 4" Fill="#aaaaaa" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="16,13"/>
                        <TextBlock Text="{TemplateBinding Header}" Foreground="#2a2a2a" VerticalAlignment="Top" FontSize="13"
                                   HorizontalAlignment="Left" Margin="25,8"/>
                        <ContentPresenter/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</Window.Resources>

上面GroupBox的样式即是通过此代码实现的。

我们来进行简单的分析，角落这边都是通过折线的方式来记性画图的，自然就用到了Polyline 。

Polyline 是一种用于绘制多条直线段连接而成的图形的控件。可以使用 Polyline 控件来创建各种形状，例如折线、多边形等。

右下角有一个三角形，使用到了Polygon 控件，Polygon 是一种用于绘制多边形的图形控件。Polygon 可以闭合形成一个封闭的多边形。

Polygon 与Polyline 不同，Polygon 会自动将最后一个点与第一个点连接起来，形成一个封闭的多边形。

当然他们也有很多相同的属性，Stroke 属性用于指定线条颜色，StrokeThickness 属性用于指定线条粗细。

特性	Polyline	Polygon
绘制形状	由多条直线段连接而成的开放图形	由多条直线段连接而成的封闭图形
闭合性	不闭合，最后一个点不会与第一个点连接	闭合，最后一个点会与第一个点连接
填充	不支持填充	支持填充
线条颜色	可以设置线条颜色	可以设置线条颜色
线条粗细	可以设置线条粗细	可以设置线条粗细
点集合	通过 Points 集合定义各个点的坐标	通过 Points 集合定义各个顶点的坐标
布局方式	无法形成封闭的图形	形成封闭的多边形

 右上角有一个很复杂的线路，是用Path来编写的，Path的功能非常的强大，可以画出各种图形，甚至上面的所有图像都可以进行用Path来画，但坐标点会很多，所以直线我们直接用border来画更快捷方便一些。

语法	用途	示例
M	移动到（Move To）指定的坐标点	M100,100
L	画直线（Line To）到指定的坐标点	L200,200
H	画水平线（Horizontal Line To）到指定的 X 坐标点	H300
V	画垂直线（Vertical Line To）到指定的 Y 坐标点	V150
C	画三次贝塞尔曲线（Cubic Bezier Curve）到指定的坐标点	C100,200 200,200 200,300
S	画平滑三次贝塞尔曲线（Smooth Cubic Bezier Curve）到指定的坐标点	S300,100 400,100
Q	画二次贝塞尔曲线（Quadratic Bezier Curve）到指定的坐标点	Q150,150 200,100
T	画平滑二次贝塞尔曲线（Smooth Quadratic Bezier Curve）到指定的坐标点	T300,200
A	画椭圆弧（Arc）到指定的坐标点	A50,50 45 1 0 1 350,100
Z	封闭路径（Close Path），将当前点与起始点连接起来形成封闭路径	Z

下面是Path的语法说明，可以自己的实验画出不同的图形； 

<TextBlock Text="{TemplateBinding Header}" Foreground="#2a2a2a" VerticalAlignment="Top" FontSize="13"
           HorizontalAlignment="Left" Margin="25,8"/>

最后通过 TextBlock来绑定GroupBox的表头即可完成最终的效果。