使用XAML创建自定义图形

最新推荐文章于 2023-05-24 15:41:38 发布

原创最新推荐文章于 2023-05-24 15:41:38 发布 · 613 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#图形 #wpf #behavior #shapes #blend #url

本文介绍如何在WPF中使用XAML和CordiaNew字体绘制自定义形状，包括使用Path对象和其Data属性来创建直线、曲线和填充颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文地址： http://www.dingos.cn/index.php?topic=2013.0

不知道你在 WPF 之前是否绘制自己的形状，如果没有，这原本是件很困难的事情。在 WPF 中绘制形状，不想需要重写 OnPaint 方法或添加 Paint 监听器。你可以简单的创建一个图形就像放置任何对象到你想要的位置。

为了使用 XAML 和 WPF ，你可能需要 Visual Studio 2008 或 Expression Blend 2 。你可以从 http://www.microsoft.com/express/ 下载 Visual Studio 的 Express Edition 免费版本，或你可以从 http://www.microsoft.com/expression/products/Overview.aspx?key=blend 获得 Expression Blend 的使用版本（悲哀呀， Expression 产品没有免费版本）。

让我们从简单示例开始。我喜欢的一个游戏是俄罗斯方块，这里是一个俄罗斯方块的形状。

这里是上面应用程序所需要的程序代码。

< Window x : Class ="XAMLCustomShapes.Window1"

xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns : x ="http://schemas.microsoft.com/winfx/2006/xaml"

Title ="XAML Custom Shapes" Height ="350" Width ="350">

< Canvas >

< Path Canvas.Left ="15" Canvas.Top ="50" Stroke ="Black"

Data ="M 0,0 L 200,0 L 200,100 L 300,100 L 300,200 L 100,

200 L 100,100 L 0,100 Z">

< Path.Fill >

< LinearGradientBrush StartPoint ="0,0" EndPoint ="1,0">

< GradientStop Offset ="0" Color ="DarkBlue" />

< GradientStop Offset ="1" Color ="LightBlue" />

</ LinearGradientBrush >

</ Path.Fill >

</ Path >

</ Canvas >

</ Window >

这这里面包含许多东西，但我们唯一关心的是 Path 对象和它的 Data 属性。当创建自定义图像时 Path 是非常有用的，这也是使用它们来画图。

通过 Data 属性定义形状。这个语法有点怪，但如果你习惯了这种写法，你会发现比以前的方式更有效。如果你使用过其他语言绘制图形，你可能熟悉命名像 lineTo 、 moveTo 、 arcTo 等的函数。 WPF 用一个包含特殊符号的长的字符串来替代这些方法。在这个示例中，“ L ”表示 lineTo ，“ M ”表示 moveTo 。下面的图像显示每个字符串表示什么图形块。

正如你所见，我的图形是从“ M 0, 0 ”开始。我笔的位置在形状的左上角。可以在任何你想的地方开始我们的图形，但（ 0, 0 ）是俄罗斯方块的开始。下一块，“ L 200, 0 ”从我们的开始位置（ 0, 0 ）话了一条直线，这个特殊的点（ 200, 0 ）以“ L ”开头。当你画一条线到另一点，任何后续的点都是从上一个位置开始。为了简单，我继续使用“ L ”命令画线知道我的图形完成。在上面的 Data 字符串最后一个字符“ Z ” – 说明这个图形的路径完成。

在 WPF 中有像“ M ”，“ L ”和“ Z ”一样的更多命令。在这里不一一讨论他们，可以冲 MSDN 中的一篇好文章 Path Markup Syntax （ http://msdn.microsoft.com/en-us/library/ms752293.aspx ）获得有关它们的详细介绍。

好吧，我认为我们已经可以绘制直线了。现在让我们来看看稍微负责点的图形 – 曲线。 WPF 有许多不同类型的曲线 – 二次贝塞尔曲线，平滑三次贝塞尔曲线，平滑二次贝塞尔曲线和椭圆弧。是的，我不知道他们是什么，但在 MSDN 文中中我注意到在最后的段落中有关于他们的解释。如果你真的真的想知道更多，可以点击维基百科中关于贝塞尔曲线的文章（ http://en.wikipedia.org/wiki/B%C3%A9zier_curve ）。