Silverlight 形状控件的分步指南

目录

• 引言
• 先决条件
• 介绍形状控件
• 弧形控件
• 块箭头控件
• 标注控件
• 椭圆控件
• 正多边形控件
• 矩形控件
• 线形箭头控件
• 关注点

引言

在我之前的文章“Silverlight 4 中的形状介绍”中，我向您介绍了 Silverlight 4 中可用的各种形状类型，并告诉您我将发布一篇描述它们的文章，现在它就在这里。在本文中，我将描述每种形状以及在应用程序中添加它的过程（每当您需要时）。本文面向不熟悉形状控件的初学者。如果您有任何建议/顾虑，请使用反馈部分告诉我。

先决条件

如我之前的文章所述，您需要“Microsoft.Expression.Drawing.dll”程序集才能获得新的形状控件并使用它们。安装 Expression Blend SDK 到您的开发电脑后，您就可以获得此 DLL。如果您没有 Expression Blend，可以从 Microsoft Expression 站点轻松下载。除此之外，您的开发环境应该已经安装了以下工具：

• Microsoft Visual Studio 2010
• 适用于 Visual Studio 2010 的 Silverlight 4 工具

介绍形状控件

一旦您的开发环境准备就绪，您可以打开 Expression Blend IDE 并创建一个新的 Silverlight 应用程序项目。我在这里借助 Expression Blend 进行演示，以便您更容易理解。

现在，一旦 IDE 创建了您的项目，打开您的“资产”选项卡，然后单击“形状”子部分以在右侧展开它。在右侧窗格中，您将看到 Silverlight 4 中可用的所有形状集合。

让我们一个接一个地开始描述。我们将从 IDE 和 XAML 代码两方面进行讨论。这将有助于您理解。要使用形状控件，您需要在 XAML 页面中添加一个 xmlns 命名空间

如果您使用的是 Expression Blend IDE（设计器），当您在 XAML 页面中添加第一个形状控件时，它将自动添加此 xmlns 命名空间。

弧形控件

让我们从弧形控件开始。在 Silverlight 4 之前，您如何创建弧形？您必须使用一个椭圆和两个矩形控件来设计形状。您必须将这些控件裁剪为路径控件。您需要更多使用 Blend IDE 的设计知识。想想从后端代码创建它。天哪！！！您必须首先按照前面描述的方式设计 UserControl，然后从代码隐藏中创建实例并根据需要旋转它。让我们使用弧形控件创建一个弧形。单击资产窗格中的弧形符号并在您的设计器页面中绘制它。

这将创建下面的 XAML 代码

如此简单，对吧？是的，设计起来非常简单。现在，从属性面板中，您可以更改形状的任何属性，例如“StrokeThickness”、“ArcThickness”、“ArcThicknessUnit”、“StartAngel”、“EndAngel”等。设置“StrokeThickness”将改变弧的粗细。请看下面的快照

增加“ArcThickness”会使弧形变成这样

“StartAngel”和“EndAngel”描述了弧的起点和终点。这里我使用零作为起点角，90 作为终点角。因此，它产生了 90 度弧。如果您将 StartAngel 设置为零，将 EndAngel 设置为 360，它将为您创建一个圆形。列表中可用的环形控件会生成相同的代码。

如果您想在 UI 中绘制一个饼图，可以使用列表中可用的饼图形状控件。它内部使用相同的弧形控件，具有不同的 StartPoint 和 EndPoint 来生成饼图形状。请看下面的快照

将 StartAngel 设置为 90，将 EndAngel 设置为 360 将创建饼图形状。您可以调整角度以生成不同的饼图形状。

块箭头控件

如果您想在应用程序中添加一些用于方向的箭头，如果您使用的是 Silverlight 的早期版本，您会怎么做？是的，您必须创建一个由矩形和/或路径等其他控件适当成形的箭头 UserControl。然后根据方向，您必须旋转控件。太烦人了！！！不用再紧张了。Silverlight 4 为您服务。Expression Blend SDK 现在支持块箭头控件。有四种类型的块箭头控件，名为“向下块箭头”、“向左块箭头”、“向上块箭头”和“向右块箭头”。它们不是不同的控件，只需更改 enum 属性即可。因此，无需使用转换来旋转控件，也无需使用四种不同的控件。从资产窗格中，选择任何一个块箭头并绘制四个相同形状。现在，从属性面板中，搜索方向属性。根据您的要求从方向下拉列表中选择“左”、“右”、“上”或“下”。就是这样。它将相应地改变形状。

块箭头控件还有一些其他常用属性，例如 ArrowheadAngle 和 ArrowBodySize。它们分别负责改变箭头头部和箭头主体的大小。您可以在属性面板中找到这些属性。

让我们看看为我们的四个控件生成的 XAML 代码。它在这里

如您所见，它们之间唯一的区别是 Orientation 属性。因此，只需设置 Enum 值，您就可以设置块箭头的方向。

标注控件

在开始这一部分之前，如果您想在早期版本的 Silverlight 中开发一个标注控件，您会怎么做？有什么想法吗？嗯……有点困难。一个提示是创建矢量图像并根据需要进行缩放，或者使用一些路径控件来创建形状。这不是一个好主意，但这需要一个优秀设计师的一些努力。我说的对吗？是的。但现在 Silverlight 为您提供了运行时内置的这些控件。选择权在您，您想如何利用它们。就像块箭头一样，标注控件也有四种不同的 enum 类型，您必须根据您的要求进行设置。以下是标注控件的一些示例

在 XAML 设计器中绘制标注控件后，在属性面板中，您将看到一个名为“CalloutStyle”的属性。此下拉菜单有四个 enum 值，称为“Cloud”、“Oval”、“Rectangle”和“RoundedRectangle”，设置其中任何一个都将在您的 UI 中生成相应的形状。

名为“AnchorPoint”的属性为您提供了更改标注锚点起点的选项。这显示为 (x, y) 坐标值。AnchorPoint 的默认值为 (0, 1.5)。以下是生成四种不同类型标注形状的实际 XAML 代码

您可以很容易地找出每种标注类型之间的区别。

椭圆控件

这在 Silverlight 4 中不是一个新控件。它也是 Silverlight 初始版本的一部分。您可以在 System.Windows.dll 程序集中找到它。使用椭圆控件，您可以绘制椭圆和圆形。

上面的代码将生成一个圆形，如下图所示

设置不同的高度和宽度，您可以为您的 UI 创建一个椭圆。我不会过多讨论这个控件，因为它是一个通用控件。

正多边形控件

五边形、六边形、星形和三角形形状控件内部使用 RegularPolygon 在 UI 中生成所述形状。名为“InnerRadius”和“PointCount”的属性不仅负责生成这些形状，还负责生成其他各种形状。请看这里

100% 的 InnerRadius 和 6 的 PointCount 生成一个六边形，如上所示。上述形状的 XAML 代码如下所示

100% 的内半径和 5 的 PointCount 生成五边形，如上图所示。

如果您想创建一个星形，请将 InnerRadius 设置为较低的值。将 InnerRadius 设置为 50%，将 PointCount 设置为 5 将生成一个完美的星形。

想在您的页面中添加一个三角形吗？将 PointCount 设置为 3。3 是 RegularPolygon 形状控件的 PointCount 属性的最小值。

您也可以使用相同的 RegularPolygon 形状控件生成一个圆形。将 PointCount 设置为 100，它将创建上述形状。请记住，100 是 PointCount 属性的最大值。

将 InnerRadius 设置为 50%，PointCount 设置为 100 将生成上述形状。

矩形控件

矩形形状在早期版本中也可用。但是，在这里我也会稍微描述一下。它是 System.Windows.dll 程序集的一部分。默认情况下生成一个矩形形状。但是通过暴露的属性进行调整，您可以生成圆角矩形，甚至圆形。

在默认情况下，RadiusX 和 RadiusY 属性的值为“0”（零），因此它生成一个纯粹的方形/矩形形状。

将这些属性设置为大于零的值将使矩形具有圆角。在上面的截图中，RadiusX 和 RadiusY 的值都为 20。因此，创建了一个圆角。如果您将它们设置为更高的值，它也可能变成一个 Circle。

线形箭头控件

这是一个在 Silverlight 4 中引入的新形状控件。在深入讨论之前，请考虑创建一个简单的箭头（直线或可弯曲）。要创建这种箭头，您的生产开发将付出很大的努力。现在它随 Silverlight 运行时提供。通过设置适当的属性来调整控件，您可以使其变直或弯曲。您还可以使其单向或双向。请看这里

这是 XAML 代码

将 BendAmount 设置为零将为您创建一条直线。您还可以通过更改控件的 StartCorner 属性来更改起点。

如果您想要一个完全弯曲的箭头，您可以通过将 BendAmount 属性设置为 1 来实现。请记住，1 是 BendAmount 的最高值。请看下面的截图

有 5 种类型的 ArrowHead。您可以将它们设置为 StartArrow 和 EndArrow 属性。更多详细信息请参见上图。在上面的示例中，我将 StartArrow 设置为“OvalArrow”，将 EndArrow 设置为默认的“Arrow”。

关注点

这就是关于新形状控件的所有内容。希望这篇长文能帮助您理解它们的基础知识。请注意，所有图表都是在 Grid 控件之上绘制的，因此它们都设置了 Margin 属性。如果您使用的是 Canvas，您必须为控件显式使用 Height 和 Width。不要忘记与可能觉得这篇文章非常有用的其他人分享这篇文章链接。我感谢您的反馈和/或建议以改进这篇文章。不要忘记投票。

历史

• 2010年9月13日：初始发布