张宁的博客

简介

XAML是WPF的一个重大发明，并XMAL“编程”WPF / Silverlight开发的一个重要组成部分。 即使XAML是XML，可以手动编写的，它主要是为工具设计，如此良好的创作工具，更重要的XAML比其他语言如C＃或HTML。 Blend中的XAML是Visual Studio是为C＃。 有许多很好的教程和文件为混合杰西自由女神像， 面向开发人员的Expression Blend中 。 这篇文章是更喜欢“了解在15分钟内的交融”，旨在提供一个简要概述和混合教程开发谁是创作的XAML大多在Visual Studio或“记事本”，所以他们会有兴趣，并知道如何开始使用交融。

项目管理

混合重复了很多Visual Studio的功能，并与它的大融合。 以有两种混合和Visual Studio的一个WPF / Silverlight项目开放，使用XAML的创作和Visual Studio中混合的C＃编码（或您喜欢的任何一种语言），并使用这两种，这很常见（或者甚至建议，我应该说）或项目管理。

在Blend中的项目管理是在Visual Studio中，通过菜单，项目小组和结果面板非常相似：

• 菜单 ：文件，编辑，项目和“帮助”菜单在Visual Studio中的非常相似。 通过这些菜单，您可以创建/打开WPF / Silverlight项目，新增项目/引用等，并甚至建立和运行的解决方案，就像在Visual Studio。
  
• 项目小组 ：它是Visual Studio的“解决方案资源管理器非常相似。 在项目面板，您可以右键点击任何.xaml / .cs文件，并选择“在Visual Studio中编辑”，项目和选定的文件将在Visual Studio中进行编辑打开。
  
• 结果小组 ：“输出”选项卡和错误选项卡类似于输出窗口，并在Visual Studio错误列表窗口。

UI的创作

UI的创作主要是通过三个小组：

对象和时间线面板

对象面板使得逻辑树结构非常清晰。 这是很容易导航展开/折叠/选择树中的元素的逻辑树，或重组，通过拖放元素沿着树的树。 选定的元素是突出的对象“面板中，并在设计视图和XAML视图的文件”面板属性面板中显示所选元素的属性和事件。 黄色边框（在上面的截图LayoutRoot的）的内部节点是当前的默认容器。

文件面板

文件“面板是一个选项卡式窗口，为每个打开的XAML文件”选项卡。 它有一个设计视图和XAML视图为每个文件。

• 您可以使用的文档“窗口顶部的选项卡之间切换打开的文档或关闭文件（上面的截图中只有一个选项卡，因为只有一个文件的Page.xaml是开放的。）。
• 您可以“设计”视图之间切换，XAML视图或“拆分选定的文档。 您还可以设置默认的文档视图中的工具 - >选项 - >文件：
  
• 有一个在设计视图（也称为画板）顶部的痕迹导航控件显示所选元素的逻辑树的路径。 这是另一种导航的逻辑树，除了对象“面板和创作模式之间切换，我们很快就会看到。
• 您可以放大设计视图
  • 从工具箱中选择缩放图标，然后单击或Alt单击画板上;
  • 使用变焦组合框下方的画板：
  • 使用查看菜单项或快捷键：
• “设计”视图是一个所见即所得的设计师，在那里你可以拖放从工具箱或资源库沿混合窗口的左边框的元素：
  
• XAML视图允许直接的XAML编写。 它不具备的IntelliSense还没有，但“结果”面板中，您可以使用下面的设计视图和错误标签来纠正错误，而您键入。

属性面板

属性面板有两种观点：属性和事件，两个按钮在面板的右上角显示。

• 查看属性：
  
  • 所选元素的属性分为几个类别，布局，通用属性;
  • 属性通常有用的工具提示，如在上面的截图内容属性的工具提示;
  • 属性通常有内联/扩展/对话框编辑器（S），以帮助用户选择像Horizo​​ntalAlignment属性在上面的截图的值值，可以通过点击四个按钮之一，而不是在“中心”在XAML值输入直接查看;
  • 如果你给一个属性值（所以不再需要默认值），会变成白色，就像在上面的截图对齐属性，在其右侧的小广场;
  • 您可以单击向下箭头（具有“显示高级属性”工具提示）在大多数类别，看到这一类的属性;
  • 迅速在搜索框中键入其名称的一部分，在属性面板的顶部，你可以找到一个属性：
    
• 在事件的看法：
  
  • 你可以为一个事件类型的事件处理程序的名称，并Blend会在Visual Studio中打开项目的代码隐藏文件中的事件处理程序的原型实现：

  

动画创作

要创建一个动画，单击“对象和时间线面板的加号，”创建Storyboard资源“对话框会弹出，要求新的Storyboard的名称：

混合，然后进入时间轴录制模式。 让我们创建一个动画，按钮的大小增加一倍。 在创建动画的关键步骤：

1. 创建一个关键帧，第一个一个的KeyTime拖动黄色的时间表，然后点击“记录关键帧”绿色加号按钮;
2. 编辑的UI元素的KeyTime上述UI创作节所述，的属性;
3. 每个关键帧重复步骤1和2;

我们可以看到下面的截图：

• 在对象和时间线面板：
  • 正在编辑的时间轴名称：Storyboard1;
  • 编辑关键帧的KeyTime是1秒，表示由黄色的时间表;
  • 双箭头图标的对象“面板（按钮的RenderTransform，规模，SCALEX，在下面的截图的scaleY）和白点沿时间轴面板显示为对象的财产在的KeyTime时间轴的节点的左侧;
  • 在时间轴面板的顶部，我们可以使用的播放控制，或拖动黄色的时间表，运行动画;
• 在画板文件“面板：
  • 红色边框，红色录制按钮，和红色标签“时间轴记录”全部显示在时间轴录制模式混合;
  • 你可以点击红色录制按钮停止录制模式切换回UI创作模式;
• 在属性面板：
  • 目标物业的价值：像ScaleTransform.ScaleX设置为2;

混合使用XXXAnimationUsingKeyFrames并生成每个对象/属性/关键帧三人的关键帧。 我们可以微调首先在对象面板中选择一个关键帧本身的属性，然后在属性面板中设置其属性，如下面的截图：

• 的KeyTime是“00:00:01”
• 目标对象是按钮，目标路径大致RenderTransform.ScaleTransform.ScaleX
• 值为“2”
• 的KeySpline是“0.5,0.1,0.5,0.9”

我们也可以在以同样的方式故事板的属性微调，如在下面的截图：

• Storyboard1是选择
• 自动翻转和RepeatBehavior属性改变

这是上述简单的动画生成的XAML代码混合：

这显然​​是很容易融合，而不是手动编写XAML作者动画。

模板创作

WPF / Silverlight中的美丽和力量重新模板的控制能力。 这是比较容易做到，在Blend：选择从上下文菜单“编辑控件部件（模板） - >编辑模板”菜单项，无论是从对象和时间线面板，或在画板痕迹：

“编辑复制... ...”菜单项也是一个简单的方法来控制的默认模板。 在下面的截图中，我们可以看到：

• 默认模板组件对象和时间线面板
• 视觉状态组，视觉状态，并在交互面板的转换
• 模板组件的属性，在属性面板。 橙色正方形的背景财产的权利，表明它是模板绑定。

进一步钻探：选择禁用视觉状态，我们可以看到，在画板禁用视觉产生的视觉状态过渡故事板，动画的DisabledVisualElement Opacity属性从0％到55％，在0秒：

请注意，对象和时间线“面板的顶部附近，它显示了禁用的国家，而不是一个Storyboard，表明混合状态记录模式。

现在，让我们的一些变化来改变焦点的视觉状态过渡到歪斜按钮的默认模板时，集中：

• 选择的重点在交互面板的视觉状态，单击其右侧的箭头加图标，选择的三个选项（这些选项是视觉状态过渡，并从这种状态，并在视觉状态组的两个国家之间特别）之一;
• Blend是在可视状态录制模式：重点是选定的视觉状态;
• 添加一个新的歪斜变换在创作动画节所讨论的顶格。 请注意，在画板按钮现在倾斜。 所见即所得的画板，简单而直观的动画创作。
• 删除对象面板FocusVisualElement模板组件，因为我们不需要任何更多。 请注意在顶部的指示混合自动删除显示FocusVisualElement以及视觉状态过渡工具提示。

上面的自定义模板生成XAML的Blend是102线，6179个字符！ 想象创作，手工的难度！

一旦我们有一个模板，我们可以将它应用于样式的目标类型（或它的子类型）的UI元素：

风格创作

使用样式通常比直接设置对象的属性，因为风格可以重复使用，容易维护，而且有助于从内容（UI元素）单独介绍。 上面讨论的模板创作风格的创作是类似的，除了它是简单得多。 你必须使用对象 - >“编辑样式”菜单，进入风格的创作模式。 有没有为它的上下文菜单，这使得风格的创作少发现。

选择创建空... ...“菜单项，弹出的”创建样式资源“对话框，允许您指定的名称和新的样式资源的位置：

然后混合进入风格的创作模式：

• 的对象和时间线“面板中显示的UI逻辑树的风格元素，而不是突出;
• 画板顶端的痕迹也表明我们是创作LayoutRoot的的风格与调色板图标;
• 让添加东西的样式通过画笔编辑器设置背景，通知画板反映的变化立竿见影;
• 文件面板的XAML视图显示了简单的风格创作的XAML;

一旦我们有一番风情资源，申请很容易：只需选择对象和使用对象 - >编辑样式 - >应用资源菜单项。

资源管理

脚本，样式和模板撰写以上的所有资源。 我们可以使用“资源”面板来管理资源：

• 我们可以看到在双方的App.xaml（全球资源）和当前的XAML文件Page.xaml中的所有的资源正在编辑（本地资源）。
  • 不知道为什么Storyboard1创建动画创作部分显示不出来。 混合错误或用户错误？
• 我们可以通过它的上下文菜单编辑资源或“编辑资源”按钮：
  
  
• 我们也可以将下降沿树的资源，以改变其位置和知名度，如App.xaml和Page.xaml中移动，或[用户控件]和按钮。

结论

概括来说，混合的UI制作简单和直观：

• 工具箱（和资产库）和画板允许所见即所得的用户界面创作;
• 对象面板，可以帮助组织在逻辑树中的所有UI元素;
• 属性面板简化了属性的设置与编辑;

直观的用户界面创作上的基础上，混合物，从而简化了动画创作引入时间轴录制模式：

• 混合总是使用XXXAnimationUsingKeyFrames，所以一个Storyboard始终是一个关键帧的集合;
• 混合产生关键帧间接keytimes通过其直观的UI创作界面让用户设置UI元素的属性;
• 混合总是会产生类似以下的所有四个转换，转换为关键帧生成统一：

    > <Button.RenderTransform>
       > <TransformGroup>
           /> < 的ScaleTransform />
           /> <SkewTransform />
           /> <RotateTransform />
           /> <TranslateTransform可 />
       > </ TransformGroup>
   > </ Button.RenderTransform> 

在它的UI和动画创作的顶部，混合简化通过引入模板的创作模式和状态录制模式的模板创作。 一个模板由模板部件和可视状态。 模板部件只是一个UI元素的逻辑树和视觉状态过渡的故事板。

风格制作更简单：只是一个样式属性setter的集合。 混合引入区分经常UI创作和风格的创作风格的创作模式。

所以Blend是一个伟大的XAML创作工具。 它不仅是设计师，但也可以给开发商大提高生产力。 希望这篇文章为您提供了一个很好的概述交融，让你开始探索混合，热情 ）。 谢谢！