Silverlight玩轉控件(三)——StackPanel佈局

d在上一次文章中，我們介紹了Canvas的佈局。我們也知道，在Silverlight中有Canvas,StackPanel,Grid三種佈局方式，今天我們就來詳細地說一下StackPanel的佈局。

Stack，棧！這個詞我們大家再熟悉不過，一種先進後出的數據結構。我覺得用這個來比喻我們這種佈局方式蠻形象。呵呵，稍後再說這個。

StackPanel其實像極了JAVA GUI中的FlowLayout，流佈局。

我們來看個例子：

<StackPanel Background="White">
    <Button Content="AAA"></Button>
    <Button Content="BBB"></Button>
</StackPanel>

 

效果如下：

 

想起來FlowLayout了麼?

我們看看默認的佈局方式：

1. 默認情況下，是水平佈局。像不像一個棧底在上的棧，我們把每個控件不停地壓進去呢？

2. 默認情況下，是Stretch，也就是拉伸方式來填充我們的控件屏幕。

好，那我們如何改變。

先來看第一種情況，讓我們將水平佈局改成垂直佈局。

<StackPanel Background="White" Orientation="Horizontal">
    <Button Content="AAA"></Button>
    <Button Content="BBB"></Button>
</StackPanel>

效果如下：

看到啦！拉伸效果，垂直佈局。

接下來，我們不允許按鈕以拉伸方式來填充控件空間。很簡單，我們來顯式地設置控件的長和寬就OK了！看代碼：

<StackPanel Background="White">
    <Button Content="AAA" Width="30"></Button>
    <Button Content="BBB" Width="60"></Button>
</StackPanel>

 

垂直佈局情況下也是一樣，只不過我們在水平佈局的時候設置的是控件的Width屬性，而當我們垂直佈局的時候只需要設置控件的Height屬性罷了！

接下來，我們看一個小技巧，在上文中，我們看到我們可以自己定製控件的長寬，使其避免以拉伸方式填充屏幕。但是我們這個時候發現，控件都是以居中方式佈局。

好了，我們在上文中提出了兩種默認的佈局情況，在這裏我們提出第三條：

3. 默認情況下，是居中佈局。

同樣，我們也是考慮如何修改，這裏給出兩種修改的方式：

1. 爲每個控件提供自己獨有的佈局方式：

<StackPanel Background="White">
    <Button Content="AAA" Width="30" HorizontalAlignment="Left"></Button>
    <Button Content="BBB" Width="60" HorizontalAlignment="Center"></Button>
    <Button Content="CCC" Width="30" HorizontalAlignment="Right"></Button>
</StackPanel>

當然，我們還可以用我們熟悉的Margin屬性來改變佈局方式：

<StackPanel Background="White">
    <Button Content="AAA" Width="30" Margin="10,0,0,0"></Button>
    <Button Content="BBB" Width="60" Margin="20,40,20,19"></Button>
    <Button Content="CCC" Width="30" ></Button>
</StackPanel>

 

我們看到的並非我們想象中的代碼，而是:

 

其實，他的Margin的距離是這樣的：（我們在這裏只限於討論水平佈局的情況）：

Left – Right: 於居中佈局的距離

Top:於頂部控件（如果是最頂部控件則是屏幕最上方）的距離

Buttom：於底部控件（如果是最底部控件則是屏幕最下方）的距離

恩！好了，說過的水平的佈局，垂直的佈局其實也是一樣：

我們來看下代碼：

<StackPanel Background="White" Orientation="Horizontal">
    <Button Content="AAA" Width="30" VerticalAlignment="Bottom"></Button>
    <Button Content="BBB" Width="60" VerticalAlignment="Center"></Button>
    <Button Content="CCC" Width="30" VerticalAlignment="Top"></Button>
</StackPanel>

所得到的效果如下：

好了，StackPanel的基本佈局方式就說到這裏，關於StackPanel的技巧型用法也像我上文中所說的Panel局部一樣，不再贅述。

在這裏，我談下對StackPanel的看法。個人認爲，在實際應用中，StackPanel的應用並不廣泛，他沒有Panel的靈活，也沒有Grid的定製，因此相對屬於一個雞肋的佈局控件。

好了，今天就說到這