WPF基础五：UI①布局元素WrapPanel[通俗易懂]

全栈程序员站长

发布于 2022-09-15 10:05:41

7250

发布于 2022-09-15 10:05:41

文章被收录于专栏：全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

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);
        }
    }
}

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/163345.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

java