【愚公系列】2023年10月 WPF控件专题 WrapPanel控件详解

举报
愚公搬代码 发表于 2023/09/30 23:42:57 2023/09/30
【摘要】 WPF控件是Windows Presentation Foundation(WPF)中的基本用户界面元素。它们是可视化对象,可以用来创建各种用户界面。WPF控件可以分为两类:原生控件和自定义控件。

🏆 作者简介,愚公搬代码
🏆《头衔》:华为云特约编辑,华为云云享专家,华为开发者专家,华为产品云测专家,CSDN博客专家,阿里云专家博主,腾讯云优秀博主,掘金优秀博主,51CTO博客专家等。
🏆《近期荣誉》:2022年CSDN博客之星TOP2,2022年华为云十佳博主等。
🏆《博客内容》:.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
🏆🎉欢迎 👍点赞✍评论⭐收藏

🚀前言

WPF控件是Windows Presentation Foundation(WPF)中的基本用户界面元素。它们是可视化对象,可以用来创建各种用户界面。WPF控件可以分为两类:原生控件和自定义控件。

原生控件是由Microsoft提供的内置控件,如Button、TextBox、Label、ComboBox等。这些控件都是WPF中常见的标准用户界面元素。

自定义控件则允许开发人员使用XAML和C#等编程语言来创建个性化的用户界面元素。自定义控件可以根据需求提供更多的功能和自定义化选项,以及更好的用户体验。

🚀一、WrapPanel控件详解

WrapPanel是WPF中的一个面板控件,它可以让子元素自动换行排列,并且可以按照指定的方向进行排列。下面是WrapPanel的一些属性:

  1. Orientation:用于指定子元素排列的方向,默认值为Horizontal;

  2. ItemWidth和ItemHeight:用于指定子元素的宽度和高度,设置了这两个属性后,每行或每列的子元素大小将保持一致;

  3. HorizontalAlignment和VerticalAlignment:用于指定子元素在WrapPanel中的水平和垂直对齐方式。

下面是WrapPanel的一个示例代码:

<WrapPanel Orientation="Vertical" ItemWidth="100" ItemHeight="50">
    <Button Content="Button 1"/>
    <Button Content="Button 2"/>
    <Button Content="Button 3"/>
    <Button Content="Button 4"/>
    <Button Content="Button 5"/>
    <Button Content="Button 6"/>
    <Button Content="Button 7"/>
    <Button Content="Button 8"/>
    <Button Content="Button 9"/>
    <Button Content="Button 10"/>
</WrapPanel>

这个WrapPanel中有10个Button控件,设置了Orientation为Vertical,ItemWidth和ItemHeight分别为100和50,因此每行最多能容纳2个Button,每个Button的大小都是100x50。运行这个示例代码,可以看到这10个Button被自动排列为两列。

🔎1.属性介绍

WrapPanel是WPF中的一个控件,可以用于在容器中自动换行排列其子元素。WrapPanel的常用属性包括:

  1. Orientation:子元素的排列方向,默认为水平方向,可以设置为垂直方向。

  2. ItemWidth和ItemHeight:子元素的固定宽度和高度。当WrapPanel中的子元素没有明确指定大小时,可以使用这两个属性来指定子元素的大小。

  3. VerticalAlignment和HorizontalAlignment:控制子元素在WrapPanel中的对齐方式。

  4. CanHorizontallyScroll和CanVerticallyScroll:用于设置WrapPanel是否可以水平或垂直滚动。

  5. CacheLength和CacheLengthUnit:用于设置WrapPanel中预加载的子元素数量和单位。

  6. ItemContainerStyle:可以为WrapPanel中的每个子元素设置样式。

  7. MinWidth和MinHeight:设置WrapPanel的最小宽度和高度。当WrapPanel中的子元素无法在一行/列中全部显示时,会自动换行/列。

🔎2.常用场景

WrapPanel控件常用于需要动态布局的场景,例如:

  1. 展示图片集合,自动换行排列;
  2. 显示标签集合,根据内容自动换行排列;
  3. 用于数据表格的表头或表尾,自适应列宽并自动换行;
  4. 实现导航栏菜单,根据屏幕大小自动换行排列菜单项;
  5. 实现流式布局的网页设计,自动调整页面元素位置和大小。

WrapPanel控件适用于需要动态排列并自动换行的场景,使得界面更加灵活友好。

🔎3.具体案例

<Border BorderBrush="Red" BorderThickness="3" CornerRadius="5" >
    <StackPanel>
        <WrapPanel Name="wpPanels2" Margin="0,0,0,20">
            
        </WrapPanel>
        <WrapPanel Name="wpPanels" Orientation="Vertical" ItemHeight="30" ItemWidth="60"  Height="300" >
            <!--<Button>btn1</Button>
        <Button>btn1</Button>
        <Button>btn1</Button>
        <Button>btn1</Button>
        <Button>btn1</Button>
        <Button>btn1</Button>
        <Button>btn1</Button>
        <Button>btn1</Button>
        <Button>btn1</Button>
        <Button>btn1</Button>
        <Button>btn1</Button>
        <Button>btn1</Button>
        <Button>btn1</Button>
        <Button>btn1</Button>
        <Button>btn1</Button>
        <Button>btn1</Button>
        <Button>btn1</Button>
        <Button>btn1</Button>
        <Button>btn1</Button>-->
        </WrapPanel>
    </StackPanel>
</Border>
private void Window_Loaded(object sender, RoutedEventArgs e)
{
    for (int i = 1; i <= 100; i++)
    {
        Button btn = new Button();
        btn.Content = "btn" + i.ToString("00") + "号";
        btn.Background = new SolidColorBrush(Colors.Gray);
       // btn.Name = "btn" + i;
        btn.Margin = new Thickness(2, 2, 0, 0);
        wpPanels.Children.Add(btn);
    }
    for (int i = 1; i <= 20; i++)
    {
        Button btn = new Button();
        btn.Content = "btn" + i.ToString("00") + "号";
        btn.Background = new SolidColorBrush(Colors.Gray);
        //btn.Name = "btn" + i;
        btn.Margin = new Thickness(2, 2, 0, 0);
        wpPanels2.Children.Add(btn);
    }
}

🚀感谢:给读者的一封信

亲爱的读者,

我在这篇文章中投入了大量的心血和时间,希望为您提供有价值的内容。这篇文章包含了深入的研究和个人经验,我相信这些信息对您非常有帮助。

如果您觉得这篇文章对您有所帮助,我诚恳地请求您考虑赞赏1元钱的支持。这个金额不会对您的财务状况造成负担,但它会对我继续创作高质量的内容产生积极的影响。

我之所以写这篇文章,是因为我热爱分享有用的知识和见解。您的支持将帮助我继续这个使命,也鼓励我花更多的时间和精力创作更多有价值的内容。

如果您愿意支持我的创作,请扫描下面二维码,您的支持将不胜感激。同时,如果您有任何反馈或建议,也欢迎与我分享。

在这里插入图片描述

再次感谢您的阅读和支持!

最诚挚的问候, “愚公搬代码”

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。