WPF的布局--StackPanel

1. StackPanel是以堆疊的方式來顯示控件(從左到右，或者從上到下)

    默認是從上到下顯示的，並且寬度為StackPanel的寬度，高度自動適應控件中內容的高度（未對控件進行設置時）

   如圖：

    

     代碼如下：

<Window x:Class="ReadRemoteRegistry.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <StackPanel>
            <Button Content="第一個按鈕" Click="Button_Click"/>
            <Button Content="第二個按鈕" Click="Button_Click_1"/>
            <Button Content="第三個按鈕" Click="Button_Click_2"/>
        </StackPanel>
            <Button Content="Button" HorizontalAlignment="Left" Margin="220,199,0,0" VerticalAlignment="Top" Width="176" Height="41" Click="Button_Click_3"/>

    </Grid>
</Window>

2.可以通過 Orientation [orɪɛn'teʃən] n.方向 屬性來設置布局的樣式(水平還是垂直，即上面說的從左到右，或從上到下)

    Orientation屬性的可選值有：Horizontal 水平、 Vertical 垂直(默認)，如圖：

   

    代碼如下：高度為StackPanel的高度，寬度自動適應控件中內容的寬度

<Window x:Class="ReadRemoteRegistry.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <StackPanel Orientation="Horizontal">
            <Button Content="第一個按鈕" Click="Button_Click"/>
            <Button Content="第二個按鈕" Click="Button_Click_1"/>
            <Button Content="第三個按鈕" Click="Button_Click_2"/>
        </StackPanel>
            <Button Content="Button" HorizontalAlignment="Left" Margin="220,199,0,0" VerticalAlignment="Top" Width="176" Height="41" Click="Button_Click_3"/>

    </Grid>
</Window>

3.控制StackPanel內控件的屬性和狀態

     3.1. 內部控件的 Width 和 Height

                 如果未對內部的控制設置這兩個屬性，就會出現上述的：

                      垂直布局時(從上到下)：寬度為StackPanel的寬，高度自動適應控件中內容的高度；

                      水平布局時(從左到右)：高度為StackPanel的高，寬度自動適應控件中內容的寬度；

     3.2. Margin屬性，控制內部控件的外邊距

             3.2.1. Margin=”10”：各邊距均為10；

             3.2.2.Margin=”10,20,30,40”：設定左、上、右、下各邊緣分別為10、20、30、40

             3.2.3.使用拆分式方式設定(使用復雜屬性)，如上下為10，左右為20

                     <Button Content="Button A">
                            <Button.Margin>
                                    <Thickness Top="10" Bottom="10" Left="20" Right="20" />
                            </Button.Margin>
                    </Button>

      3.3. 設置內部控件的對齊方式

               3.3.1. HorizontalAlignment、(需要在整體Orientation="Vertical"的前提下)
                            設定控件的豎直對齊方式，如，設置水平對齊為Left、Right或Center

               3.3.2. VerticalAlignment屬性(需要在整體Orientation="Horizontal"的前提下)

                            設定控件的水平對齊方式，設置水平對齊為Top、Center、Stretch或Bottom

       3.4. 設置內部控件的動態值

              MinWidth: 允許的最小寬度

              MinHeight: 允許的最小高度

              MaxWidth：隨控件變化時，允許的最大寬度

              MaxHeight：隨控件變化時，允許的最大高度

 

4.使用StackPanel可以讓控制隨內容變化而自適應

     如下圖：“OK"和"Cancel“按鈕的對話框，因為按鈕上的文字可能因字體的改變而發生大小改變，

                我們應該避免固定按鈕大小的寫法(即不要設置控件Width的值，而是使用MinWidth此類屬性)。

                StackPanel會自動根據面板的大小的自動調整內部控件的大小。

                我們就不用為按鈕太大或太小而煩惱了。

 

                 

 

  <StackPanel Margin="8" Orientation="Horizontal"> <Button MinWidth="93">OK</Button> <Button MinWidth="93" Margin="10,0,0,0">Cancel</Button> </StackPanel>

 

 

參考：http://blog.sina.com.cn/s/blog_6c81891701017a34.html