Win10系列:C#应用控件进阶10
EllipseGeometry
EllipseGeometry控件可以用于绘制椭圆,通过定义EllipseGeometry控件的Center属性确定椭圆的圆心坐标,使用此控件的RadiusX 和RadiusY属性分别定义椭圆X轴、Y轴的半径长度。下面将演示如何使用EllipseGeometry控件绘制一个椭圆。
在一个打开的Windows应用商店项目中新建一个空白页,并命名为EllipseGeometryPage,双击打开此页面的EllipseGeometryPage.xaml文件,在Grid元素中添加如下代码。
<!--定义Path-->
<Path Fill="Yellow" Stroke="Black" StrokeThickness="5">
<Path.Data>
<EllipseGeometry Center="200,200" RadiusX="100" RadiusY="200">
</EllipseGeometry>
</Path.Data>
</Path>
在上面的代码中,首先定义一个Path控件并设置Fill、Stroke和StrokeThickness属性分别为黄色(Yellow)、黑色(Black)和5像素。接着在Path.Data的内部使用EllipseGeometry控件的Center属性确定椭圆的圆心坐标为(200,200),然后给RadiusX和RadiusY属性赋值从而定义椭圆的X轴和Y轴半径分别为100、200。
前面介绍了在前台绘制椭圆,下面我们来看一下使用后台代码绘制此图形,代码如下所示:
public EllipseGeometryPage()
{
this.InitializeComponent();
//在path前面加命名空间防止与System.IO.path 发生冲突
Windows.UI.Xaml.Shapes.Path mypath = new Windows.UI.Xaml.Shapes.Path();
mypath.Stroke = new SolidColorBrush(Colors.Black);
mypath.Fill = new SolidColorBrush(Colors.Yellow);
mypath.StrokeThickness = 3;
//实例化椭圆的对象
EllipseGeometry ellipseGeometry = new EllipseGeometry();
//设置圆心
ellipseGeometry.Center = new Point(200, 200);
//X轴半径为100px
ellipseGeometry.RadiusX = 100;
//Y轴半径为200px
ellipseGeometry.RadiusY = 200;
mypath.Data = ellipseGeometry;
MyShow.Children.Add(mypath);
}
在上面的代码中,首先定义Path类型的对象mypath,并设置mypath对象的Fill、Stroke和StrokeThickness属性分别为黄色(Yellow)、黑色(Black)和5像素。然后创建EllipseGeometry类型的对象ellipseGeometry,并设置ellipseGeometry对象的Center、RadiusX和RadiusY属性。设置好椭圆的属性后,把ellipseGeometry对象赋值给mypath对象的Data属性,最后调用MyShow容器对象的Children属性中的Add方法,将这个椭圆加入到页面中显示。
运行此页面,利用EllipseGeometry绘制椭圆的效果如图8-12所示。

图8-12 利用EllipseGeometry 绘制的椭圆
8.3.4 GeometryGroup
若要绘制复合几何图形需要用到GeometryGroup类型的对象,GeometryGroup在前文中也曾提到,它的作用是创建Geometry子类对象的组合体,通过向GeometryGroup中添加任意数量的Geometry子类对象便可以绘制复杂的图形。下面通过示例展示如何利用GeometryGroup创建复合图形。
在一个打开的Windows应用商店项目中新建一个空白页,并命名为GeometryGroupPage,双击打开此页面的GeometryGroupPage.xaml文件,在Grid元素中添加如下代码。
<Path Fill="Orange" Stroke="Red" StrokeThickness="3">
<Path.Data>
<GeometryGroup FillRule="EvenOdd">
<EllipseGeometry Center="200,200" RadiusX="100" RadiusY="200"></EllipseGeometry>
<EllipseGeometry Center="250,200" RadiusX="100" RadiusY="200"></EllipseGeometry>
<EllipseGeometry Center="225,200" RadiusX="100" RadiusY="100"/>
</GeometryGroup>
</Path.Data>
</Path>
上面的代码首先定义一个Path控件并设置Fill属性为橙色(Orange)、Stroke属性为红色(Red)和StrokeThickness属性为3像素。接着在Path.Data的内部定义一个GeometryGroup控件,然后向GeometryGroup控件中添加三个EllipseGeometry,并设置这两个EllipseGeometry控件的Center、RadiusX和RadiusY属性,这样便可以得到如图8-13所示的运行效果。
在后台用GeometryGroup创建复合几何图形与在前台的创建思路相似,绘制复合几何图形的后台代码如下所示:
public GeometryGroupPage()
{
this.InitializeComponent();
//实例化Path类型的对象
Windows.UI.Xaml.Shapes.Path mypath = new Windows.UI.Xaml.Shapes.Path();
//设置mypath对象的属性
mypath.Stroke = new SolidColorBrush(Colors.Red);
mypath.StrokeThickness = 3;
mypath.Fill = new SolidColorBrush(Colors.Orange);
//实例化GeometryGroup类型的对象
GeometryGroup group = new GeometryGroup();
//实例化EllipseGeometry类型的对象
EllipseGeometry ellipseOne = new EllipseGeometry();
//设置椭圆的属性
ellipseOne.Center = new Point(200, 200);
//X轴半径为100px
ellipseOne.RadiusX = 100;
//Y轴半径为200px
ellipseOne.RadiusY = 200;
//定义另一个椭圆
EllipseGeometry ellipseTwo = new EllipseGeometry();
ellipseTwo.Center = new Point(250, 200);
ellipseTwo.RadiusX = 100;
ellipseTwo.RadiusY = 200;
EllipseGeometry ellipseThree = new EllipseGeometry();
ellipseThree.Center = new Point(225,200);
ellipseThree.RadiusX = 100;
ellipseThree.RadiusY = 100;
//设置填充规则
group.FillRule = FillRule.EvenOdd;
//添加椭圆到group控件中
group.Children.Add(ellipseOne);
group.Children.Add(ellipseTwo);
group.Children.Add(ellipseThree);
mypath.Data = group;
MyShow.Children.Add(mypath);
}
当几何图形出现交叉的情况时,可以使用GeometryGroup对象的FillRule(填充规则)属性定义内容交叉时的显示方式,FillRule是枚举类型,可选值包括EvenOdd与Nonzero,默认值是EvenOdd,表示图形的层叠次数为偶数的交叉部分不填充,反之则填充。这两个属性值效果对比如图8-13和图8-14所示。


图8-13 FillRule值为EvenOdd时的效果图 图8-14 FillRule值为Nonzero时的效果图
Win10系列:C#应用控件进阶10的更多相关文章
- Win10系列:JavaScript 控件的使用
向页面中添加的控件可分为两种类型:标准的HTML控件和WinJS库控件.其中标准的HTML控件是指HTML标准中定义的基本控件,如按钮和复选框:WinJS库控件是为开发基于JavaScript 的Wi ...
- 【转】PyQt5系列教程(七)控件
PyQt5系列教程(七)控件 软硬件环境 Windows 10 Python 3.4.2 PyQt 5.5.1 PyCharm 5.0.4 前言 控件是PyQt应用程序的基石.PyQt5自带很多不 ...
- WPF 模仿 UltraEdit 文件查看器系列一 用户控件
WPF 模仿 UltraEdit 文件查看器系列一 用户控件 运行环境:Win10 x64, NetFrameWork 4.8, 作者:乌龙哈里,日期:2019-05-10 章节: 起步 添加用户控件 ...
- C#控件系列--文本类控件
C#控件系列--文本类控件 文本类控件主要包含Label.LinkLabel.Button.TextBox以及RichTextBox. Label 功能 Label用来 ...
- WPF从我炫系列4---装饰控件的用法
这一节的讲解中,我将为大家介绍WPF装饰控件的用法,主要为大家讲解一下几个控件的用法. ScrollViewer滚动条控件 Border边框控件 ViewBox自由缩放控件 1. ScrollView ...
- WPF编游戏系列 之四 用户控件
原文:WPF编游戏系列 之四 用户控件 在上一篇<WPF编游戏系列 之三 物品清单>中,对物品清单进行了演示,其中反复用到了同一组控件(如下图),而且 颜昌钢也指出在3.2. ...
- Win10系列:C#应用控件进阶5
多线形 多线形和多边形类似,不同点在于多线形中最后一个点和第一个点不会默认被连接.在多线形的点集中,可以存在同一个开始点和终结点因而会定义成闭合图形.下面将演示如何使用Polyline控件绘制一个多线 ...
- Win10系列:C#应用控件进阶4
多边形 若要绘制多边形需要用到Polygon元素,并通过定义一系列的点绘制多边形.Polygon类型的对象有Points属性, 这个属性用来定义组成边的点集.在前台代码中,使用空格分隔各个点,然后利用 ...
- Win10系列:C#应用控件进阶2
矩形 若要绘制矩形需要用到Rectangle元素,通过指定Rectangle元素的Width和Height属性值来确定矩形的尺寸.而设置RadiusX和RadiusY属性值能得到圆角的矩形,这两个属性 ...
随机推荐
- c语言的一些易错知识积累
1. #ifdef 和#if defined 的区别: 后者可以组成复杂的预编译条件,而如果判断的是单个宏定义的时候,两种用法的效果都是一样的. 2.#if 0 { code }#endif ...
- 类成员(static)和final修饰符
在Java类里只能包含成员变量.方法.构造器.初始化块.内部类(包括接口.枚举)5种成员,类成员是用static来修饰的,其属于整个类. 当使用实例来访问类成员时,实际上依然是委托给该类来访问类成员, ...
- k8s构建镜像-基于centos的python环境+pip
FROM centos:7.4.1708 #维护者信息MAINTAINER by icdss # 标签LABEL version="1.0" # 安装依赖RUN yum -y up ...
- Haproxy官方文档翻译(第二章)配置Haproxy 附英文原文
2.配置 HAProxy 2.1 配置文件格式 Haproxy的配置过程包含了3部分的参数资源:- 命令行中的参数,此种参数总是享有优先权被使用- 配置文件中global节点中的参数,此种参数是进程范 ...
- CentOS 7离线安装CDH 5.16.1完全指南(含各种错误处理)
安装包下载 1.CM软件包下载 从http://archive.cloudera.com/cm5/redhat/7/x86_64/cm/5.16.1/RPMS/x86_64/下载rpm包,如下: 其实 ...
- rabbitmq作为mqtt服务器实现websocket消息推送给浏览器
rabbitmq的RabbitMQ Web MQTT插件可以用来支持将rabbitmq作为MQTT协议的服务器,而websocket支持mqtt协议通信实现消息推送.因为我们目前使用rabbitmq, ...
- JavaScript核心--Function
什么是: 保存一段可重用的代码段的对象 何时: 只要一段代码可能反复使用时,都要封装为函数,反复调用函数 如何: 创建: 3种: 1. 直接量: function 函数名(参数列表){ 函数体; re ...
- [转载]去除文件中的^M
用/bin/cat -v /etc/profile看到很多^M,是因为Windows下的换行符的原因. 现在在linux下面删了就行,我用的第一种方法. 第一种方法 (先yum install -y ...
- Sonar 配置及部署(windows系统)
Sonar 是一个用于代码质量管理的开放平台.通过插件机制,Sonar 可以集成不同的测试工具,代码分析工具,以及持续集成工具. 与持续集成工具(例如 Hudson/Jenkins 等)不同,Sona ...
- vue数据变动监测
原文链接:https://blog.csdn.net/man_tutu/article/details/72148362 对象: 不能监测到: var vm = new Vue({ data:{ a: ...