WPF基础五：UI①布局元素WrapPanel

目录

 

WrapPanel

WrapPanel类

XAML范例：

C#代码

---

WrapPanel

按从左到右的顺序位置定位子元素，在包含框的边缘处将内容切换到下一行。 后续排序按照从上至下或从右至左的顺序进行，具体取决于 Orientation 属性的值。

WrapPanel包含UIElement对象的集合  ，这些对象位于 Children 属性中。

 WrapPanel 的所有子元素都接收ItemWidth 与ItemHeight大小相乘的布局分区 。

---

WrapPanel类

名称	备注	权限
ItemHeightProperty	标识 ItemHeight 依赖项属性	public
ItemWidthProperty	标识 ItemWidth 依赖项属性	public
OrientationProperty	标识 Orientation 依赖项属性	public

名称	备注	权限
ItemHeight	获取或设置一个值，该值指定 WrapPanel 中所含全部项的高度	public
ItemWidth	获取或设置一个值，该值指定 WrapPanel 中所含全部项的宽度	public
Orientation	获取或设置一个值，该值指定子内容的排列方向	public

名称	备注	权限
ArrangeOverride	获取或设置网格中的列数	public
MeasureOverride	获取或设置网格第一行中前导空白单元格的数量	public

---

XAML范例：

<Window x:Class="WrapPanel.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WrapPanel"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <WrapPanel ItemHeight="120" ItemWidth="200" Orientation="Vertical">
            <Button Content="Btn1" />
            <Button Content="Btn2" />
            <Button Content="Btn3" />
            <Button Content="Btn4" />
        </WrapPanel>
    </Grid>
</Window>

Orientation="Horizontal"

---

当宽度或长度不一的时候，可以利用HorizontalAlignment或VerticalAlignment。

<Window x:Class="WrapPanel.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WrapPanel"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <WrapPanel ItemHeight="120" ItemWidth="200" Orientation="Vertical">
            <Button Content="Btn1" />
            <Button Content="Btn2" Width="100" HorizontalAlignment="Left"/>
            <Button Content="Btn3" Width="100" HorizontalAlignment="Right"/>
            <Button Content="Btn4" />
        </WrapPanel>
    </Grid>
</Window>

---

C#代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WrapPanelDemo
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            WrapPanel wrapPanel = new WrapPanel();

            for (int i = 1; i < 9; i++)
            {
                Button button = new Button();
                button.Content = "Btn" + (i);
                wrapPanel.Children.Add(button);
            }
            wrapPanel.Orientation = Orientation.Horizontal;
            wrapPanel.ItemHeight = 120;
            wrapPanel.ItemWidth = 200;

            ((this as Window).Content as Grid).Children.Add(wrapPanel);
        }
    }
}