【翻译】用 Expression Blend 建立酷炫的 Button

原文：Creating “Cool” Buttons with Expression Blend

Author： Alex

　　在本文中，咱们将考虑在Expression Blend用几种方法来建立酷炫的凝胶状按钮。若是你看到 Expression Blend 或 Visual Studio 中的 WPF 默认外观的 Button，你会发现它一点也不酷。它仍旧是过期的 chrome 样子的按钮控件， 然而 Expression Blend 和 Windows Presentation Foundation (WPF) 不只具备基本功能并且可以提高用户体验（User eXperience，UX）。因此为了让你的控件变得炫酷，就得自定义它，换句话说就是为它设计成本身想要的样子！

　　按钮（Button）是最经常使用的控件之一，通常在应用中都能找到。所以，本文中咱们将建立酷炫的按钮用于不一样类型的应用，包括Windows Phone应用。如今，用于凝胶状的、有光泽的按钮的基本思想是建立3个蛋状椭圆或者圆角矩形（你可使用任意其余你想要的形状）。在本例中，咱们使用圆角矩形，由于容易协调工做。第一个矩形/椭圆使用线性渐变画刷（linear gradient brush），从顶部到3/4处由亮变暗，再变量直到底部。第二个矩形比第一个稍微小些，使用梯度填充（gradient fill）且透明（transparent）。最后一个元素（第三个矩形）使用了黑色的实心画刷（solid brush），并被用来建立投影效果。

　　让我用图片来讲明它，我想建立一个按钮，看起来像这样的：

或者是这样的

 

或者是那样的

 　　简而言之，我要组合3个元素（3个形状：矩形/椭圆）达到如上所述的效果！下面的形状已经被组合到上面的第一个酷炫的、凝胶状按钮中去：

　　注意：要在这指出一件事就是被用于DropShadowEffect效果的第三个元素（第三个黑色矩形，它是黑色的，不是灰色的，显示为灰色是由于白色的画布），它不是必须的，由于我能够简单地用DropShadowEffect类来达到这个目的：

In XAML:
</Rectangle.Effect>
<DropShadowEffect Color=“Black” Direction=“315” ShadowDepth=“5”
BlurRadius=“5” Opacity=“100“ />
</Rectange.Effect>

　　在设计器中：

 　　然而，有BitmapEffect效果的对象存在问题：若是着色器效果用软件模式渲染，任何使用效果的对象也将会使用软件进行渲染，意味着当使用大型可视化的效果或者绘制效果的特性时，性能广泛可能会下降。在处理着色器效果时，你须要完全地测试性能并启用警告。

　　如今，让咱们进入实际创做中：

　　打开 Expression Blend（若是没打开）

　　建立一个新项目（文件->新项目->选择项目类型->WPF 控件库）。给它命名，选择一个位置或者留在默认的位置。

 

注意：你能够建立一个常规的WPF或者Silverlight项目，可是在本例中我想建立用于自定义控件的项目，咱们能够在其余的WPF应用中重用

　　从工具箱（ToolBox）添加一个按钮到主画布（LayoutRoot）中。

　　接着咱们将要为咱们的按钮建立自定义风格。咱们将经过编辑默认的模版来达到这个目的。模版重作（ReTemplating）或样式设计（Styling）是WPF最强大的功能之一；就是说，有可能彻底取代用户界面（UI）元素的外观和感受（look and feel）。

　　右击选中的按钮，而后选择编辑模版->编辑副本：

　　在建立样式资源对话框中，给新样式命名：gelButtonStyle1：

 

　　在定义位置（Define in）下面， 保留原样：UserControl:UserControl

　　接着点击肯定（OK），gelButtonStyle1建立完毕。看着对象树，你能够看到一个由多个部件组成的按钮。使用模版你能够取代这些部件，然而使用样式，只能经过改变公开的属性从外部改变外观。样式由属性设置器（property setters）构成，当你应用一种样式的时候，它会给元素的属性设置样式中的值：

 

 

 

 

 

　　

　　在右上方属性面板下写下按钮的默认尺寸。

　　接着在对象树中删除默认的Button Chrome类型，并增长一个Grid控件：

　　注意： 最佳实践是给你的元素命名，所以我为Grid命名为“main”。

　　接着加入三个矩形并依次为它们命名：dropShadowRect，reflectiveRect 和 andtransparentRect。

　　依次改变这些矩形的大小：让 dropShadowRect 最大，其余两个元素尺寸相同。

　　　　注意：当你设置尺寸时，记住以前设置的按钮的默认尺寸。你必定不但愿按钮过大或太小，因此设置尺寸的时候把这一点考虑进去。

　　　　注意：在这个设计阶段，也许有必要把画板所放到合适的大小以展开工做，好比：  为后续工做提供了一个更好的视野：

　　“dropShadowRect”被选中后，把它改成圆角矩形（注意：你能够把它改为任何你想要的形状，参看用户向导（User Guide）一节中的绘制对象（Drawing Objects）主题以得到更多信息）。

　　对于其它两个元素，重复以上步骤。

　　　　注意：你能够经过选择矩形并拖拽左上角的拐角弧度手柄来修改矩形的拐角弧度。当指示器移动到点线上，恰好外离矩形矩形左上角，拐角弧度手柄就会出现（译注：我是经过选择矩形，在右上角属性面板中的外观中设置“RadiuX”和“RadiuY”实现的）。

　　在外观（Appearance）面板中检验你的 X 和 Y 弧度，确保它们同样：

　　接下来，给 “dropShadowRect”应用一个实心颜色（solid color）（黑色）填充（Fill）和轮廓（Stroke）画刷：

　　　　注意：若是你没有看到刚才你在操做的元素，你可使用Z顺序把那个元素呈现到前面，或者简单地使用对象和时间线（Object and Timeline）面板上的显示/隐藏属性。

　　如今，让咱们转移到“reflectiveRect”元素上，咱们要为它使用一个线性渐变画刷从顶部到底部3/4处由亮变暗，再到底部由暗变亮。使用渐变填充画刷看起来以下图所示或者你喜欢的任何颜色，可是记住要有反光的边缘：

　　　　Tip：使用工具面板中的渐变工具（Gradient Tool）来改变达到你以为合适的渐变效果。

 

　　　　记得移除这个形状的轮廓（Stroke）。

　　接下来，让咱们转移到最后一个元素上来，即 “transparentRect”。选择右边的渐变结束端点（GradientStop）：

　　使用一个线性渐变画刷填充，移除轮廓并经过调整 Aplha 为 0% 使得矩形透明：

　　　　注意：若是你的背景画布是黑色的或深色的，你会看不到你的透明元素的这个改变。使用一个亮色的实心填充，将会这样：

　　接着，它是一个按钮，因此添加一个ControlPresenterControlPresenter

　　最后一步很是重要，若是你想要达到凝胶状、有光泽的错觉，以正确的顺序简单地布置它们！个人Z顺序看起来以下对象树所示：

　　记得第三个矩形（dropShadowRect）仅用来建立咱们本身的阴影效果，它不是必须的。对齐它并并用我为它设置的不一样颜色来演示：

　　你也能够获得相同的结果设置更好，若是你组合不一样形状的亮色。我使用如上相同的三个元素建立了线面的这些按钮：

   

略过Silverlight部分

 

总结

　　这是一个很是简单的引导性教程。咱们将会在之后重温这些主题，使用更复杂的设计和更复杂的实现。在本教程中，涵盖了基础知识样式和模版，它们的不一样在于：样式被用来设置控件的默认特性（attributes）；而模版定义了元素被用于控件自己。对于大多数的控件，样式简单地设置画刷的引用，提供了可感的默认设置。你能够建立绝妙的图形外观，经过使用不一样的画刷用于不一样的图形中来建立碉堡了的设计！但愿能够帮到一些人！

 =============================================================================================

你们能够看下我刚作的效果：

我是建的WPF应用程序。

这是对象树：

直接在窗口中拖一个Button，右击编辑模版，编辑副本。进去后按顺序拖3个Rectangle，分别命名。

布局都设置一下：

以后就是对每一个Rectangle分别设置：