张宁的博客

介绍

XAML是WPF的一个重大发明，车桥零部件“规划”是一个WPF / Silverlight开发的重要组成部分。 虽然XAML是XML，可以手动撰写，它主要设计工具，如此良好的创作工具，更重要的XAML比其他语言如C＃或HTML。 融入到XAML是什么Visual Studio是为C＃。 有许多很好的教程和文档，为混合像杰西自由的， 面向开发人员的Expression Blend 。 这篇文章更像是“学习在15分钟的交融”，旨在让开发创作的XAML大多是在Visual Studio或记事本，所以他们会有兴趣，并知道如何开始使用一个简要概述和混合教程融为一体。

项目管理

混合重复很多Visual Studio的功能和与它有很大的整合。 很常见（或者甚至建议，应该我说）到有两个混合和Visual Studio的1的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中设置直接观看;
  • 如果你给一个属性值（所以不再需要默认值），其右侧的小广场将变成白色，像上面的截图中的Alignment属性;
  • 你可以点击向下箭头（“显示高级属性”提示），在大多数类别，看到这一类的多个属性;
  • 迅速在搜索框中键入其名称的一部分，在属性面板的顶部，你可以找到一个属性：
    
• 在事件的看法：
  
  • 您可以键入一个事件的事件处理程序的名称，Blend会在Visual Studio中打开项目的事件处理程序中的代码隐藏文件的原型实现，

  

动画创作

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

共混，然后进入时间表录音模式。 让我们创建一个动画按钮的大小的两倍。 在创建动画的关键步骤：

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

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

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

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

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

我们还可以进行微调，故事情节以同样的方式的属性，如下面的截图：

• storyboard1被选中
• 自动翻转的RepeatBehavior属性改变

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

  AutoReverse ="True" RepeatBehavior ="Forever" x:Name ="Storyboard1" > <Storyboard的 自动翻转 =“真” 的RepeatBehavior =“永远”X：=“Storyboard1”>
    
        
     > </ 的DoubleAnimationUsingKeyFrames>
    
         KeyTime ="00:00:01" Value ="2" /> <SplineDoubleKeyFrame 的KeyTime =“00:00:01”=“2”/>
     > </ 的DoubleAnimationUsingKeyFrames>
 > </ Storyboard的 > 

显然，这是容易得多，而不是手动编写XAML交融作者动画。

模板创作

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

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

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

钻在进一步选择残疾人士的视觉状态，我们可以看到，视力在画板残疾人的视觉状态过渡的故事情节产生动画Opacity属性从0％到55％，在0秒的DisabledVisualElement：

请注意对象和时间轴面板的顶部附近，它显示了禁用状态，而不是一个故事情节，表明混合状态录制模式。

现在，让我们做一些改变默认模板，通过改变焦点视觉状态过渡歪斜的按钮时，它的重点：

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

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

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

风格创作

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

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

然后Blend将进入风格的创作模式：

• 对象和时间线“面板中显示UI的逻辑树，而不是强调风格元素;
• 画板上方的痕迹，也表明我们LayoutRoot的创作调色板图标的风格;
• 让我们添加的东西，通过画笔编辑器设置背景风格，注意画板直接反映了变化;
• 文件面板的XAML视图显示的简单XAML风格创作产生;

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

资源管理

故事情节，创作风格和上面的模板的所有资源。 我们可以使用“资源”面板来管理资源：

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

结论

总的来说，混合使UI制作的方便和直观：

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

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

• 交融总是使用XXXAnimationUsingKeyFrames，所以故事情节始终是一个关键帧集合;
• Blend中生成关键帧间接让在keytimes的用户设置界面元素的属性，通过其直观的用户界面创作界面;
• 交融总是产生像所有四个下面的转换，使转换关键帧生成均匀：

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

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

风格制作更简单：一种风格，仅仅是一个集合属性setter。 Blend中引入风格的创作模式，区分定期UI创作和创作风格。

所以Blend是一个伟大的XAML创作工具。 它不仅是设计师，但也可以给开发商大提高了工作效率。 希望这篇文章给你很好地概括了混合，让你在探索混合开始，积极 ）。 谢谢！

善于交际，分享！

•