使用 Expression Blend 和自定义属性创建自定义控件（Windows Phone & Store）

引言

今天我非常兴奋，我们将花一些时间使用 Expression Blend 和 Expression Design 来开发一个带有我们自己自定义属性的自定义控件。每一个编写 Windows Phone 和 Store 应用程序的开发者都希望开发自己的控件。废话不多说，让我们深入开始开发我们的控件。

在这个例子中，我将开发一个自定义评分控件以及一个自定义属性，这样对于初学者来说就不会太复杂。

构思控件

当你准备构建一个自定义控件时，第一步是首先构思这个控件，在纸上画一个草图。分析需求并找出要求。画一个粗略的草稿然后开始开发。

分解它

有一句谚语说：

你可以一口一口地吃掉一头大象。

将你的控件分解成子部分，例如在我们的评分控件中，它包含一个滑块和 5 颗星，这些星将决定评分的值。

需要的属性

你开发的每一个自定义控件都需要一些自定义属性，在我们的例子中是“评分值”。收集需求并记下你的控件可能需要的属性。

在 Expression Design 中设计

Expression Design 是微软提供的一个类似 Adobe Photoshop 的设计工具，我个人推荐它，因为它是 Expression 系列的一部分，

“由于 Expression Design 是 Expression 系列的一部分，所以如果 BLEND 知道 XAML，Design 也知道 XAML。你在 Expression Design 中创建的形状可以复制其 XAML 并直接粘贴到 Visual Studio 或 Expression Blend 中。”

绘制星星

对于我们的控件，我们需要绘制星星，实际上是 5 颗对齐的星星。为此，我在 Expression Design 中使用了多边形工具。

当我点击它时，它允许我绘制一个多边形。首先，当你绘制多边形时，你会发现它绘制的是一个三角形。

你需要更改它的边数和内凹深度，这样它才能绘制出星星。

如上所示，已经绘制了一个星星。现在使用这个星星并复制四份。

创建复合路径

Expression Design 的一个非常强大的属性是它可以创建一个复合路径，因为 Expression Design 中绘制的每一个形状都是一个路径。所以，我可以将所有星星组合成一个单一的复合路径。

应用渐变色

现在你需要给它应用渐变色，并进行管理，使得两个颜色停止点在同一个位置，并且看起来像实心填充色，就像你在上面的图片中看到的那样。

复制 XAML 的时候到了

现在只需按下

Ctrl + Shift + C

复制 XAML，然后你就可以将 XAML 粘贴到 Expression BLEND 中了。

在 Expression Blend 中创建控件

好了，现在我们已经准备好设计我们的控件了，我们已经准备好了所有素材并绘制了形状，现在是时候让 Blend 简化开发者的生活了。

在主网格中转到代码部分，按下 Ctrl + V 粘贴控件，你就能看到控件，也就是带有颜色的 5 颗星。

制作用户控件

为了将我们的形状制作成用户控件，我们首先需要给我们的星星一个颜色，这样它们才能更清晰地显示，因为黑色会引起混淆。我将其颜色设置为绿色。

现在在网格中放置一个滑块，这样随着滑块值的变化，星星的颜色也会随之移动。

“这就是我将渐变色的两个停止点设置相同的根本原因。”

既然你已经创建了滑块，你需要将渐变色的数据绑定到滑块的值。你只需右键单击停止点，然后点击“创建数据绑定”并轻松选择属性。

你需要为两个渐变停止点都这样做。下一步是根据评分来调整滑块，即：

• 步长频率 = 0.1
• 最大值 = 1
• 最小值 = 0

这样它就会变得流畅，用户容易判断值，并能改善用户体验。

制作成用户控件

你不需要为此创建一个用户控件文件，因为 Blend 使开发者的生活更轻松，你只需要进行简单的2次点击。

选择滑块和星星，然后右键单击。

然后点击“制作成用户控件”。

添加自定义属性

到目前为止，我们的控件可以正常工作，但是我们需要创建它的用户控件，以便我们可以在许多项目中重复使用它。

正如你所见，控件工作得非常好，但现在是时候添加我们自己的属性了，它将是“滑块值”，并且会出现在控件的属性列表中。

有什么猜测我们会如何做到吗？？

数据绑定？不！

MVVM？不！

我们在 C#.NET 中有一些非常神奇的东西可以用来提升我们在控件中的自定义属性。它被称为“依赖属性”。

一行简单的代码就可以完成剩下的工作。

我们将创建一个“滑块值”属性，然后将其绑定到滑块。当我们创建一个自定义控件时，它会为我们创建两个文件：Control.xaml 和 Control.xaml.cs。现在是时候写一点代码了。你不需要切换到 VS，你可以在 Expressions Blend 中编写。

这是关于依赖属性的文档（MSDN 文档）。

这是我写的一小段代码来声明属性，现在让我们将其绑定到滑块。

在控件中转到滑块，在属性的“值”部分，点击绑定框，然后点击“创建数据绑定”，就像我们在第一个部分绑定渐变色时所做的那样。点击“自定义控件”，你会找到一个名为“滑块值”的属性。

将滑块的值绑定到该属性。恭喜，你完成了！

构建它

哦，这是什么？？

当我转到 MainPage.xaml时，它会显示一个警告信息。不用担心。只需生成它。Expressions Blend 解决方案需要频繁生成。如果你发现错误，第一件事就是生成解决方案。

使用控件

现在你可以像使用资产中的控件一样使用它了。

你想用多少次就用多少次。

导出控件

是的，如果你开发了一个非常好的控件，你可以导出它。怎么做？你需要执行所有相同的步骤，但不是创建 Phone 或 Store 应用程序，而是创建一个控件库项目。添加你的控件文件，复制你已经创建的控件。以 Release 模式构建它。

Voilà！！你将在项目Bin文件夹中得到一个.dll文件。使用它，如果有人喜欢，就给他.dll文件吧。

结论

使用 Expressions Blend 创建自定义控件现在非常容易。创建你自己的自定义控件并添加你自己的自定义属性。在你的项目中使用它们，让用户和开发者都惊叹不已。希望你觉得今天的文章非常有趣。不要忘记在评论中留下你的反馈。

下次再见，在此之前，祝你编码愉快！

主文章可以在个人博客找到。