WPF：自定义控件之Button-自定义样式，共用样式

      WPF 中 最好的特性就是我们自己可以自定义控件样式，小到一个Button按钮，大到DataGrid或者TreeView控件。不过要想知道如何定义样式，需要我们了解控件的特性，结构。也就是控件由什么构成的。            WPF中的控件基本分为 内容控件与条目控件。内容控件可以理解成用于承载内容的控件。WPF 的内容对象 为Object类型的，可以是一个string类型的字符串或者是一个Image，甚至可以是另一个控件。（比如在RadioButton 中嵌套一个Image与一个TextBlock）。常见的继承自ButtonBase的Button，RadioButton，CheckBox，ToggleButton以及TextBlock，TextBox等都是内容控件，都可以通过重写它的ControlTemplate 来重写控件结构。本文阐述了如果定义一个共有的Button 样式。（高手可以忽略不看，写给有点WPF基础的同学）

     1：定义Button样式

           先看效果图：

       图中显示了3个button按钮，能想象它们用的是同一个style么？而且还可以设置边框颜色，粗细以及背景色。如果放在基于GDI+的winform控件上，恐怕设计起来会很费劲。不过多废话，贴代码。

<Window  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  MinWidth="500" MinHeight="500"  >  <Window.Resources>      <Style TargetType="{x:Type Button}">             <Setter Property="MinWidth" Value="100"></Setter>             <Setter Property="MinHeight" Value="50"></Setter>             <Setter Property="Cursor" Value="Hand"></Setter>             <Setter Property="Template">                 <Setter.Value>                   <ControlTemplate TargetType="{x:Type Button}">                     <Border BorderThickness="3" BorderBrush="DarkViolet" CornerRadius="3"                      Background="{TemplateBinding Background}"                     Margin="{TemplateBinding Margin}"                     Padding="{TemplateBinding Padding}"                     MinWidth="{TemplateBinding MinWidth}"                      MinHeight="{TemplateBinding MinHeight}"                     HorizontalAlignment="{TemplateBinding HorizontalAlignment}"                      VerticalAlignment="{TemplateBinding VerticalAlignment}">                      <TextBlock Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}"                        FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" Text="{TemplateBinding Content}"></TextBlock>                     </Border>                   </ControlTemplate>                 </Setter.Value>             </Setter>           </Style>  </Window.Resources>  <Grid>  <UniformGrid Columns="1">      <Button Content="button1" FontSize="15" FontFamily="宋体"  Margin="10" Padding="30,10"  Background="Red"  HorizontalAlignment="Center" VerticalAlignment="Center"> </Button>      <Button Content="button2" FontSize="20" FontFamily="宋体" Margin="10" Padding="40,20"  Background="Yellow" HorizontalAlignment="Center" VerticalAlignment="Center"> </Button>      <Button Content="button3" FontSize="25" FontFamily="宋体" Margin="10" Padding="80,40"  Background="Gray" HorizontalAlignment="Center" VerticalAlignment="Center"> </Button>  </UniformGrid>  </Grid></Window>

         2： WPF 的Xaml 格式说白了就是xml格式，层层包含，类似于树。所以在WPF 中 一个控件对象 其实就是一个“树”。我们看不到的控件内容叫做”逻辑树“。这里说一下Window这个元素，截图中的窗口本身也是由布局控件构成的，通过使用Snoop工具查看 Window 可以看到如下图：

可以看出 由Border（在System.Windows.Controls命名空间下) 作为顶级容器以及包含其它子容器构成。

        回到Style样式，Style 定义由 Setter 定义一组键值对构成。Property指定属性，Value指定具体值。其中的TargetType 指定要应用样式的类型。

自定义控件结构就需要我们修改 Property为Template 的Value，Template 顾名思义 是 模板的意思。对的，我们就是需要重构其模板。ControlTemplate 下包含一个Border，之所以使用border，是因为方便定义边框的样式，当然也可以使用其它容器控件。在Border中的设置的属性元素都不一一解释了。往下看 会看到一个TextBlock控件，显示内容的主要属性设置是Text="{TemplateBinding Content}"，可能会对 引号里边的花括号有疑问，这里的花括号表示一个标记扩展，在WPF看来，只要碰到它，WPF编译器都会把它作为一个标记特性，括号里边的TemplateBinding,从字面意思理解是“模板绑定”，个人理解就是从模板绑定过来，也就是Button元素。之后的Content 标记属性 其实就是Button元素的Content属性，这样在Button元素上设定什么样的Content值，就会在模板中显示成什么值。其它的属性设置也是这个道理。

想测试的同学 直接将代码拷贝至一个新的window窗口或者UserControl 都可以查看效果。

以上都基于个人理解。