WPF 更改控件的外观的三种办法

   原创文章，如果转载请注明本出处。

     在WPF内，控件这个词需要有所区分，单词control指的是所有控件（包括那些不是继承自Control类的可见对象类），control是一种松散概念，单词Control(第一个字符大写）则表示的是Conrol类，它可以单独使用，它也是Button,Label,TextBox等控件的父类。

    今天专门简单谈谈如何更改控件的外观。一般有三种办法：

• 更改控件的属性值；
• 创建Style样式；
• 创建一个新ControlTemplate控件；

1）更改控件的属性值，这个大家都应该能理解，也是大部分时候用到的情况，在此不做详细展开。

2）创建Style样式，这种方式一般用在样式需要同时用在多个或多种控件时候采用的办法，它其实是第1）种办法的另一种写法，只不过这种写法方便将一种外观立即作用到更多控件当中，形成批发效应。下面给出微软官网里的这个例子:

<Style TargetType="Button">

  <Setter Property="FontSize" Value="14"/>
  <Setter Property="FontWeight" Value="Bold"/>
  <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>

按钮的效果如下所示：

上面的Style一般需要定义在XMAL文件的ResourceDictionary当中，比如FrameworkElement的Resources属性中。

另外，如果希望将这个Style只应用在个别控件当中，可以在Style里定义Key属性，使用该Style的控件只要指定这个Key即可。

3）下面重点介绍一下ControlTemplate方式更改外观。

微软官方文档里写着：ControlTemplate是拿来给Control控件定义外观用的。

WPF开发人员一看到Control类或者继承自Control类，应该立马想到他有个叫Template的属性,这个属性类型是ControlTemplate。

上面这句对于想自定义控件外观的人，需要牢牢记住。

ControlTemplate是一种比上面1）2）还要高级的外观定义方式。

ControlTemplate可以给Control类型控件提供不同于默认形态的外观，你只需要直接修改ControlTemplate就可以更改外观，而不需要继承Control。

下面的例子是关于Button（Button也属于Control类）的一个ControlTemplate例子：

<!--Define a template that creates a gradient-colored button.-->
<Style TargetType="Button">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="Button">
        <Border 
          x:Name="Border"  
          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>
          <!--Change the appearance of
          the button when the user clicks it.-->
          <Trigger Property="IsPressed" Value="true">
            <Setter TargetName="Border" Property="Background">
              <Setter.Value>
                <LinearGradientBrush StartPoint="0,0.5" 
                                     EndPoint="1,0.5">
                  <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>

<Button Grid.Row="2" Grid.ColumnSpan="2" Name="submitName"        Background="Green">View message</Button>

效果，之前:

鼠标按了之后:

上面的例子当中还用到了WPF的绑定技术、触发器技术，这就是一层一层知识的交叠，暂时搁置，后面有时间会一一给出说明。

更多关于ControlTemplate，以后有机会再详细告诉大家！