WPF布局控件之WrapPanel布局

前言:博主文章仅用于学习、研究和交流目的,不足和错误之处在所难免,希望大家能够批评指出,博主核实后马上更改。

概述:

后续排序按照从上至下或从右至左的顺序进行,具体取决于方向属性的值。WrapPanel 位置子控件基于方向、水平方向 (默认) 从左到右的位置控件和从上到下垂直方向位置控件,一旦达到最大宽度或高度,控件会自动基于方向创建行或列。可以使用 HorizontalSpacing 和 VerticalSpacing 属性在项之间自动添加间距。 当“方向”为“水平”时,HorizontalSpacing 在每个单独的项之间添加统一的水平间距,而 VerticalSpacing 在每一行项之间添加统一的间距。当“方向”为“垂直”时,HorizontalSpacing 会在每列项之间添加统一的间距,而 VerticalSpacing 在各个项之间添加统一的垂直间距。

名称说明
Grid网格,根据行和列来设置控件的布局
StackPanel栈式面板,包含的元素在竖直或水平方向排成一条直线
WrapPanel自动折行面板,包含的元素在排满一行后,自动换行
DockPanel泊靠式面板,内部的元素可以选择泊靠方向
UniformGrid网格,UniformGrid就是Grid的简化版,每个单元格的大小相同。
Canvas画布,内部元素根据像素为单位绝对坐标进行定位
Border装饰的控件,此控件用于绘制边框及背景,在Border中只能有一个子控件

一、WrapPanel

常用属性数据类型可选值说明
OrientationOrientationHorizontal(水平排列)\Vertical(垂直排列)决定内部元素是水平还是垂直排列,默认值(Vertical)
BackgroundBrush背景色(Red/Yellow等等)
HorizontalAlignmentHorizontalAlignmentCenter(中心)/Left(靠左)/Right(靠右)/Stretch(拉伸以填充父元素)决定内部元素在水平方向的对齐方式
VerticalAlignmentVerticalAlignmentTop(上方)/Center(中心)/Bottom(下方)/Stretch(拉伸以填充父元素)决定内部元素在垂直方向的对齐方式

Orientation=“Vertical”

   <WrapPanel Orientation="Vertical" Background="Red">
       <Button Width="200" Height="100">zhangsan</Button>
       <Button Width="200" Height="100">zhangsan</Button>
       <Button Width="200" Height="100">zhangsan</Button>
       <Button Width="200" Height="100">zhangsan</Button>
       <Button Width="200" Height="100">zhangsan</Button>
       <Button Width="200" Height="100">zhangsan</Button>
       <Button Width="200" Height="100">zhangsan</Button>
       <Button Width="200" Height="100">zhangsan</Button>
       <Button Width="200" Height="100">zhangsan</Button>
       <Button Width="200" Height="100">zhangsan</Button>
       <Button Width="200" Height="100">zhangsan</Button>
       <Button Width="200" Height="100">zhangsan</Button>
       <Button Width="200" Height="100">zhangsan</Button>
       <Button Width="200" Height="100">zhangsan</Button>
       <Button Width="200" Height="100">zhangsan</Button>
       <Button Width="200" Height="100">zhangsan</Button>
       <Button Width="200" Height="100">zhangsan</Button>
       <Button Width="200" Height="100">zhangsan</Button>
   </WrapPanel>

在这里插入图片描述

Orientation=“Horizontal”

  <WrapPanel Orientation="Horizontal" Background="Red">
      <Button Width="200" Height="100">zhangsan</Button>
      <Button Width="200" Height="100">zhangsan</Button>
      <Button Width="200" Height="100">zhangsan</Button>
      <Button Width="200" Height="100">zhangsan</Button>
      <Button Width="200" Height="100">zhangsan</Button>
      <Button Width="200" Height="100">zhangsan</Button>
      <Button Width="200" Height="100">zhangsan</Button>
      <Button Width="200" Height="100">zhangsan</Button>
      <Button Width="200" Height="100">zhangsan</Button>
      <Button Width="200" Height="100">zhangsan</Button>
      <Button Width="200" Height="100">zhangsan</Button>
      <Button Width="200" Height="100">zhangsan</Button>
      <Button Width="200" Height="100">zhangsan</Button>
      <Button Width="200" Height="100">zhangsan</Button>
      <Button Width="200" Height="100">zhangsan</Button>
      <Button Width="200" Height="100">zhangsan</Button>
      <Button Width="200" Height="100">zhangsan</Button>
      <Button Width="200" Height="100">zhangsan</Button>
  </WrapPanel>

在这里插入图片描述

VerticalAlignment=“Bottom”

   <WrapPanel Orientation="Horizontal" Background="Red" VerticalAlignment="Bottom">
       <Button Width="200" Height="100">zhangsan</Button>
       <Button Width="200" Height="100">zhangsan</Button>
       <Button Width="200" Height="100">zhangsan</Button>
       <Button Width="200" Height="100">zhangsan</Button>
       <Button Width="200" Height="100">zhangsan</Button>
       <Button Width="200" Height="100">zhangsan</Button>
       <Button Width="200" Height="100">zhangsan</Button>
       <Button Width="200" Height="100">zhangsan</Button>
       <Button Width="200" Height="100">zhangsan</Button>
       <Button Width="200" Height="100">zhangsan</Button>
       <Button Width="200" Height="100">zhangsan</Button>
       <Button Width="200" Height="100">zhangsan</Button>
       <Button Width="200" Height="100">zhangsan</Button>
       <Button Width="200" Height="100">zhangsan</Button>
       <Button Width="200" Height="100">zhangsan</Button>
       <Button Width="200" Height="100">zhangsan</Button>
       <Button Width="200" Height="100">zhangsan</Button>
       <Button Width="200" Height="100">zhangsan</Button>
   </WrapPanel>

在这里插入图片描述

HorizontalAlignment=“Center”

 <WrapPanel Orientation="Horizontal" Background="Red" HorizontalAlignment="Center">
     <Button Width="200" Height="100">zhangsan</Button>
     <Button Width="200" Height="100">zhangsan</Button>
     <Button Width="200" Height="100">zhangsan</Button>
     <Button Width="200" Height="100">zhangsan</Button>
     <Button Width="200" Height="100">zhangsan</Button>
     <Button Width="200" Height="100">zhangsan</Button>
     <Button Width="200" Height="100">zhangsan</Button>
     <Button Width="200" Height="100">zhangsan</Button>
     <Button Width="200" Height="100">zhangsan</Button>
     <Button Width="200" Height="100">zhangsan</Button>
     <Button Width="200" Height="100">zhangsan</Button>
     <Button Width="200" Height="100">zhangsan</Button>
     <Button Width="200" Height="100">zhangsan</Button>
     <Button Width="200" Height="100">zhangsan</Button>
     <Button Width="200" Height="100">zhangsan</Button>
     <Button Width="200" Height="100">zhangsan</Button>
     <Button Width="200" Height="100">zhangsan</Button>
     <Button Width="200" Height="100">zhangsan</Button>
 </WrapPanel>

在这里插入图片描述

总结

在实际工作中,我们可以使用Orientation、HorizontalAlignment、VerticalAlignment 这三个属性组合各种排列和对齐方式。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/116017.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

ssh免密登录

单机 1 生成密钥 执行 ssh-keygen -t rsa &#xff08; 其中 rsa 是非对称算法&#xff09; 一路回车到底&#xff0c;生成密钥 且生成之后会在用户的根目录生成一个 “.ssh”的文件夹 2 添加公钥到 将 公钥内容追加到 authorized_keys 中&#xff1a; cat ~/.ssh/id_rsa.pub …

生成m3u8视频:批量剪辑与分割的完美结合

在视频处理领域&#xff0c;m3u8视频格式的出现为高效处理和优化视频内容提供了新的可能。尤其在批量剪辑和分割视频的过程中&#xff0c;掌握m3u8视频的生成技巧&#xff0c;意味着更高效的工作流程和更出色的创作效果。现在一起来看看云炫AI智剪如何生成m3u8视频的操作吧。 步…

RK-3399pro 萤火虫firefly 官方unbuntu 固件系统安装搜狗中文输入法

RK-3399pro 萤火虫firefly 官方unbuntu 固件系统安装搜狗输入法&#xff08;适用于所有基于Ubuntu的UI桌面系统&#xff09; 一、添加中文语言支持输入法平台fcitx 1.安装fcitx sudo apt-get install fcitx 2.然后设置fcitx为开机自启动 sudo cp /usr/share/applications/fc…

【EI会议征稿】第三届电子信息工程、大数据与计算机技术国际学术会议(EIBDCT 2024)

第三届电子信息工程、大数据与计算机技术国际学术会议&#xff08;EIBDCT 2024&#xff09; 2024 3rd International Conference on Electronic Information Engineering, Big Data and Computer Technology 第三届电子信息工程、大数据与计算机技术国际学术会议&#xff08;…

React 底层 Fiber 架构 简单理解

一、 背景 JS 是引擎是单线程运行的&#xff1b;严格来说&#xff0c;JS 引擎和页面渲染引擎在同一渲染线程&#xff0c;两者互斥。那么就会遇到这样的一种情况&#xff1a;当前面一个任务长期霸占CPU&#xff0c;后面啥事也干不了&#xff0c;浏览器卡死&#xff0c;造成极差…

WebSocket Day 01:入门案例

前言 欢迎来到WebSocket入门案例系列的第一天&#xff01;在今天的博客中&#xff0c;我们将一起探索WebSocket的基础知识和使用方法。本系列将以一个简单的入门案例为基础&#xff0c;带领您逐步了解WebSocket的原理和用法。 一、什么是 WebSocket ? WebSocket是一种在Web应…

数据结构之队的实现

&#x1d649;&#x1d65e;&#x1d658;&#x1d65a;!!&#x1f44f;&#x1f3fb;‧✧̣̥̇‧✦&#x1f44f;&#x1f3fb;‧✧̣̥̇‧✦ &#x1f44f;&#x1f3fb;‧✧̣̥̇:Solitary-walk ⸝⋆ ━━━┓ - 个性标签 - &#xff1a;来于“云”的“羽球人”。…

Linux Framebuffer驱动框架、接口实现和使用

Linux 驱动-Frame Buffer代码分析 Framebufferfbmem.c部分代码分析初始化 Framebuffer 对于驱动开发人员来说&#xff0c;其实只需要针对具体的硬件平台SOC和具体的LCD&#xff08;通过焊接连接到该SOC引脚上的LCD&#xff09;来进行第一部分的寄存器编程&#xff08;红色部分&…

【音视频 | opus】opus编码的Ogg封装文件详解

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; &#x1f923;本文内容&#x1f923;&a…

项目实战之安装依赖npm install

文章目录 nvmdeasync包和node-gyp报错deasync包node-gyp报错 前言&#xff1a;有些人看着还活着其实已经凉了好一会儿了。 初拿到项目 初拿到项目肯定是先看配置 package.json的啦&#xff0c;看看都需要安装什么依赖&#xff0c;然后 npm install,OK结束 皆大欢喜。 ————…

Java字符串常用函数 详解5000字 (刷题向 / 应用向)

1.直接定义字符串 直接定义字符串是指使用双引号表示字符串中的内容&#xff0c;例如"Hello Java"、"Java 编程"等。具体方法是用字符串常量直接初始化一个 String 对象&#xff0c;示例如下&#xff1a; 1. String str"Hello Java"; 或者 …

第19期 | GPTSecurity周报

GPTSecurity是一个涵盖了前沿学术研究和实践经验分享的社区&#xff0c;集成了生成预训练 Transformer&#xff08;GPT&#xff09;、人工智能生成内容&#xff08;AIGC&#xff09;以及大型语言模型&#xff08;LLM&#xff09;等安全领域应用的知识。在这里&#xff0c;您可以…

【C++】特殊类设计

文章目录 一、设计一个类&#xff0c;不能被拷贝二、设计一个类&#xff0c;不能被继承三、设计一个类&#xff0c;只能在栈上创建对象四、设计一个类&#xff0c;只能在堆上创建对象五、设计一个类&#xff0c;只能创建一个对象(单例模式) 在某些特殊的场景下&#xff0c;我们…

使用Gorm进行高级查询

深入探讨GORM的高级查询功能&#xff0c;轻松实现Go中的数据检索 高效的数据检索是每个应用程序性能的核心。GORM&#xff0c;强大的Go对象关系映射库&#xff0c;不仅扩展到基本的CRUD操作&#xff0c;还提供了高级的查询功能。本文是您掌握使用GORM进行高级查询的综合指南。…

【雷达原理】雷达杂波抑制方法

目录 一、杂波及其特点 1.1 什么是杂波&#xff1f; 1.2 杂波的频谱特性 二、动目标显示(MTI)技术 2.1 对消原理 2.2 数字对消器设计 三、MATLAB仿真 3.1 对消效果验证 3.2 代码 一、杂波及其特点 1.1 什么是杂波&#xff1f; 杂波是相对目标回波而言的&#xff0c;…

IDEA中如何移除未使用的import

&#x1f468;&#x1f3fb;‍&#x1f4bb; 热爱摄影的程序员 &#x1f468;&#x1f3fb;‍&#x1f3a8; 喜欢编码的设计师 &#x1f9d5;&#x1f3fb; 擅长设计的剪辑师 &#x1f9d1;&#x1f3fb;‍&#x1f3eb; 一位高冷无情的编码爱好者 大家好&#xff0c;我是全栈工…

链栈的练习

链栈练习 相关内容&#xff1a;栈的链式存储结构&#xff08;链栈&#xff09; //链栈的初始化、判空、入栈、出栈、读取栈顶元素 //链栈的结点&#xff1a;数据域、指针域 #include<stdio.h> #include<stdlib.h> typedef int Status; #define OK 1 #define ERRO…

算法通关村第五关-白银挑战队列经典问题

大家好我是苏麟 , 今天带来几道经典小题 . 大纲 两数之和 两数之和 相信大家对这道题还是很眼熟的 , 打开LeetCode第一道题就是它 , 对它可真的又爱又恨 , 很多新手朋友们想刷LeetCode但又不知道从哪开始就打开了第一题 , 结果就对算法失去了信心 . 这道题找对方法还是很容易…

2022最新版-李宏毅机器学习深度学习课程-P32 Transformer

一、 seq2seq 1. 含义 输入一个序列&#xff0c;机器输出另一个序列&#xff0c;输出序列长度由机器决定。 文本翻译&#xff1a;文本至文本&#xff1b;  语音识别&#xff1a;语音至文本&#xff1b;  语音合成&#xff1a;文本至语音&#xff1b;  聊天机器人&#…

R语言_RColorBrewer包--全平台可用

R语言_RColorBrewer包–全平台可用