更改控件外观

记录学习

更改控件外观有三种方法：属性、style、controltemplate。

style：可以一次对多个控件设置属性。

contenttemplate: 自定义control外观，利用行为更改外观。

属性：
<window x:class="wpfapp1.mainwindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:ignorable="d"
        title="mainwindow" height="450" width="800">
    <grid>
        <button fontsize="14"
                fontweight="bold">
            <button.background>
                <!--background类型是个brush lineargradientbrush继承brush，因此作为background值-->
                <lineargradientbrush startpoint="0,0.5"
                                     endpoint="1,0.5">
                    <gradientstop color="green"
                                  offset="0.0" />
                    <gradientstop color="white"
                                  offset="0.9" />
                </lineargradientbrush>
            </button.background>
        </button>
    </grid>
</window>

style：
<window x:class="wpfapp1.mainwindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:ignorable="d"
        title="mainwindow"
        height="450"
        width="800">
    <window.resources>
        <style targettype="button">
            <setter property="fontsize"
                    value="14" />
            <setter property="background">
                <setter.value>
                    <lineargradientbrush startpoint="0,0.5"
                                         endpoint="1,0.5">
                        <gradientstop color="green"
                                      offset="0.0" />
                        <gradientstop color="white"
                                      offset="0.9" />
                    </lineargradientbrush>
                </setter.value>
            </setter>
        </style>
    </window.resources>
    <grid>
        <button fontsize="14"
                fontweight="bold">
        </button>
    </grid>
</window>

controltemplate:
<window x:class="wpfapp1.mainwindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:ignorable="d"
        title="mainwindow"
        height="450"
        width="800">
    <window.resources>
        <style targettype="button">
            <setter property="template"> 
                <!--template是button的一个属性值-->
                <setter.value>
                    <!--controltemplate继承template-->
                    <controltemplate targettype="button">
                        <border x:name="border1"                                 
                                cornerradius="20"
                                borderthickness="1"
                                borderbrush="black">
                            <border.background>
                                <lineargradientbrush startpoint="0,0.5"
                                                     endpoint="1,0.5">
                                    <gradientstop color="{binding background.color, 
                                     relativesource={relativesource templatedparent}}"
                                                  offset="0.0" />
                                    <gradientstop color="white"
                                                  offset="0.9" />
                                </lineargradientbrush>
                            </border.background>
                            <contentpresenter margin="2"
                                              horizontalalignment="center"
                                              verticalalignment="center"
                                              recognizesaccesskey="true" />
                        </border>
                        <controltemplate.triggers> 
                            <!--按钮的ispressed只读属性 当ispressed为true的时候-->                            
                            <trigger property="ispressed"
                                     value="true">
                                <!--设置contenttemplate里的border1,只能是当前contenttemplate的content-->
                                <setter targetname="border1"
                                        property="background">
                                    <setter.value>
                                        <lineargradientbrush startpoint="0,0.5"
                                                             endpoint="1,0.5">
                                            <!--templateparent就是当前修饰的button-->
                                            <gradientstop color="{binding background.color, 
                                             relativesource={relativesource templatedparent}}"  
                                                          offset="0.0" />
                                            <gradientstop color="darkslategray"
                                                          offset="0.9" />
                                        </lineargradientbrush>
                                    </setter.value>
                                </setter>
                            </trigger>
                        </controltemplate.triggers>
                    </controltemplate>
                </setter.value>
            </setter>
        </style>
    </window.resources>
    <grid>
        <button fontsize="14"
                fontweight="bold" background="yellow" >
        </button>
    </grid>
</window>