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時的效果圖