WPF教程三：布局之WrapPanel面板

WrapPanel：環繞面板

     WrapPanel布局面板將各個控件從左至右按照行或列的順序羅列，當長度或高度不夠時就會自動調整進行換行，后續排序按照從上至下或從右至左的順序進行。

     Orientation——根據內容自動換行。當Orientation屬性的值設置為 Horizontal：元素是從左向右排列的，然后自上至下自動換行。當Orientation屬性的值設置為Vertical：元素是從上向下排列的，然后從左至右自動換行。

    ItemHeight——所有子元素都一致的高度。每個子元素填充高度的方式取決於它的VerticalAlignment屬性、Height屬性等。任何比ItemHeight高的元素都將被截斷。

    ItemWidth——所有子元素都一致的寬度。每個子元素填充高度的方式取決於它的VerticalAlignment屬性、Width屬性等。任何比ItemWidth高的元素都將被截斷。

1、Orientation屬性的值設置為 Horizontal

示例效果圖如下2圖所示，圖1是窗體寬度較小時候的效果，圖2是窗體寬度拉大以后的效果

                                       圖1

                                        圖2        

使用XAML代碼實現：

  

<Window x:Class="WpfDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WrapPanel面板" Height="237" Width="525" WindowStartupLocation="CenterScreen">
    <WrapPanel Orientation="Horizontal">
        <Button Width="100">按鈕1</Button>
        <Button Width="100">按鈕2</Button>
        <Button Width="100">按鈕3</Button>
        <Button Width="100">按鈕4</Button>
        <Button Width="100">按鈕5</Button>
        <Button Width="100">按鈕6</Button>
    </WrapPanel>    
</Window>

 

2、Orientation屬性的值設置為Vertical

示例效果圖如下2圖所示，圖1是窗體高度較大時候的效果，圖2是窗體高度較小時的效果

                                         圖1

          

                                         圖2     

使用XAML代碼實現：

<Window x:Class="WpfDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WrapPanel面板" Height="237" Width="525" WindowStartupLocation="CenterScreen">
    <WrapPanel Orientation="Vertical">
        <Button Width="100">按鈕1</Button>
        <Button Width="100">按鈕2</Button>
        <Button Width="100">按鈕3</Button>
        <Button Width="100">按鈕4</Button>
        <Button Width="100">按鈕5</Button>
        <Button Width="100">按鈕6</Button>
    </WrapPanel>    
</Window>