标签：控件 style button controltemplate wpf 模板属性

1.从button的style说起

　　button有很多属性，我们在xaml中定义一个按钮时可以指定button的content、background、height、width等等。这些都是button的属性，而style也不例外也是button的一个属性，只是在给style属性赋值时不能简单的像height=“100”一样简单的设定一个字符串。先看一个简单的例子

我们定义了一个style对象，名字叫btnstyle，然后给2个button的style属性上赋值这个btnstyle对象，这是一个最简单的方式用来给button的style属性赋值。其他控件也是如此。

btnstyle这个对象用targettype指定此style可以被谁使用，这里指定时button。内部把button的background设置成绿色，height设置成50，width设置成50。我们可以看到界面上2个button都被成功改变了。

1.1button的style的作用

如上面的例子，我们在style中可以改变button的一些属性。如background、height、width。在style中我们可以设置控件的各个属性。也可以设置一些trigger，做一些属性检测。比如当某个属性的值等于多少时，改变另一个属性的值是多少。

1.2style中的trigger

设置2个简单的trigger：

当button的content=“123”时，button的foreground变成红色

当button的content=“456”时，button的width变成200

style的定义：

运行结果：

2.进入controltemplate

2.1有了style为什么还需要有controltemplate

通过上面的例子我们可以看出如果我们想要改变button的属性，或者做一些trigger监听，可以使用button的style属性来完成。

现在来思考两个问题：

问题1：button为什么长这个样子

问题2：如何改变每个控件的外观

问题1：button为什么长这个样子？

为什么一个button默认是矩形，不是圆形，为什么button能显示一些文本？

答案就是：控件模板定义了button默认的样子。所以问题2也有了答案，改变控件的外观需要修改它的控件模板。（style是不能改变控件的外观的）

2.2button的控件模板初步体验

控件模板是button的template属性，我们在资源中定义一个controltemplate，指定target为button，并写一个名字叫btnct。需要注意控件模板必须要指定key才行，另外为什么是controltemplate？因为template属性的类型是controlyemplate

看btnct这个控件模板的效果：发现button不显示任何东西，图中红色方框中没显示任何东西。button的外观由控件模板决定，btnct这个模板是空的，所以导致不显示任何东西。

我们需要在controltemplate标签内去定义button的外观，这里就完全由我们决定了，怎么写，他就怎么显示。

例如：我们想让一个button的外观长这个样子

好，这个按钮除了显示文本还能显示一个”x“，那我们开始布局。

运行结果确实显示了，但是感觉怪怪的，我们在进一步修改：添加一个背景色

现在显示背景色了，再进一步优化：让按钮的样子变成圆形

现在看我们已经改变了button的外观。

修改控件模板只会改变外观不会影响事件触发

到此为止我们已经通过修改控件模板成功改变的button的外观，这个圆形button除外观和原来的button不用，其他任何功能都一样，所有的事件都仍有效。

2.3templatebinding

好，现在我们来看控件模板的代码

 <ControlTemplate TargetType="Button" x:Key="btnct">
            <Border  Background="Red" Height="50" Width="50" CornerRadius="25">
                <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                    <TextBlock Text="WPF"/>
                    <TextBlock Margin="10 0 0 0" Text="x"/>
                </StackPanel>
            </Border>
        </ControlTemplate>

我们设置background hight width都是再控件模板内部写的，现在来看一个问题，在定义button时给content height width赋值，发现button并没有随之变化，这是为什么？

 <Button  Content="templatetest" Height="100" Width="100"  Template="{StaticResource btnct}" Click="Button_Click"/>

因为我们在定义一个button时，wpf框架会从我们写的控件模板中解析这个button的外观，像content=”WPF“是写死在控件模板内部的，无论定义多少个button，content都显示WPF，那改如何解决这个问题？

很简单，只需要在button的content属性和控件模板内部的实际显示文本的控件产生一种关联即可。

我们看控件模板中真正显示WPF这个字符的是textblock

我们不能在这里写死，假设我们定义10个button，每个button显示文本也不同，需要把每个button的content属性和控件模板内部的textblock关联起来，具体语法如下：

可以看到button的content确实不一样了，同理我们在处理一下height和width

结果如下：

总结一下：控件模板是一个模板，当我们定义button时，button的外观取决于控件模板怎么定义，而控件模板内部的某些数据，可能需要被定义的这个button传递进去，这个传递通道使用templatebinding完成

3.style和controlyemplate的关联

button可以同时设置style和controltemplate，用style改变button的属性，用controltemplate改变button的外观。

3.1style能不能设置控件模板内部的控件？

同时设置style和controltemplate

<Button  Content="333" Height="100" Width="100" Style="{StaticResource btnstyle}" Template="{StaticResource btnct}" Click="Button_Click"/>

style：

controltemplate

style中的property可以设置的属性都是targettype指定的类型的控件中的，那style能不能改变controltemplate中的border、stackpanel、textblock呢？

答案是：能改，但是不能直接改。

看下面这个图：button的style属性和template属性，style中能改controltemplate中的border的background吗？不能，虽然style中property可以设置background，但是这个background是由style中的targettype指定的，也就是button的background，并不是controltemplate中的border的。style中只能改button的background，把controltemplate中的border的background通过templatebinding到button的background。（注意：这里指的style是button的style）