Blend 2015 教程 （一） 基礎

微軟公司在Visual Studio 2015產品套件中作出了許多革命性的變更，包括.NET開源，.NET服務器端部分跨平台，推出向個人和小團隊免費的社區版，移動應用開發部分跨平台支持，商店應用支持C#編譯成本地代碼等。

另一個很重大的改進就是Blend使用Visual Studio框架重新制作，以使得XAML和C#代碼的編輯能力達到了Visual Studio的水平。由於對XAML的解析使用獨立的進程進行，穩定性得到了極大的提高。下文就對這個重新制作的Blend進行一些初步研究。

首先通過菜單 文件-新建-項目 打開如下對話框，創建一個新的WPF項目。

這時發現用戶界面已經改為Visual Studio的模式，解決方案資源管理器和團隊資源管理器面板和Visual Studio的一模一樣，也就意味着對項目文件和類庫的管理能力和對源代碼管理的支持能力達到了VS的程度，這點是非常值得讓人高興的。界面菜單項的安排，錯誤列表面板，輸出面板，查找結果面板也都和VS一樣，查找和替換功能的使用也和VS一致。

原來的屬性編輯功能使用屬性面板實現，原來的對象瀏覽器功能使用增強版的文檔大綱面板實現。資產面板，狀態面板，觸發器面板，數據面板和資源面板和原有版本保持一致。

原有的美工板部分現在使用VS框架中核心的文檔編輯功能實現，打開一個XAML文件，使用和VS相似的界面展現，左側增加了Blend的工具欄，如下圖。

可視化編輯能力達到了原有Blend的水平，代碼編寫能力又達到了VS的水平，可謂是VS和Blend的完美結合。C#的開發也和VS保持一致，包括智能感知，查找引用等特性的支持，但目前不支持Resharper（Visual Studio 2015可以支持Resharper9）。以后做View層開發的人員可以只用Blend一個工具了，不用像以前一樣同時開VS和Blend了，還得進行代碼同步。

下面通過一個簡單的小例子嘗試通過可視化開發的方法完成添加控件，修改布局，樣式抽取，創建樣例數據，數據模板編輯，數據綁定等工作，以對新Blend的使用進行探究。

1. 首先在美工板中移動鼠標，看到出現如下圖黃色的線單擊，使Grid添加一行。

再把鼠標移到如下圖位置，美工板中出現39*圖示，點擊星號，可在各種模式之間切換，先暫時改為39鎖。

目前代碼如下

<Window x:Class="BlendDemo.MainWindow"
        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"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="39"/>
            <RowDefinition/>
        </Grid.RowDefinitions>

    </Grid>
</Window>

2. 按快捷鍵T或在左側工具欄中選擇TextBlock工具，在Grid的第一行中繪制一個文本塊，按Escape鍵取消編輯狀態，按Ctrl+Shift+R組合鍵，或通過菜單 格式-布局-重置全部命令，重置全部布局參數。在選中文本塊控件的條件下，在屬性面板中點擊Text屬性右側的黑色方塊，選中重置，以重置該屬性。點擊文本組屬性下方的下拉按鈕展開更多屬性，用同樣的方法把TextWrapping屬性也重置為默認值。

下面說明一下小方塊的各種顏色的含義，

黑色表示本地值，即通過XAML標簽屬性直接設置的值。

綠色表示引用資源，靜態或動態的資源。

黃色表示綁定，普通綁定或模板綁定。

紫色表示繼承的值。

藍色表示通過樣式獲取的值。

應該記住這些顏色的含義，以便觀察屬性面板時一目了然。

在Text屬性中輸入“人員列表”，修改文本組中的字體和字號為SimHei和22px，如果字號的單位是pt，可以在菜單 工具-選項-XAML設計器-類型單位 中改為像素，以和XAML代碼中保持一致。設置Margin為10，10，10，10。

按前述所示把Grid的第一行改為Auto（點擊鎖變為Auto）。

此時代碼如下

<Window x:Class="BlendDemo.MainWindow"
        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"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <TextBlock FontFamily="SimHei" Text="人員列表" FontSize="22" Margin="10"/>

    </Grid>
</Window>

3. 在文檔大綱面板中選擇TextBlock控件后，右鍵點擊，在彈出的菜單中選擇 編輯樣式-創建空樣式，在彈出的窗口中點擊確定按鈕，以創建樣式。

可以看到此時美工板頂部的導航欄中出現了一個調色板一樣的圖示，表示現在正在編輯樣式。

此時在屬性面板中，在文本組中，點擊字體和字號右側的小方塊，選擇轉換為本地值，可以看到這時字體和字號就被抽取到樣式里了，代碼如下。

<Window x:Class="BlendDemo.MainWindow"
        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"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Style x:Key="TextBlockStyle1" TargetType="{x:Type TextBlock}">
            <Setter Property="FontFamily" Value="SimHei"/>
            <Setter Property="FontSize" Value="22"/>
        </Style>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <TextBlock Text="人員列表" Margin="10" Style="{DynamicResource TextBlockStyle1}"/>

    </Grid>
</Window>

4. 點擊文檔大綱面板頂部的返回上一級按鈕（橫線加向上箭頭），退出樣式編輯模式。在資產面板中選擇ListBox控件，在美工板中的Grid的第二行的位置上拖動出一個ListBox控件，按Ctrl+Shift+R重置布局。

5. 在數據面板中添加樣例數據。首先選擇項目或此文檔，此處選擇項目，這樣可以做到多個文件共享數據。點擊面板右上方的創建示例數據按鈕，選擇新建示例數據，在彈出的對話框中輸入數據源名稱，勾選在應用程序運行時啟用示例數據選項，點擊確定。

把Collection，Property1和Property2改為Persons，Name和Sex，可以嘗試加入其他類型的屬性，包括簡單屬性和集合屬性等。

6. 點擊數據面板下方的設置設計時數據上下文按鈕，彈出如下對話框。

選擇DesignData，點擊確定按鈕。

可以看到代碼中加入了d:DataContext。

<Window x:Class="BlendDemo.MainWindow"
        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"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525" d:DataContext="{d:DesignData /SampleData/SampleDataSource/SampleDataSource.xaml}">

也就是說設計時數據並沒有占用正常的DataContext屬性，以后ViewModel層開發人員可以正常使用。

7. 在美工板或文檔大綱面板中選中ListBox控件，在屬性面板中點擊ItemsSource屬性右側的小方塊，在彈出的菜單中選擇創建數據綁定。在彈出的對話框中選擇Persons，點擊確定按鈕。

8. 在美工板或文檔大綱面板中選中ListBox控件，在美工板頂部導航欄中，點擊ListBox，在彈出的菜單中選擇 編輯其他模板-編輯生成的項-創建空白項，輸入名稱，點擊確定。此時進入ItemTemplate編輯模式，美工板導航欄如下圖。

點擊美工板左側欄中的Grid按鈕，在美工板中繪制一個Grid布局，使用前文所述的方法把Grid分成兩列，在第一列中繪制一個文本塊，第二列中繪制一個CheckBox，使用快捷鍵重置文本塊和CheckBox的布局（Ctrl+Shift+R）。把Grid的第一列改為*，第二列改為Auto，並清除Width和Height（在文檔大綱面板中選擇Grid布局，在屬性面板中，點擊Width和Height的小方塊，選擇重置）。這時文本塊和CheckBox並沒有拉伸開，如下圖。

點擊美工板導航欄中的ListBox按鈕，在屬性面板中把HorizontalContentAlignment改為Stretch，這樣就變成了如下圖所示。

9. 點擊美工板導航欄中的Grid按鈕，重新進入ItemTemplate編輯狀態。選擇TextBlock控件，在屬性面板中點擊Text屬性的小方塊，選擇創建數據綁定，在彈出的對話框中選擇Name屬性，點擊確定，如下圖。

選擇CheckBox控件，在屬性面板中把Content改為男。點擊IsChecked屬性的小方塊，選擇創建數據綁定，在彈出的對話框中選擇Sex屬性，點擊確定。

至此View層的基本開發工作已經初步完成了，最終效果如下圖。

設計時視圖已經顯示了設計效果，而運行程序ListBox中並不顯示任何內容，示例數據不影響正常業務邏輯，View和ViewModel層獨立開發（可能分為前端和后端開發人員），綁定屬性名和類型是兩者的接口，這正是我們要的效果。

如果查看數據面板為示例數據生成的代碼，如SampleDataSource.xaml.cs，可以發現有條件編譯語句存在，如

#if DISABLE_SAMPLE_DATA

            internal class SampleDataSource { }

#else

正如注釋所說“若要在生產（環境）應用程序中顯著減小示例數據涉及面，則可以設置DISABLE_SAMPLE_DATA 條件編譯常量並在運行時禁用示例數據”。

最終的代碼如下，

<Window x:Class="BlendDemo.MainWindow"
        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"
        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"/>
                <CheckBox Content="男" Grid.Column="1" Height="Auto" Width="Auto" IsChecked="{Binding Sex}"/>
            </Grid>
        </DataTemplate>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <TextBlock Text ="人員列表" Margin="10" Style ="{DynamicResource TextBlockStyle1}"/>
        <ListBox Grid.Row ="1" ItemsSource="{Binding Persons}" ItemTemplate="{DynamicResource DataTemplate1}" HorizontalContentAlignment="Stretch"/>

    </Grid>
</Window>

我們沒有直接編寫任何代碼，全部可視化開發，由Blend生成代碼。

下一篇講述細節樣式修改，敬請關注。