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的用途了，記錄下來以備以后用到。