WPF中的WrapPanel布局

开发工具与关键技术：Visual Studio 2015、WPF
作者：黄元进
撰写时间：2019年4月14日

WrapPanel布局面板将各个空间从左至右按照行或列的顺序罗列，当长度或高度不够时就会自动调整进行换行，后序排序按照从上至下或从右至左的顺序进行。Orientation——根据内容自动换行。
一、Vertical：元素是从上向下排列的，然后从左至右自动换行。
Vertical效果图如下图1，图2是拉低高度的效果，可以自行拉动窗体的宽高看效果。

使用XAML代码实现：

<Window x:Class="WrapPanel面板.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="300" Width="300">
    <!--Vertical：元素是从上向下排列的，然后从左至右自动换行-->
    <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>
        <Button Width="100">7</Button>
        <Button Width="100">8</Button>
        <Button Width="100">9</Button>
        <Button Width="100">10</Button>
        <Button Width="100">11</Button>
        <Button Width="100">12</Button>
        <Button Width="100">13</Button>
        <Button Width="100">14</Button>
    </WrapPanel>
</Window>

二、Horizontal：元素是从左向右排列的，然后自上至下自动换行。
Horizontal效果图如下图1，图2是拉缩宽度的效果，可以自行拉动窗体的宽高看效果。

使用XAML代码实现：

<Window x:Class="WrapPanel面板.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">
    <!--Horizontal：元素是从左向右排列的，然后自上至下自动换行。-->
    <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>
        <Button Width="100">7</Button>
        <Button Width="100">8</Button>
        <Button Width="100">9</Button>
        <Button Width="100">10</Button>
        <Button Width="100">11</Button>
    </WrapPanel>	
</Window>