WPF布局控件之WrapPanel

最新推荐文章于 2024-05-09 20:15:46 发布
最新推荐文章于 2024-05-09 20:15:46 发布
阅读量427 收藏 1
点赞数
分类专栏： WPF 文章标签： wpf c# 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56651882/article/details/129251022
版权

WrapPanel

WrapPanel，英文意思是折叠容器，那到底是怎么个折叠法呢？如下：

在这里插入图片描述

<Window x:Class="LearnLayout.WrapPanelWin"
        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:LearnLayout"
        mc:Ignorable="d"
        Title="WrapPanelWin" Height="450" Width="800">
	<WrapPanel>
		<Button Content="牛马人的一生" Background="lavender"/>
		<Button Content="我不是牛马" Background="Pink"/>
		<Button Content="下辈子还当牛马" Background="Snow"/>
		<Button Content="牛马人的一生" Background="lavender"/>
		<Button Content="我不是牛马" Background="Pink"/>
		<Button Content="下辈子还当牛马" Background="Snow"/>
		<Button Content="牛马人的一生" Background="lavender"/>
		<Button Content="我不是牛马" Background="Pink"/>
		<Button Content="下辈子还当牛马" Background="Snow"/>
		<Button Content="牛马人的一生" Background="lavender"/>
		<Button Content="我不是牛马" Background="Pink"/>
		<Button Content="下辈子还当牛马" Background="Snow"/>
	</WrapPanel>
</Window>

相当于是WPF会根据WrapPanel中的控件一个接一个排列在WrapPanel中，如果宽度（或高度）不够，那么就会自己换行。这就解释了为什么叫折叠容器。那这里只能看到宽度对布局的影响，为什么说高度呢？和StackPanel一样，可以根据Orientation属性来设置其水平或垂直布局方向，如下：

在这里插入图片描述

<Window x:Class="LearnLayout.WrapPanelWin"
        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:LearnLayout"
        mc:Ignorable="d"
        Title="WrapPanelWin" Height="450" Width="800">
	<WrapPanel Orientation="Vertical">
		<Button Content="牛马人的一生" Background="lavender"/>
		<Button Content="我不是牛马" Background="Pink"/>
		<Button Content="下辈子还当牛马" Background="Snow"/>
		<Button Content="牛马人的一生" Background="lavender"/>
		<Button Content="我不是牛马" Background="Pink"/>
		<Button Content="下辈子还当牛马" Background="Snow"/>
		<Button Content="牛马人的一生" Background="lavender"/>
		<Button Content="我不是牛马" Background="Pink"/>
		<Button Content="下辈子还当牛马" Background="Snow"/>
		<Button Content="牛马人的一生" Background="lavender"/>
		<Button Content="我不是牛马" Background="Pink"/>
		<Button Content="下辈子还当牛马" Background="Snow"/>
		<Button Content="牛马人的一生" Background="lavender"/>
		<Button Content="我不是牛马" Background="Pink"/>
		<Button Content="下辈子还当牛马" Background="Snow"/>
		<Button Content="牛马人的一生" Background="lavender"/>
		<Button Content="我不是牛马" Background="Pink"/>
		<Button Content="下辈子还当牛马" Background="Snow"/>
		<Button Content="牛马人的一生" Background="lavender"/>
		<Button Content="我不是牛马" Background="Pink"/>
		<Button Content="下辈子还当牛马" Background="Snow"/>
		<Button Content="牛马人的一生" Background="lavender"/>
		<Button Content="我不是牛马" Background="Pink"/>
		<Button Content="下辈子还当牛马" Background="Snow"/>
	</WrapPanel>
</Window>

和StackPanel不一样的是，WrapPanel默认是水平的（Orientation="Horizontal"），而StackPanel默认是垂直的（Orientation="Vertical"）。
那如果WrapPanel中各控件的宽（或者高）不一样呢？如果是水平布局下，那么当前行的高度受其当前行中控件宽度最高的控件控制，反之，垂直布局中，当前列的宽度受其当前列控件宽度最宽的控件控制，如下：

水平：
在这里插入图片描述

<Window x:Class="LearnLayout.WrapPanelWin"
        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:LearnLayout"
        mc:Ignorable="d"
        Title="WrapPanelWin" Height="450" Width="800">
	<WrapPanel Orientation="Horizontal">
		<Button Content="牛马人的一生" Background="lavender" Height="200"/>
		<Button Content="我不是牛马" Background="Pink"/>
		<Button Content="下辈子还当牛马" Background="Snow"/>
		<Button Content="牛马人的一生" Background="lavender"/>
		<Button Content="我不是牛马" Background="Pink"/>
		<Button Content="下辈子还当牛马" Background="Snow"/>
		<Button Content="牛马人的一生" Background="lavender"/>
		<Button Content="我不是牛马" Background="Pink"/>
		<Button Content="下辈子还当牛马" Background="Snow"/>
		<Button Content="牛马人的一生" Background="lavender"/>
		<Button Content="我不是牛马" Background="Pink"/>
		<Button Content="下辈子还当牛马" Background="Snow"/>
		<Button Content="牛马人的一生" Background="lavender"/>
		<Button Content="我不是牛马" Background="Pink"/>
		<Button Content="下辈子还当牛马" Background="Snow"/>
		<Button Content="牛马人的一生" Background="lavender"/>
		<Button Content="我不是牛马" Background="Pink"/>
		<Button Content="下辈子还当牛马" Background="Snow"/>
		<Button Content="牛马人的一生" Background="lavender"/>
		<Button Content="我不是牛马" Background="Pink"/>
		<Button Content="下辈子还当牛马" Background="Snow"/>
		<Button Content="牛马人的一生" Background="lavender"/>
		<Button Content="我不是牛马" Background="Pink"/>
		<Button Content="下辈子还当牛马" Background="Snow"/>
	</WrapPanel>
</Window>

垂直：
在这里插入图片描述

<Window x:Class="LearnLayout.WrapPanelWin"
        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:LearnLayout"
        mc:Ignorable="d"
        Title="WrapPanelWin" Height="450" Width="800">
	<WrapPanel Orientation="Vertical">
		<Button Content="牛马人的一生" Background="lavender" Width="200"/>
		<Button Content="我不是牛马" Background="Pink"/>
		<Button Content="下辈子还当牛马" Background="Snow"/>
		<Button Content="牛马人的一生" Background="lavender"/>
		<Button Content="我不是牛马" Background="Pink"/>
		<Button Content="下辈子还当牛马" Background="Snow"/>
		<Button Content="牛马人的一生" Background="lavender"/>
		<Button Content="我不是牛马" Background="Pink"/>
		<Button Content="下辈子还当牛马" Background="Snow"/>
		<Button Content="牛马人的一生" Background="lavender"/>
		<Button Content="我不是牛马" Background="Pink"/>
		<Button Content="下辈子还当牛马" Background="Snow"/>
		<Button Content="牛马人的一生" Background="lavender"/>
		<Button Content="我不是牛马" Background="Pink"/>
		<Button Content="下辈子还当牛马" Background="Snow"/>
		<Button Content="牛马人的一生" Background="lavender"/>
		<Button Content="我不是牛马" Background="Pink"/>
		<Button Content="下辈子还当牛马" Background="Snow"/>
		<Button Content="牛马人的一生" Background="lavender"/>
		<Button Content="我不是牛马" Background="Pink"/>
		<Button Content="下辈子还当牛马" Background="Snow"/>
		<Button Content="牛马人的一生" Background="lavender"/>
		<Button Content="我不是牛马" Background="Pink"/>
		<Button Content="下辈子还当牛马" Background="Snow"/>
	</WrapPanel>
</Window>
逍遥ovo
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WPF控件之WrapPanel的用法
xieehu的博客
02-17 1121
WPF控件之WrapPanel的用法
WPF 控件专题 WrapPanel 控件详解
^@^lemon tea^@^
06-22 5638
WPF 控件专题 WrapPanel 控件详解
WPF容器控件之WrapPanel、布局控件
最新发布
qq_3517289697的博客
05-09 242
WrapPanel: 换行panel 子元素进行换行，当子元素的宽度或者高度超出了父元素，才进行换行。高度超出父元素的高度 也会另起一列
【WPF应用12】基本控件-WrapPanel布局详解与示例
qq_35320456的博客
03-25 2027
WrapPanel 控件在WPF中的应用
WPF入门教程系列七——布局之WrapPanel与StackPanel（二）
Gefangenes的博客
05-24 805
元素的Margin属性用于使元素之间产生一定得间隔，当元素空间大于其内容的空间时，剩余空间将由HorizontalAlignment和 VerticalAlignment属性来决定如何分配。本次的示例，效果图如下2图，图1是宽度比较小，图2就是拉长了宽度后的结果。
WPF快速入门2—布局WrapPanel，DockPanel，StackPanel，Canvas
Java_c#
02-23 2808
一、WrapPanel 以一行或一列来布置控件 Orientation="Horizontal" 水平排列 button 按钮高度174 效果： 二、DockPanel 元素的排列停靠方式，置于顶部或者下部或者左部、右边 LastChildFill="True"最后控件自动填满 效果： ...
WPF布局控件之WrapPanel布局
qq_36819973的博客
11-03 875
。WrapPanel 位置子控件基于方向、水平方向 (默认) 从左到右的位置控件和从上到下垂直方向位置控件，一旦达到最大宽度或高度，控件会自动基于方向创建行或列。
WPF—WrapPanel布局
ting2267的博客
07-01 530
WrapPanel布局面板将各个控件从左至右按照行或列的顺序罗列，当长度或高度不够是就会自动调整进行换行，后续排序按照从上至下或从右至左的顺序进行。 Orientation——根据内容自动换行。当 Horizontal选项看上去类似于Windows资源管理器的缩略图视图：元素是从左向右排列的，然后自上至下自动换行。Vertical 选项看上去类似于Windows资源管理器的列表视图：元素是从上向下...
WPF WrapPanel
weixin_44560357的博客
07-17 419
WrapPanel布局面板将各个控件从左至右按照行或列的顺序罗列，当长度或高度不够是就会自动调整进行换行，后续排序按照从上至下或从右至左的顺序进行。 Orientation——根据内容自动换行。当 Horizontal选项看上去类似于Windows资源管理器的缩略图视图：元素是从左向右排列的，然后自上至下自动换行。Vertical 选项看上去类似于Windows资源管理器的列表视图：元素是从上...
WPF布局、控件、事件、绑定、MVVM基础入门
03-26
**WPF布局** Windows Presentation Foundation (WPF) 是微软推出的一种强大的用户界面框架，用于构建桌面应用程序。在WPF中，布局系统是构建用户界面的基础，它负责自动管理控件的位置和大小，以适应不同的屏幕尺寸...
WPF 分页控件
11-03
在实现过程中，WPF的控件布局系统，如`Grid`、`StackPanel`或`WrapPanel`，会被用来组织图片和分页按钮。同时，可能还会用到事件处理机制，如`PageIndexChanged`事件，当用户切换页面时触发更新数据源和显示新的图片...
WPF 布局控件的用法
06-16
接下来，我们关注`Grid`控件，它是WPF中最常用的布局控件之一。`Grid`允许你定义行和列，然后将子元素放置在特定的单元格中。例如： ```xml *" /> *" /> 按钮1" /> 按钮2" /> 按钮3" /> ``` 这...
wpf布局控件的使用
06-22
本文将深入探讨WPF中的几种主要布局控件：Grid、StackPanel、WrapPanel以及Canvas，帮助你更好地理解和运用这些工具来创建高效、美观的UI。 1. Grid（网格）控件： Grid控件类似于HTML中的表格，通过行和列定义...
WPF经典教程之StackPanel、WrapPanel、DockPanel布局
10-05
WrapPanel 以流式布局显示控件，类似Java AWT中的FlowLayout。它会从左到右显示元素，当一行无法容纳更多元素时，会自动换行到下一行。这对于创建多列或多行的布局非常有用，特别是在不确定控件数量或屏幕尺寸的情况...
【愚公系列】2023年10月 WPF控件专题 WrapPanel控件详解
热门推荐
时光隧道
08-08 5万+
WPF控件是Windows Presentation Foundation（WPF）中的基本用户界面元素。它们是可视化对象，可以用来创建各种用户界面。WPF控件可以分为两类：原生控件和自定义控件。原生控件是由Microsoft提供的内置控件，如Button、TextBox、Label、ComboBox等。这些控件都是WPF中常见的标准用户界面元素。自定义控件则允许开发人员使用XAML和C#等编程语言来创建个性化的用户界面元素。自定义控件可以根据需求提供更多的功能和自定义化选项，以及更好的用户体验。
WPF-布局-《一》
故里2130
05-18 4221
1.StackPanel控件，会充满空间 水平布局 <StackPanel Orientation="Vertical"> <Button Content="Button"/> <Button Content="Button"/> <Button Content="Button"/> </StackPanel> 垂直布局 <StackPan
WPF的_Expander控件
ultramand的博客
09-12 1620
Expander 控件通常由一个展开/折叠的标题（Header）和一个显示/隐藏的内容部分（Content）组成。WPF Expander 是 WPF（Windows Presentation Foundation）框架中的一个控件，用于实现可以展开和折叠内容的可折叠面板。总之，Expander 控件在 WPF 中提供了一种简单而有效的方法来实现可折叠的内容面板，可以帮助用户更好地组织和控制界面上的信息。Expander 控件还提供了一些其他属性和事件，可以进一步自定义其行为和样式，例如。
WPF GridLength折叠动画+ GridSplitter 拖拽布局
elie_yang的博客
09-16 3380
如下图所示一个布局：点击向左按钮，折叠树形导航菜单面板，拖拽左右分割滑块（WPF里叫GridSplitter）可以调整区域分割宽度. 界面样式选用了Materail DesginUI ，十分好用，外观漂亮，开发常规需求，足够使用了。 Xmal中的布局，其中有一列"menuLeft" 双向绑定了ViewModel里的MenuWidth属性, GridSplitter左右拖拽时动态改变了MenuWidth属性值； <Grid Grid.Row="2"> &
详细描述wpf常用控件，布局控件，详细描述
07-09
WPF（Windows Presentation Foundation）是一种用于创建Windows应用程序的UI框架，提供了丰富的控件和布局控件，下面是对常用控件和布局控件的详细描述： 常用控件： 1. Button（按钮）：用于触发特定操作或事件，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值