天天看點

Silverlight 三個基本布局控件(Canvas、StackPanel、Grid )

這篇文章主要是翻譯了ScottGu部落格的文章:

Silverlight Tutorial Part 2: Using Layout Management。雖然是翻譯,但通過筆記記錄,我發現對這三個布局控件有了更深刻的了解。

Silverlight提供了非常靈活的布局管理系統,讓程式員和美工可以非常友善的控制控件的位置。布局管理系統提供了兩種布局方式:絕對定位和相對定位。這兩種定位方式其實和HTML的兩種定位方式是一樣的。在Silverlight 2 beta1中内置了三種最常用的布局控件:Canvas、StackPanel、Grid。

一、Canvas:相當基礎的控件,通過絕對定位來控制字控件的位置。

在Canvas中,我們使用一種叫做“附加屬性”的XMAL新特性來控制子控件的位置。附加屬性就是指你可以通過設定子控件相對于其父控件的Top、Left、Bottom和Right值來控制子控件的位置。在Canvas中,我們可以使用Canvas.Left、Canvas.Top來控制子控件相對于父控件(Canvas)的位置。如:

Silverlight 三個基本布局控件(Canvas、StackPanel、Grid )

以上代碼将顯示為:

Silverlight 三個基本布局控件(Canvas、StackPanel、Grid )

Canvas對于那些子控件不需要移動的布局是非常友善的,但如果子控件數量太多或是子控件位置會發生變化,使用Canvas就不大友善了。這時候可以使用其他的布局控件,如:StackPanel、Grid。

二、StackPanel:該控件用于橫向或縱向排列子控件(預設是縱向排列子控件的)。通過子控件的Margin屬性(該屬性和HTML的Margin屬性的效果一樣)來控制控件的間距。如:

Silverlight 三個基本布局控件(Canvas、StackPanel、Grid )
Silverlight 三個基本布局控件(Canvas、StackPanel、Grid )

三、Grid:Grid是一種相當靈活的布局控件,它通過行列的表格來管理子控件的布局,類似于HTML裡的Table控件。

和HTML的Table控件不同的是,你不能直接把子控件嵌套的單元格中。在Grid裡,你得先使用<Grid.RowDefinitions>和<Grid.ColumnDefinitions>來定義Grid的行列結構;然後在子控件中使用Grid的附加屬性來控制子控件所屬的單元格。

下面是一個使用Grid布局的例子,請注意控件所屬的單元格:

Silverlight 三個基本布局控件(Canvas、StackPanel、Grid )
Silverlight 三個基本布局控件(Canvas、StackPanel、Grid )

對這三個基本布局控件有所了解後,我們就可以很友善的管理頁面上控件的布局了。