矩形

若要繪製矩形需要用到Rectangle元素，通過指定Rectangle元素的Width和Height屬性值來確定矩形的尺寸。而設定RadiusX和RadiusY屬性值能得到圓角的矩形，這兩個屬性分別表示圓角的x軸方向和y軸方向圓角的大小，RadiusX允許的最大值為Width的一半，RadiusY允許最大的值為Height的一半。矩形有內部空間，若想獲得有填充顏色的矩形，需要設定Fill屬性為其填充顏色。下面將演示如何繪製一個矩形。

在一個開啟的Windows應用商店專案中新建一個空白頁，並命名為RectanglePage，雙擊開啟此頁面的RectanglePage.xaml檔案，在Grid元素中新增如下程式碼。

<Rectangle Fill="Yellow" Width="196" Height="100" Stroke="Black" StrokeThickness="5" RadiusX="20" RadiusY="30"/>

上面的程式碼定義了一個表示矩形的Rectangle元素，並設定其Width屬性值為196，Height屬性值為100，使用Fill屬性填充其內部空間為黃色，把Stroke屬性設定為Black、StrokeThickness屬性設定為5，定義一個輪廓顏色為黑色、輪廓粗細為5畫素的矩形，再將此矩形的RadiusX屬性設定為20，RadiusY屬性設定為30，最後得到一個圓角矩形。

通過後臺程式碼也能夠繪製出與上面相同的矩形，實現程式碼如下所示：

public RectanglePage()

{

this.InitializeComponent();

//例項化矩形物件

Rectangle rectangle = new Rectangle();

rectangle.Width = 196;

rectangle.Height = 100;

rectangle.Fill = new SolidColorBrush(Colors.Yellow);

rectangle.Stroke = new SolidColorBrush(Colors.Black);

rectangle.StrokeThickness = 5;

//將圓角x軸賦值為20

rectangle.RadiusX = 20;

//將圓角x軸賦值為30

rectangle.RadiusY = 30;

MyCanvas.Children.Add(rectangle);

｝

在上面的程式碼中，首先例項化了一個Rectangle型別的物件rectangle，通過設定rectangle物件的相應屬性以達到定義一個與前臺方式實現效果一致的矩形，最後呼叫MyCanvas容器物件的Children屬性中的Add方法，將這個矩形加入到頁面中顯示。

啟動此頁面，顯示效果如圖8-2所示。

圖8-2 矩形圖形

要想在矩形內部新增圖形、控制元件等內容，可以考慮使用Border元素。與Rectangle元素有所不同的是，Border元素實現圓角效果需要用到CornerRadius屬性，而不是之前Rectangle元素中所用到的RadiusX和RadiusY屬性，繪製一個在Border元素中包含兩個矩形效果的XAML程式碼如下所示：

<Border BorderBrush=" Black" BorderThickness="4" Width="120" Height="100" CornerRadius="10" >

<StackPanel Margin="3,3,3,3">

<Rectangle Fill="Yellow" Height="40" Width="100"/>

<Rectangle Fill="Blue" Height="40" Width="100" />

</StackPanel>

</Border>

上面程式碼的執行效果如圖8-3所示。

圖8-3包含兩個矩形的Border效果圖