當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

一步一步学Silverlight 2系列（3）：界面布局_转载

發(fā)布時間：2023/12/13 编程问答 44 豆豆

生活随笔收集整理的這篇文章主要介紹了一步一步学Silverlight 2系列（3）：界面布局_转载小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

概述

Silverlight 2 Beta 1版本發(fā)布了，無論從Runtime還是Tools都給我們帶來了很多的驚喜，如支持框架語言Visual Basic, Visual C#, IronRuby, Ironpython，對JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。《一步一步學Silverlight 2系列》文章帶您快速進入Silverlight 2開發(fā)。

本文為系列文章第三篇，學習Silverlight 2中的界面布局，Silverlight 2中新增加了Grid和Panel兩個布局容器，使得界面布局更加的強大和靈活。

Canvas面板

Canvas是在Silverlight 1.0時代就有的一種基礎布局面板，它采用絕對坐標定位。可以使用附加屬性（Attached Property）對Canvas中的元素進行定位，通過附加屬性我們指定控件相對于其直接父容器Canvas 控件的上、下、左、右坐標的位置。如下面的XAML聲明了兩個矩形，它們分別相對于父容器Canvas的左邊距是50，相對于父容器Canvas的上邊距分別是50和150：

運行后界面的效果如下所示：

除了上面我們用到的Canvas.Top和Canvas.Left兩個附加屬性外，還有一個Canvas.ZIndex附加屬性。如果指定了兩個控件相對于父容器Canvas同樣的邊距，則后面聲明的控件父覆蓋前面聲明的控件。這時我們可以使用Canvas.ZIndex屬性來改變它們的顯示順序，如下面的XAML聲明：

指定兩個矩形相對于父容器Canvas的邊距相同，這時默認的后聲明的橙色矩形會覆蓋藍色矩形：

指定Canvas.ZIndex為1

將會讓藍色矩形顯示在上面，值最大的顯示在最上面：

StackPanel

StackPanel支持用行或列的方式來進行頁面布局，默認情況下所有的子元素會垂直的排列顯示，如下面的XAML聲明三個矩形：

運行后在界面顯示效果如下：

當然我們也可以指定為水平排列，通過Orientation屬性指定：

運行后界面顯示效果如下：

在這里為了讓各個控件之間有一定的距離，使用了Margin屬性，該屬性類似于HTML中的Margin。

Grid

Grid控件類似與HTML中的Table，只不過子元素不用放在單元格中。通過<Grid.RowDefinitions> 和 <Grid.ColumnDefinitions>來定義Grid的行和列，使用Grid.Row和Grid.Column兩個附加屬性指定子元素在Grid中顯示的位置，這是一種非常靈活的布局方式。如下面的XAML聲明：

定義一個兩行兩列的Grid，做一個簡單的用戶登錄的布局，為了明顯起見，把ShowGridLines屬性設為True，以便能夠顯示出邊框線。同時，我們指定了第一行的高度為120，而第二行的則是剩余的高度，用*來指定。運行后效果如下：

綜合實例

分別了解了上面的三個布局控件，接下來我們看一個綜合實例，如何完成如下的一個取色器：

首先我們添加一個兩行兩列的Grid控件，分別指定行高和列寬：

添加顏色顯示區(qū)域，用一個矩形顯示，放入Grid的第0行第1列：

再添加顏色值顯示區(qū)，嵌套一個StackPanel控件，讓它里面的子控件垂直顯示：

<StackPanel Grid.Row="1" Grid.Column="1" ><TextBlock FontSize="12">Color</TextBlock><TextBox x:Name="HexColor" Width="160" Height="30" Text="#FF6600" Margin="10,5" FontSize="11"/> </StackPanel>

左邊用四個Silder控件和四個TextBlock控件顯示，需要對Grid的行進行合并Grid.RowSpan屬性：

這樣我們就完成了上面這樣相對復雜的界面布局，對Slider控件添加事件處理程序：

private void RedSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e) {Color color = Color.FromArgb((byte)AlphaSlider.Value, (byte)RedSlider.Value, (byte)GreenSlider.Value, (byte)BlueSlider.Value);PreviewColor.Fill = new SolidColorBrush(color);HexColor.Text = color.ToString(); }運行后，可以選取不同的顏色值：

結束語

關于界面布局就說到這里，在Silverlight 2中，通過上面的三種布局控件相結合，可以進行非常強大和靈活的界面布局。

轉載出處聲明：

作者：TerryLee
出處：http://terrylee.cnblogs.com
原文鏈接：http://www.cnblogs.com/Terrylee/archive/2008/03/07/Silverlight2-step-by-step-part3.html

轉載于:https://www.cnblogs.com/ZhangHuaning/archive/2010/04/20/1715962.html

總結

以上是生活随笔為你收集整理的一步一步学Silverlight 2系列（3）：界面布局_转载的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： win2008的搜索功能就是个鸡肋
下一篇：提交按钮禁用的办法