Blend 2015 教程 （二） 樣式

前一篇講述了如何在新Blend中完成一個簡單的帶數據綁定的界面小例子，本篇將講述一下，把View層和Style層分開，並搭建Style層框架的方法，並進行細節樣式修改。

1. 在解決方案資源管理器面板的項目結構樹中的項目項（標有圖標C#）上右鍵點擊，選擇 添加-新建文件夾，起名為Styles。在剛添加的Styles文件夾上右鍵點擊，選擇 添加-資源字典，起名為CoreStyle.xaml，點擊確定。再添加一個，起名為BaseStyle.xaml。

2. 打開MainWindow.xaml，選擇人員列表TextBlock，在屬性面板中點擊字體和字號的小方塊（小方塊為藍色，說明是樣式起作用），選擇轉換為本地值。點擊Style屬性的小方塊，選擇重置。在文檔大綱面板中右鍵點擊人員列表TextBlock，在彈出菜單中選擇 編輯樣式-創建空樣式，起名為TitleTextStyle，在定義位置中應該選擇第三個選項，再選擇我們剛才創建的資源字典BaseStyle.xaml，但發現第三個選項是灰的，點擊新建也不能使用，可能是Preview版的BUG，只能暫且選擇第二個選項本文檔，點擊確定，此時進入樣式編輯模式。

點擊字體的小方塊，選擇轉換為新資源，起名TitleFontFamily，在定義位置中選擇第二個選項，點擊確定。點擊字號的小方塊，選擇轉換為新資源，起名TitleFontSize，在定義位置中選擇第二個選項，點擊確定。

這里創建了一個兩層的樣式框架，底層為核心層，為應用程序的核心字體，字號，前景顏色，背景顏色等的定義，上一層為文本塊等基礎元素的樣式定義，視為基礎層，會引用核心層的定義。第三層就應該為復雜控件的樣式了，其引用基礎層的定義，或直接引用核心層的定義。這樣做的好處是一旦修改應用程序的核心樣式定義，如字體，字號等，一般只需修改核心層的定義，不用改其他的地方，甚至可以在運行時動態修改，因為Blend默認把這些資源引用都作為動態資源引用。

3. 點擊文檔大綱面板的退到上一層按鈕，退出樣式編輯模式。選擇ListBox，點擊美工板導航欄的ListBox，選擇 編輯其他模板-編輯生成的項-編輯當前項。在美工板中選擇TextBlock，使用和上述相同的方法，為TextBlock創建新樣式，起名為CoreTextStyle。

這時美工板導航欄變為如下圖，

表示正在編輯ListBox控件的模板中的TextBlock的樣式，這個需要理解。

在屬性面板中把字體改為SimSun，字號改為16 px，再把字體和字號轉換為新資源，起名為CoreFontFamily和CoreFontSize。

4. 點擊文檔大綱面板的返回上一層按鈕，然后選擇CheckBox控件，為其創建新樣式，起名為CheckBoxBaseStyle，此時需要點擊主菜單 格式-編輯樣式-創建空白項，名稱改為CheckBoxBaseStyle，點擊確定。在屬性面板中點擊字體的小方塊，選擇 本地資源-CoreFontFamily，點擊字號的小方塊，選擇 本地資源-CoreFontSize。

5. 至此字體字號的抽取工作已經基本完成，也可針對前景色進行抽取。

設計器呈現效果如下，

代碼如下，

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:BlendDemo"
        xmlns:System="clr-namespace:System;assembly=mscorlib" x:Class="BlendDemo.MainWindow"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525" d:DataContext="{d:DesignData /SampleData/SampleDataSource/SampleDataSource.xaml}">
    <Window.Resources>
        <Style x:Key="TextBlockStyle1" TargetType="{x:Type TextBlock}">
            <Setter Property="FontFamily" Value="SimHei"/>
            <Setter Property="FontSize" Value="22"/>
        </Style>
        <DataTemplate x:Key="DataTemplate1">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <TextBlock Height="Auto" TextWrapping="Wrap" Text="{Binding Name}" Width="Auto" Style="{DynamicResource CoreTextStyle}"/>
                <CheckBox Content="男" Grid.Column="1" Height="Auto" Width="Auto" IsChecked="{Binding Sex}" Style="{DynamicResource CheckBoxBaseStyle}"/>
            </Grid>
        </DataTemplate>
        <FontFamily x:Key="TitleFontFamily">SimHei</FontFamily>
        <System:Double x:Key="TitleFontSize">22</System:Double>
        <Style x:Key="TitleTextStyle" TargetType="{x:Type TextBlock}">
            <Setter Property="FontFamily" Value="{DynamicResource TitleFontFamily}"/>
            <Setter Property="FontSize" Value="{DynamicResource TitleFontSize}"/>
        </Style>
        <FontFamily x:Key="CoreFontFamily">SimSun</FontFamily>
        <System:Double x: Key="CoreFontSize">16</System:Double>
        <Style x:Key="CoreTextStyle" TargetType="{x:Type TextBlock}">
            <Setter Property="FontFamily" Value="{DynamicResource CoreFontFamily}"/>
            <Setter Property="FontSize" Value="{DynamicResource CoreFontSize}"/>
        </Style>
        <Style x:Key="CheckBoxBaseStyle" TargetType="{x:Type CheckBox}">
            <Setter Property="FontFamily" Value="{DynamicResource CoreFontFamily}"/>
            <Setter Property="FontSize" Value="{DynamicResource CoreFontSize}"/>
        </Style>
    </Window.Resources>
    <Grid >
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <TextBlock Text="人員列表" Margin="10" Style ="{DynamicResource TitleTextStyle}"/>
        <ListBox Grid.Row="1" ItemsSource="{Binding Persons}" ItemTemplate="{DynamicResource DataTemplate1}" HorizontalContentAlignment="Stretch"/>
    </Grid >
</Window>

由於前文所說的那個BUG，現在樣式和資源都在本文件中，沒有直接放入他們該在的地方。下面使用資源面板對資源進行一下重新組織。目前資源面板如下圖，

將TextBlockStyle1刪除（點擊右鍵，在彈出菜單中選擇刪除），將DataTemplate1重命名為PeopleListBoxDataTemplate，重命名的方法是，在選中該資源的條件下，在資源名稱上左鍵單擊，此時變為編輯狀態，可修改或粘貼，焦點離開時會彈出如下所示對話框，

問是否更新引用，選擇更新引用，點擊繼續完成修改。

6. 在App.xaml上右鍵單擊，在彈出菜單中選擇 鏈接到資源字典-CoreStyle.xaml，把CoreStyle.xaml作為全局資源字典引用，使用同樣的方法把BaseStyle.xaml也作為全局資源字典引用。

把MainWindow.xaml下的Window下的TitleFontFamily，TitleFontSize，CoreFontFamily，CoreFontSize四個資源拖動到CoreStyle.xaml中，把TitleTextStyle，CoreTextStyle，CheckBoxBaseStyle三個資源拖動到BaseStyle.xaml中。

至此，樣式框架已經搭建好了。

代碼如下，

MainWindow.xaml

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:BlendDemo"
        xmlns:System="clr-namespace:System;assembly=mscorlib" x:Class="BlendDemo.MainWindow"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525" d:DataContext="{d:DesignData /SampleData/SampleDataSource/SampleDataSource.xaml}">
    <Window.Resources>
        <DataTemplate x :Key="PeopleListDataTemplate">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <TextBlock Height="Auto" TextWrapping="Wrap" Text="{Binding Name}" Width="Auto" Style="{DynamicResource CoreTextStyle}"/>
                <CheckBox Content="男" Grid.Column="1" Height="Auto" Width ="Auto" IsChecked="{Binding Sex}" Style="{DynamicResource CheckBoxBaseStyle}"/>
            </Grid>
        </DataTemplate>
    </Window.Resources>
    <Grid >
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <TextBlock Text="人員列表" Margin="10" Style ="{DynamicResource TitleTextStyle}"/>
        <ListBox Grid.Row="1" ItemsSource="{Binding Persons}" ItemTemplate="{DynamicResource PeopleListDataTemplate}" HorizontalContentAlignment="Stretch"/>
    </Grid >
</Window>

CoreStyle.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:BlendDemo" xmlns:System="clr-namespace:System;assembly=mscorlib"> <FontFamily x:Key="TitleFontFamily">SimHei</FontFamily> <System:Double x:Key="TitleFontSize">22</System:Double> <FontFamily x:Key="CoreFontFamily">SimSun</FontFamily> <System:Double x:Key="CoreFontSize">16</System:Double> </ ResourceDictionary>

BaseStyle.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:BlendDemo.Styles">
    <Style x:Key="TitleTextStyle" TargetType="{x:Type TextBlock}">
        <Setter Property="FontFamily" Value="{DynamicResource TitleFontFamily}"/>
        <Setter Property="FontSize" Value="{DynamicResource TitleFontSize}"/>
    </Style >
    <Style x:Key="CoreTextStyle" TargetType="{x:Type TextBlock}">
        <Setter Property="FontFamily" Value="{DynamicResource CoreFontFamily}"/>
        <Setter Property="FontSize" Value="{DynamicResource CoreFontSize}"/>
    </Style >
    <Style x:Key="CheckBoxBaseStyle" TargetType="{x:Type CheckBox}">
        <Setter Property="FontFamily" Value="{DynamicResource CoreFontFamily}"/>
        <Setter Property="FontSize" Value="{DynamicResource CoreFontSize}"/>
    </Style >
</ResourceDictionary>

7. 最后再進行一下標題部分的樣式改進和抽取工作。在文檔大綱面板中的人員列表TextBlock（如果在內部模板或樣式的編輯狀態，需要先退出）上右鍵單擊，在彈出菜單中選擇 分組-Border，可看到會在TextBlock外面套一層Border，並把Margin移到Border上。在Border上右鍵單擊，選擇 編輯樣式-創建空樣式，起名為TitleStyle。

此時進入Border的樣式編輯狀態。把Margin清除，可先轉換為本地值，然后再重置。設置Padding為10，10，10，10，設置背景色為淺灰色。設置方法為，在選中畫筆部分的Background屬性后，點擊中部的第二個按鈕，設為實色畫刷，然后選擇或輸入顏色，如下圖所示。

效果如下，

代碼如下，

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:BlendDemo"
        xmlns:System="clr-namespace:System;assembly=mscorlib" x:Class="BlendDemo.MainWindow"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525" d:DataContext="{d:DesignData /SampleData/SampleDataSource/SampleDataSource.xaml}">
    <Window.Resources>
        <DataTemplate x:Key="PeopleListDataTemplate">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <TextBlock Height="Auto" TextWrapping="Wrap" Text="{Binding Name}" Width="Auto" Style="{DynamicResource CoreTextStyle}"/>
                <CheckBox Content="男" Grid.Column="1" Height="Auto" Width="Auto" IsChecked="{Binding Sex}" Style="{DynamicResource CheckBoxBaseStyle}"/>
            </Grid>
        </DataTemplate>
        <Style x:Key="TitleStyle" TargetType="{x:Type Border }">
            <Setter Property="Padding" Value="10"/>
            <Setter Property="Background" Value="#FFDEDDDD"/>
        </Style>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Border Style="{DynamicResource TitleStyle}" >
            <TextBlock Text="人員列表" Style="{DynamicResource TitleTextStyle}"/>
        </Border>
        <ListBox Grid.Row="1" ItemsSource="{Binding Persons}" ItemTemplate="{DynamicResource PeopleListDataTemplate}" HorizontalContentAlignment="Stretch"/>
    </Grid>
</Window>

需要將TitleStyle也放入BaseStyle.xaml中以便復用，就不演示了。

下一篇將進一步修改ListBox的樣式，敬請關注。