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


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com