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的用途了，记录下来以备以后用到。