Win10系列：C#应用控件进阶2

矩形

若要绘制矩形需要用到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效果图