用 Expression Blend 创建酷炫的 Button

原文:用 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）；而模版定义了元素被用于控件本身。对于大多数的控件，样式简单地设置画刷的引用，提供了可感的默认设置。你可以创建绝妙的图形外观，通过使用不同的画刷用于不同的图形中来创建碉堡了的设计！希望可以帮到一些人！

 

<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>