WPF Style-ControlTemplate 使用

1、序言

　　在WPF中，设置外观样式我们有很多种方式，比如通过设置控件的属性来控制控件的外观样式；或者通过在每一个控件中分别设置Style；或者通过在整个Window.Resource中设置Style，又或者在App.xaml的Application.Resource设置Style。总之样式概念使开发人员能够更好的设置控件的外观，下面就上面的几种情形进行说明。

2、通过在控件中设置Style来控制控件的外观

　　

<Window x:Class="WpfApplication5.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="300" Width="300">
    <Grid>
        <Button Click="Button_Click">
            <Button.Style>
                <Style TargetType="Button">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="Button">
                            <Grid>
                                <Rectangle Width="100" Fill="Red" ></Rectangle>
                            </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Button.Style>
        </Button>
    </Grid>
</Window>

 

显示效果：

分析：我们把样式直接作用于当前Button控件，样式在这里用于设置控件模板，使Button显示矩形框形状。

3、通过在Window.Resource中设置Style来控制控件的外观

　　1）在Style中添加X:Key属性

<Window x:Class="WpfApplication5.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <Style TargetType="Button" x:Key="ButtonStyle">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="Button">
                            <Grid>
                                <Rectangle  Fill="Red"></Rectangle>
                                <Label>我是在Resources中设计的样式</Label>
                        </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
    </Window.Resources>
    <Canvas>
        <Button Width="200" Height="50" Canvas.Left="0" Canvas.Top="0" Style="{StaticResource ButtonStyle} ">
        </Button>
        <Button Width="200" Height="50" Canvas.Left="0" Canvas.Top="80">
        </Button>
    </Canvas>
</Window>

 

效果图如下：

分析：虽然Style的TargetType="Button"，但是由于没有为第二个Button指定Style,所以Style没有作用于第二个Button。

2）

<Window x:Class="WpfApplication5.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <Style TargetType="Button" >
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="Button">
                            <Grid>
                                <Rectangle  Fill="Red"></Rectangle>
                                <Label>我是在Resources中设计的样式</Label>
                        </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
    </Window.Resources>
    <Canvas>
        <Button Width="200" Height="50" Canvas.Left="0" Canvas.Top="0">
        </Button>
        <Button Width="200" Height="50" Canvas.Left="0" Canvas.Top="80">
        </Button>
    </Canvas>
</Window>

 

效果图如下：

分析：由于没有为Style设置Key,而且也没有为Button设置特定的Style,所以Style作用于整个Window的所有Button(没有两外为Button指定Style)。

3、通过在App.xaml中的Application.Resource中设置Style来控制控件的外观

<Application x:Class="WpfApplication5.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="Window1.xaml">
    <Application.Resources>
        <Style TargetType="Button" >
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <Rectangle  Fill="Red"></Rectangle>
                            <Label>我是在Resources中设计的样式</Label>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Application.Resources>
</Application>

 

<Window x:Class="WpfApplication5.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <Style TargetType="Button" x:Key="WindowStyle" >
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="Button">
                            <Grid>
                                <Rectangle  Fill="Blue"></Rectangle>
                                <Label>我是在Resources中设计的样式</Label>
                        </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
    </Window.Resources>
    <Canvas>
        <Button Width="200" Height="50" Canvas.Left="0" Canvas.Top="0" Style="{StaticResource WindowStyle}">
        </Button>
        <Button Width="200" Height="50" Canvas.Left="0" Canvas.Top="80">
        </Button>
    </Canvas>
</Window>

 

效果图如下：

分析：由于第一个Button指定了Style,所以key=WindowStyle的样式作用于它。第二个Button没有指定，所以在App资源中定义的Style作用于第二个Button.

以上是比较简单的Demo,但是能够说明Style的用途了，记录下来以备以后用到。