WPF 面板布局常用方法

已于 2022-04-19 20:47:36 修改
阅读量1.2k 收藏 1
点赞数
分类专栏： WPF学习笔记 文章标签： c#
于 2022-04-19 20:47:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43680751/article/details/124274769
版权

文章目录

总览

核心布局面板

名称描述
StackPanel在水平或垂直的堆栈中放置元素。这个布局容器通常用于更大、更复杂窗口中的一些小区域
WrapPanel在一系列可换行的行中放置元素。在水平方向上, WrapPanel面板从左向右放置条目,然后在随后的行中放置元素。在垂直方向上, WrapPanel面板在自上而下的列中放置元素,并使用附加的列放置剩余的条目
DockPanel根据容器的整个边界调整元素
Grid根据不可见的表格在行和列中排列元素,这是最灵活、最常用的容器之一
UniformGrid在不可见但是强制所有单元格具有相同尺寸的表中放置元素,这个布局容器不常用
Canvas使用固定坐标绝对定位元素。这个布局容器与传统 Windows窗体应用程序最相似,但没有提供锚定或停靠功能。因此,对于尺寸可变的窗口,该布局容器不是合适的选择。如果选择的话,需要另外一些工作

一、StackPanel

  1. 默认情况下，Stack Panel面板按自上而下的顺序排列元素,使每个元素的高度适合它的内容
  2. 通过设置 Orientation属性，改变排列顺序（默认为：Vertical）
<Grid>
	<StackPanel>
		<Label HorizontalAlignment="Center">A Button Stack</Label>
		<Button HorizontalAlignment="Left">Left Button</Button>
		<Button HorizontalAlignment="Right">Right Button</Button>
		<Button>Right Button</Button>
	</StackPanel>
</Grid>

执行结果：
运行结果

二、WrapPanel

  1. WrapPanel面板在可能的空间中，以一次一行或一列的方式布置控件。
  2. 通过设置 Orientation属性，改变排列顺序（默认为：Horizontal）
<Grid>
	<WrapPanel>
		<Button Width="80" Height="30" >Button-01</Button>
		<Button Width="80" Height="60" >Button-01</Button>
		<Button Width="80" Height="30" >Button-01</Button>
		<Button Width="80" Height="30" >Button-01</Button>
		<Button Width="80" Height="30" >Button-01</Button>
	</WrapPanel>
</Grid>

执行结果：
在这里插入图片描述 在这里插入图片描述

三、DockPanel

  1. DockPanel 沿着一条外边缘来拉伸所包含的控件。
  2. 例如，如果将个按钮停靠在 Dockpanel面板的顶部，该按钮会被拉伸至 Dockpane面板的整个宽度，但根据内容和 Midheight属性为其设置所需的高度。而如果将一个按钮停靠到容器左边，该按钮的高度将被拉伸以适应容器的高度，而其宽度可以根据需要自由增加。
  3. 子元素是通过Dock附加属性来确定停靠的边，可将该属性设置为Left、Right、Top 或 Bottom。放在 DockPanel面板中的每个元素都会自动捕获该属性
  4. 先设置的控件优先靠边
<Grid>
	<DockPanel>
		<Button DockPanel.Dock="Top">Top Button</Button>
		<Button DockPanel.Dock="Bottom">Bottom Button</Button>
		<Button DockPanel.Dock="Left">Left Button</Button>
		<Button DockPanel.Dock="Right">Right Button</Button>
		<Button>Remaining space</Button>
	</DockPanel>
</Grid>

执行结果：
在这里插入图片描述

四、Grid

1 基础运用

  1. Grid面板也是将窗口分割成(可使用其他面板进行管理的)更小区域的理想工具。
  2. Grid面板通过使用对象填充 Grid Column Definitions和 Grid Row Definitions集合来创建网格和行。
  3. ShowGridLines 设置是否显示分割线
<Grid ShowGridLines="True">
 <Grid.RowDefinitions>
 	<RowDefinition />
 	<RowDefinition />
 </Grid.RowDefinitions>
 <Grid.ColumnDefinitions>
 	<ColumnDefinition />
 	<ColumnDefinition />
 </Grid.ColumnDefinitions>
 <Button Grid.Column="0" Grid.Row="0">Button-01</Button>
 <Button Grid.Column="1" Grid.Row="1">Button-02</Button>
</Grid>

执行结果：
在这里插入图片描述

2 调整行和列

<ColumnDefinition Width="100"/>		    <!-- 绝对尺寸 -->
<ColumnDefinition Width="Auto"/>	    <!-- 自动尺寸-->
<ColumnDefinition Width="80*"/>		<!-- 比例尺寸（带*前面的数为比例系数）-->

<!-- 如果希望不均匀地分割剩余空间,可指定权重,权重必须放在星号之前。-->
<!-- 例如,如果有两行是按比例设置尺寸,并希望第一行的高度是第二行高度的一半,-->
<!-- 那么可以使用如下设置来分配剩余空间-->
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*"/>

3 跨单元格

Row和 Column附加属性在单元格中放置元素。还可以使用另外两个附加属性使元素跨越多个单元格,这两个附加属性是 Rowspan和 Columnspan。这两个属性使用元素将会占有的行数和列数进行设置。

<Grid ShowGridLines="True">
  <Grid.RowDefinitions>
  	<RowDefinition Height="39*"/>
  	<RowDefinition Height="40*"/>
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
  	<ColumnDefinition Width="84*"/>
  	<ColumnDefinition Width="92*"/>
  	<ColumnDefinition Width="82*"/>
  	<ColumnDefinition Width="67*"/>
  	<ColumnDefinition Width="95*"/>
  </Grid.ColumnDefinitions>
  <Button Grid.Column="0" Grid.Row="0">Button-01</Button>
  <Button Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="2" >Button-02</Button>
  <Button Grid.Column="4" Grid.Row="0" Grid.RowSpan="2">Button-03</Button>
</Grid>

执行结果：
在这里插入图片描述

4 分割线 GridSplitter

原则：

  1. GridSplitter对象必须放在Grid单元格中，可与已经存在的内容一并放到单元格中，这时需要调整边距设置，使它们不相互重叠。更好的方法是预留一列或一行专门用于放置 Gridsplitter对象，并将预留行或列的 Heigh 或 Width属性的值设置为Auto；
  2. Gridsplitter对象总是改变整行或整列的尺寸(而非改变单个单元格的尺寸)。为使GridSplitter对象的外观和行为保持一致，需要拉伸 GridSplitter 对象使其穿越整行或整列，而不是将其限制在单元格中。为此，可使用前面介绍过的 RowSpan或 ColumnSpan属性。如下例子，Gridsplitter对象的 Rowspan属性被设置为2,因此被拉伸充满整列。如果不使用该设置, GridSplitter对象会显示在顶行(放置它的行)中,即使这样,拖动分割条时也会改变整列的尺寸
  3. 最初, GridSplitter对象很小不易看见。为了使其更可用,需要为其设置最小尺寸。对于竖直分割条需要将 VerticalAlignment 属性设置为Stretch（使分割条填满区域的整个高度），并将 Width设置为固定值（如10个设备无关单位）。对于水平分割条,需要设置 HorizontalAlignment 属性来拉伸,并将 Height属性设置为固定值
  4. GridSplitter对齐方式还决定了分割条是水平的（用于改变行的尺寸）还是竖直的（用于改变列的尺寸）。对于水平分割条,需要将 VerticalAlignment 属性设置为 Center（这也是默认值），以指明拖动分割条改变上面行和下面行的尺寸。对于竖直分割条（图3-15中显示的分割条），需要将 VerticalAlignment 属性设置为 Center，以改变分割条两侧列的尺寸。
  5. 在声明 GridSplitter对象时,将 ShowsPreview属性设置为fase。因此,当把分割条从一边拖到另一边时,会立即改变列的尺寸。但是如果将ShowsPreview属性设置为true,当拖动分割条时就会看到一个灰色的阴影跟随鼠标指针,用于显示将在何处进行分割。并且直到释放了鼠标键之后列的尺寸才改变。如果 GridSplitter对象获得了焦点,也可以使用箭头键改变相应的尺寸。
<Grid ShowGridLines="False">
	<Grid.RowDefinitions>
		<RowDefinition/>
		<RowDefinition/>
	</Grid.RowDefinitions>
	<Grid.ColumnDefinitions>
		<ColumnDefinition/>
		<ColumnDefinition Width="Auto"/>
		<ColumnDefinition/>
	</Grid.ColumnDefinitions>
	<Button Grid.Column="0" Grid.Row="0" Margin="3" Content="Button-01"/>
	<Button Grid.Column="0" Grid.Row="1" Margin="3" Content="Button-02"/>
	<Button Grid.Column="2" Grid.Row="0" Margin="3" Content="Button-03"/>
	<Button Grid.Column="2" Grid.Row="1" Margin="3" Content="Button-04"/>
	<GridSplitter Grid.Column="1" Grid.Row="0" Grid.RowSpan="2" Width="3" VerticalAlignment="Stretch" HorizontalAlignment="Center" ShowsPreview="False"/>
</Grid>

执行结果：
在这里插入图片描述 在这里插入图片描述

5 共享尺度尺（待完善）

五、UniFormGrid 面板

有一种网格不遵循前面讨论的所有原则一 UniFormGrid面板。与Grid面板不同UniFormGrid面板不需要(甚至不支持)预先定义的列和行。相反,通过简单地设置Rows和Columns属性来设置其尺寸。每个单元格始终具有相同的大小,因为可用的空间被均分。最后,元素根据定义的顺序被放置到适当的单元格中。 Uniformgrid面板中没有Row和 Column附加属性,也没有空白单元格。

<Grid>
	<UniformGrid Rows="2" Columns="2">
		<Button >Button 01</Button>
		<Button >Button 02</Button>
		<Button >Button 03</Button>
		<Button >Button 04</Button>
	</UniformGrid>
</Grid>

执行结果：
在这里插入图片描述

六、Canvas

Canvas面板允许使用精确的坐标放置元素,如果设计数据驱动的富窗体和标准对话框,这并非好的选择;但如果需要构建其他些不同的内容(例如,为图形工具创建绘图表面), Canvas面板可能是个有用的工具。 Canvas面板还是最轻量级的布局容器。这是因为 Canvas面板没有包含任何复杂的布局逻辑,用以改变其子元素的首选尺寸。 Canvas面板只是在指定的位置放置其子元素,并且其子元素具有所希望的精确尺寸为在 Canvas面板中定位元素,需要设置 Canvas.Left和 Canvas.Top附加属性。 Canvas.Left属性设置元素左边和 Canvas面板左边之间的单位数, Canvas,Top属性设置子元素顶边和Canvas面板顶边之间的单位数

InspireW
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WPF中使用百分比的布局方式
08-16
Grid比重与Binding的方式达到百分比的目的
WPF教程（三十一）Grid网格跨越
刺猬的优雅
10-31 1万+
Grid默认每一个控件占据一个单元格，但是有些情况下你需要某个控件占据多行或者多列。在这种情况下，可以使用ColumnSpan和RowSpan这两个附加属性来实现。这两个属性默认的值都是1，也就是一个单元格，你可以指定大于1的数字来让控件跨越多行或者多列。 下面的例子使用了ColunmSpan属性： <Window x:Class="WpfTutorialSamples.Panels.Grid
WPF 布局控件 Grid表格
最新发布
cjh16606260986的博客
06-17 400
Grid表格布局控件，在WPF项目的界面布局中非常常用。主要是以行列进行元素控制的。
WPF之布局属性HorizontalAlignment、HorizontalContentAlignment、VertialAlignment、VerticalContentAlignment
热门推荐
就在昨天之技术点滴
08-17 4万+
WPF中调整控件相对位置的属性有很多，比较常见的属性比如：HorizontalAlignment、HorizontalContentAlignment、VertialAlignment、VerticalContentAlignment。 到底如何使用呢？以下以HorizontalAlignment和HorizontalContentAlignment为例来说明。 ---&gt;Horizont...
WPF的布局
Rose_1_bull的博客
05-17 237
布局 Grid网格： 1.RowDefinitions，ColumnDefinitions行列集合 height width 2.设置宽高（1,自己定义具体数字的宽或者高；2,比例等分设置宽高；3,auto适应属性自动调整） 3.使用方法： <Button Grid.Row="0" Grid.Column="0" ></Button> 在控件中以0开头数起 4.空间跨行跨行Grid.RowSpan和Grid.ColumnSpan 5...
XAML布局元素
yishengqianan的博客
07-27 166
在C#语言中，常用的重点布局元素有6种 分别是： 1、Grid：网格。可以自定义行和列并通过行列的数量、行高列宽来调整控件的布局。近似Html中的table。Grid和其他各个Panel比较起来，功能最多 也最为复杂。 要使用Grid，首先要向RowDefinitions和ColumnDefinitions属性中添加一定数量的RowDefinitions和 ColumnDefinitions元素，从而定义行数 和列数。 而放置在Grid面板中的控件元素都必须显示采用附加属性语法定义其 放置所在的行和列，它们
WPF中的UI布局面板
weixin_44589643的博客
07-28 512
一：StackPanel：栈式面板。可将包含的元素在水平或垂直方向排成一条线，当移 一个元素后，后面的元素会自动向前填充空缺。 使用场合： 同类元素需要紧凑排列（如制作菜单和列表）。 移除其中的元素后能够自动补缺的布局或者动画。 Orientation属性设置两种排列方式：第一个设置横排:Orientation: Horizontal 第二个设置竖排：Orientation：Vertical VerticalAlignment=“top”:设置水平靠上显示 效果： 二：Canvas：画布。内部元素可以使
WPF自定义面板
weixin_44588733的博客
05-08 417
WPF自定义面板是一种特殊但较常见的自定义控件开发子集。面板驻留一个或多个子元素，并且实现了特定的布局逻辑以恰当地安排子元素，当创建需要非标准特定布局的组合控件时，自定义面板通常很有用的 可以通过重写名称为MeasureOverride()和ArrangeOverride()方法，为这两个步骤添加自己的逻辑，这两个方法是作为WPF布局系统的一部分在FrameworkElement类中定义的。奇特的名称使用标识MeasureOverride()和ArrangeOverride()方法代替在MeasureCo
wpf常用控件
01-10
15. **面板(Panel)**：如Grid、StackPanel、DockPanel等，用于布局其他控件，实现复杂的界面设计。 16. **数据网格(DataGrid)**：用于显示和编辑大量表格数据，支持排序、分页、列自定义等功能。 17. **工具提示....
WPF中InkCanvas(墨水面板)用法
11-16
**WPF中的InkCanvas（墨水面板）是Windows Presentation Foundation (WPF)提供的一种用于创建手写和绘图应用的控件。它允许用户通过鼠标或触摸设备在屏幕上自由绘制，模仿纸张上的书写体验。这个控件是WPF框架中支持...
WPF面板导航控件PanelBar/OutlookBar
05-08
**WPF面板导航控件PanelBar/OutlookBar** 在Windows Presentation Foundation (WPF) 中，PanelBar 和 OutlookBar 是两种常用的导航控件，用于构建用户界面中的菜单或侧边栏，提供层次化的导航结构。这两种控件为...
WPF经典教程之Canvas、InkCanvas布局
10-05
- **StackPanel、WrapPanel、DockPanel布局**：这些都是WPF中的布局面板，它们有不同的排列子元素的方式，StackPanel按照垂直或水平顺序堆叠，WrapPanel会换行显示，而DockPanel则根据边缘（上、下、左、右）对齐子...
WPF中的自定义列表框布局
04-08
总之，通过自定义ItemsPanelTemplate、DataTemplate以及创建自定义面板，WPF允许开发者创建极具创新性的列表框布局。结合C#和XAML的强大功能，我们可以实现灵活多变的用户界面，提供优秀的用户体验。参考提供的...
更改WPF中UniformGrid的布局排列顺序
小书童的博客
10-10 1854
更改UniformGrid中的布局排列顺序，可以改成从下到上，或者从右到左
WPF应用程序部分控件总结
weixin_44569346的博客
08-29 271
标签文本框密码框按钮控件 1、Label 文本标签 父类 ContentControl 2、TextBox 文本框 编辑与显示 父类 TextBoxBase --Control 特殊内容控件 3、VerticalContentAlignment：垂直居中对齐方式 4、HorizontalContentAlignment：水平居中对齐方式 5、VerticalAlignment：垂直对齐方式 6、HorizontalAlignment：水平对齐方式 7、PasswordB
C#WPF常用的9种布局方式详解
qq_30725967的博客
07-16 1万+
本文介绍WPF中常用的九种布局，Grid、StackPanel、WrapPanel、DockPanel、UniformGrid、Canvas、ScrollViewer、ViewBox、Border。
WPF学习笔记03-布局Layout
qq_23506909的博客
03-02 1295
WPF
WPF基础学习笔记2-内容控件
weixin_42362797的博客
05-02 1737
继承自FrameworkElement类继承自Decorator类。
WPF基础之UI布局
yigu4011的博客
06-19 1862
知识点：知识点：如果包含的元素超过了面板空间，它只会截断多出的内容。元素的Margin属性用于使元素之间产生一定得间隔，当元素空间大于其内容的空间时，剩余空间将由HorizontalAlignment和 VerticalAlignment属性来决定如何分配。WrapPanel【环绕面板】：WrapPanel布局面板将各个控件从左至右按照行或列的顺序罗列，当长度或高度不够时就会自动调整进行换行，后续排序按照从上至下或从左至右的顺序进行。
wpf listview 横向布局
09-21
### 回答1： 你可以使用WPF ListView的ItemsPanel属性来指定ListView项的布局方式。以下是一种实现横向布局的方法： 1. 在XAML中定义ListView，并将ItemsPanel属性设置为StackPanel： ``` <ListView ItemsSource="{Binding Items}"> <ListView.ItemsPanel> <ItemsPanelTemplate> <StackPanel Orientation="Horizontal" /> </ItemsPanelTemplate> </ListView.ItemsPanel> <ListView.ItemTemplate> <DataTemplate> <TextBlock Text="{Binding}" /> </DataTemplate> </ListView.ItemTemplate> </ListView> ``` 2. 将StackPanel的Orientation属性设置为Horizontal。 这样，ListView的项将以横向布局方式呈现。你可以根据需要调整其它属性，例如间距、对齐方式等。 ### 回答2： WPF（Windows Presentation Foundation）是微软公司推出的用于创建Windows应用程序的框架。ListView是WPF中常用的控件之一，用于显示一组数据项的列表。默认情况下，ListView的布局是纵向的，即数据项按垂直方向排列。如果需要实现ListView的横向布局，可以通过以下几个步骤来实现。 首先，在XAML文件中声明一个ListView控件，并设置其Orientation属性为Horizontal，这将使ListView变为横向布局。 ```csharp <ListView Width="500" Height="200" Orientation="Horizontal"> <!-- 在此处添加数据模板和数据绑定 --> </ListView> ``` 接下来，需要为ListView指定数据模板和数据绑定，以展示列表中的数据项。 ```csharp <ListView Width="500" Height="200" Orientation="Horizontal"> <ListView.ItemTemplate> <DataTemplate> <!-- 在此处定义数据项的布局和样式 --> </DataTemplate> </ListView.ItemTemplate> </ListView> ``` 在DataTemplate中可以定义数据项的布局和样式，例如可以使用StackPanel来水平排列数据项的内容。 ```csharp <ListView Width="500" Height="200" Orientation="Horizontal"> <ListView.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <!-- 在此处添加数据项的内容 --> </StackPanel> </DataTemplate> </ListView.ItemTemplate> </ListView> ``` 最后，在代码中通过数据绑定将数据项与ListView关联起来，以实现数据的显示和更新。 综上所述，通过设置ListView的Orientation属性为Horizontal，并在DataTemplate中使用StackPanel来横向布局数据项的内容，再通过数据绑定将数据与ListView关联，即可实现WPF中ListView的横向布局。 ### 回答3： WPF中的ListView控件默认的布局方式是纵向布局，即列表项垂直排列。如果想要实现ListView的横向布局，可以通过修改ItemPanel的布局方式来实现。 首先，我们需要把ListView的ItemsPanel修改为一个横向布局的面板，比如使用WrapPanel或者UniformGrid。通过修改ListView的ItemPanel属性，可以将默认的ItemsPanel修改为横向布局的面板，如下所示： ``` <ListView> <ListView.ItemsPanel> <ItemsPanelTemplate> <WrapPanel Orientation="Horizontal"/> </ItemsPanelTemplate> </ListView.ItemsPanel> <!--其他代码--> </ListView> ``` 这样，ListView中的列表项就会横向排列了。但是需要注意的是，如果内容过多，会导致横向排列的列表项超出窗口范围，因此还需要根据实际情况设置ListView的宽度或者调整WrapPanel的宽度来适应布局。 另外，还可以通过修改ListView的ItemContainerStyle来定制列表项的样式，使其适应横向布局。比如设置列表项的最小宽度、高度、边距等，以及设置水平对齐方式等。 总之，通过修改ListView的ItemsPanel和ItemContainerStyle，可以实现ListView的横向布局，使列表项横向排列。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值