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生成代码。

下一篇讲述细节样式修改，敬请关注。