Blend 2015 教程 （一） 基礎

時間  2019-11-17
標籤 blend 教程 基礎 简体版
原文   原文鏈接

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

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

首先經過菜單 文件-新建-項目 打開以下對話框，建立一個新的WPF項目。後端

Image(1)

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

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

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

Image(2)

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

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

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

Image(3)

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

Image(4)

目前代碼以下

<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控件後，右鍵點擊，在彈出的菜單中選擇 編輯樣式-建立空樣式，在彈出的窗口中點擊肯定按鈕，以建立樣式。

Image(5)

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

Image(6)

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

<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. 點擊數據面板下方的設置設計時數據上下文按鈕，彈出以下對話框。

Image(7)

選擇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，點擊肯定按鈕。

Image(8)

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

Image(9)

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

Image(10)

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

Image(11)

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

Image(12)

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

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

Image(13)

設計時視圖已經顯示了設計效果，而運行程序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生成代碼。

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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程