矩形

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

posted on 2017-03-30 21:15  冯瑞涛  阅读(281)  评论(0编辑  收藏  举报