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