WPF 项目开发入门（二） WPF 页面布局
WPF 项目开发入门（一） 安装运行
WPF 项目开发入门（二） WPF 页面布局
WPF 项目开发入门（三）WPF 窗体与页面
WPF 项目开发入门（四） MVVM 模式 与 TreeView树组件
WPF 项目开发入门（五）ListView列表组件 与 Expander组件
WPF 项目开发入门（六）DataGrid组件
WPF 项目开发入门（七） From表单组件
WPF 项目开发入门（八）数据库驱动配置与数据库操作
WPF 项目开发入门（九）数据库连接 NHibernate使用
WPF 项目开发入门（十）DevExpress 插件+NHibernate登录
WPF 项目开发入门（十一）DevExpress 插件 Grid表格应用
布局是页面元素进行排版的重要组件，大到项目的后台UI框架，小到页面UI元素的排放组合都需要用到布局元素进行排版。
在WPF中布局分为以下几种布局方式
| 名称 | 备注 |
|---|---|
| Gird | 表格布局 |
| StackPanel | 顺序布局 |
| DockPanel | 上下左右布局 |
| WrapPanel | 折叠排序布局 |
1 Gird表格布局
Gird表格布局是行和列组合在一起布局方式。它与HTML中的table，Excel 单元格非常显示，通过设置行与列来达到对UI组件的位置进行排放。
Gird布局定义内容
- 定义Gird列。
- 定义Gird行。
- 定义其他组件在grid中的位置。
- Grid.Row 和 Grid.Column 中指定放置其他组件的位置。索引从左上角的 0 开始。
<Grid.ColumnDefinitions>----列设置
<Grid.RowDefinitions>-------行设置
<Button Grid.Row="1" Grid.Column="2"/> ----组件所在位置，Grid.Row行，Grid.Column列位置
Grid.ColumnDefinitions 列
<Grid.ColumnDefinitions><ColumnDefinition Width="200"></ColumnDefinition>----第1列 对应Grid.Column="0"<ColumnDefinition Width="*"></ColumnDefinition>------第2列 对应Grid.Column="1"
</Grid.ColumnDefinitions>
<Button Grid.Row="0" Grid.Column="0"/>
<Button Grid.Row="0" Grid.Column="1"/>
Grid. ColumnDefinitions列属性设置，定义列的固定宽度与列宽百分。
- 固定长度：值为一个确定的数字
- 自动长度：值为Auto，实际作用就是取实际控件所需的最小值
- 比例长度：
*表示占用剩余的全部宽度；两行都是*，将平分剩余宽度；一个2*，一个*，则前者占剩余全部宽度的2/3，后者占1/3
Grid.RowDefinitions 行
<Grid.RowDefinitions><RowDefinition Height="40"></RowDefinition>----第1行 对应Grid.Row="0"<RowDefinition Height="Auto"></RowDefinition>--第2行 对应Grid.Row="1"<RowDefinition Height="*"></RowDefinition>-----第4行 对应Grid.Row="3"
</Grid.RowDefinitions>
<Button Grid.Row="0" Grid.Column="0"/>
<Button Grid.Row="1" Grid.Column="0"/>
<Button Grid.Row="3" Grid.Column="0"/>
Grid. RowDefinitions行属性设置，定义行的固定宽度与列宽百分。
- 固定长度：值为一个确定的数字
- 自动长度：值为Auto，实际作用就是取实际控件所需的最小值
- 比例长度：
*表示占用剩余的全部宽度；两行都是*，将平分剩余宽度；一个2*，一个*，则前者占剩余全部宽度的2/3，后者占1/3
计算器实例
创建个计算器布局。首先，创建一个显示值的标签，然后创建计算器按钮。每个按钮的边距为 5，以确保控件周围有 5 个像素的边距。显示值的标签部分使用了像HTML中table合并单元格 ColumnSpan 一样合并第一行的所有列。
xaml代码部分
<Grid><Grid.ColumnDefinitions><ColumnDefinition Width="*"/>-----------列1设置<ColumnDefinition Width="*"/>-----------列2设置<ColumnDefinition Width="*"/>-----------列3设置<ColumnDefinition Width="*"/>-----------列4设置</Grid.ColumnDefinitions><Grid.RowDefinitions><RowDefinition Height="2*"/>-----------行1设置<RowDefinition Height="*"/>------------行2设置<RowDefinition Height="*"/><RowDefinition Height="*"/><RowDefinition Height="*"/><RowDefinition Height="*"/></Grid.RowDefinitions><Label Content="0"HorizontalAlignment="Right"VerticalAlignment="Bottom"FontSize="60"Grid.ColumnSpan="4"/><Button Content="AC"Margin="5"Grid.Column="0"Grid.Row="1"/><Button Content="+/-"Margin="5"Grid.Row="1"Grid.Column="1"/><Button Content="%"Margin="5"Grid.Row="1"Grid.Column="2"/><Button Content="/"Margin="5"Grid.Row="1"Grid.Column="3"/><Button Content="7"Margin="5"Grid.Row="2"Grid.Column="0"/><Button Content="8"Margin="5"Grid.Row="2"Grid.Column="1"/><Button Content="9"Margin="5"Grid.Row="2"Grid.Column="2"/><Button Content="*"Margin="5"Grid.Row="2"Grid.Column="3"/><Button Content="4"Margin="5"Grid.Row="3"Grid.Column="0"/><Button Content="5"Margin="5"Grid.Row="3"Grid.Column="1"/><Button Content="6"Margin="5"Grid.Row="3"Grid.Column="2"/><Button Content="-"Margin="5"Grid.Row="3"Grid.Column="3"/><Button Content="1"Margin="5"Grid.Row="4"Grid.Column="0"/><Button Content="2"Margin="5"Grid.Row="4"Grid.Column="1"/><Button Content="3"Margin="5"Grid.Row="4"Grid.Column="2"/><Button Content="+"Margin="5"Grid.Row="4"Grid.Column="3"/><Button Content="0"Margin="5"Grid.Row="5"Grid.Column="0"Grid.ColumnSpan="2"/><Button Content="."Margin="5"Grid.Row="5"Grid.Column="2"/><Button Content="="Margin="5"Grid.Row="5"Grid.Column="3"/></Grid>
其他grid布局例子
<Window x:Class="WpfApp1.布局.grid"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:WpfApp1.布局"mc:Ignorable="d" d:DesignHeight="450" d:DesignWidth="800"Title="grid"><Grid><Grid.RowDefinitions><RowDefinition Height="40"></RowDefinition>-----定义位置高度<RowDefinition Height="Auto"></RowDefinition><RowDefinition Height="2*"></RowDefinition><RowDefinition Height="*"></RowDefinition> </Grid.RowDefinitions> <Button Grid.Row="0" Content="Button 1"></Button>//Grid.Row指位置高度 <Button Grid.Row="1" Content="Button 2"></Button> <Button Grid.Row="2" Content="Button 3"></Button><Button Grid.Row="3" Content="Button 4"></Button></Grid>
</Window>
示例图
2 StackPanel水平布局
StackPanel 是一个垂直或水平排列控件的控件。使用 Orientation 属性来指定是垂直对齐还是水平对齐。
- Horizontal：水平方向。
- Vertical ：垂直方向。
StackPanel 使用时样子
<StackPanel Orientation=" Horizontal ">------水平方向<Label Height="30"/><TextBox Height="30"/><TextBox Height="30"/><Button Height="30"/>
</StackPanel>
StackPanel 实例代码
<Grid><StackPanel>-----------------------------默认垂直布局<Label Height="30"/><TextBox Height="30"/><TextBox Height="30"/><Button Height="30"/><StackPanel Orientation="Horizontal" ----设置水平布局Height="100"Margin="10"><Label Height="30" Width="100"/><TextBox Height="30" Width="100"/><TextBox Height="30" Width="100"/><Button Height="30" Width="100"/></StackPanel></StackPanel>
</Grid>
效果图
垂直与水平对齐
通过指定 VerticalAlignment 属性来指定控件的对齐方式。 StackPanel 的顶部选择 Top，底部选择 Bottom，中间选择 Center。您可以通过指定 HorizontalAlignment 属性来指定控件的对齐位置。从 StackPanel 的左边（Left）开始，从右边开始（Right），中间对齐（Center）。如果选择（Stretch），它将整体扩展。
- VerticalAlignment ：Top，Bottom，Center，Stretch
- HorizontalAlignment ：Left，Right，Center，Stretch
Margin 属性
您可以通过设置Margin属性来设置边距。通过指定 Margin = ”10,20,30,40″，可以按左、上、右、下的顺序设置边距。
<StackPanel VerticalAlignment="Center" --------------对齐方式HorizontalAlignment="Stretch"----对齐位置Margin="10,20,30,40">------------边距<Label Content="文字内容"/><TextBox Text="0000"/><Button Content="请开始查询"/>
</StackPanel>
效果图
3DockPanel 容器布局
DockPanel 布局是上下左右水平和垂直排序组件。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZWHNUuXR-1656036353975)(D:\build\Typora\wpf\Snipaste_2021-11-30_23-59-22.png)]
在DockPanel布局中中其他组件指定 DockPanel.Dock 并决定将其向上、向下、向左或向右的位置。
- Top 头部
- Left 左边
- Right 右边
- Bottom 下边LastChildFill
LastChildFill 元素
LastChildFill 元素来设置框架中的最后一个元素是否填充剩余空间。默认值为 True，如果不需要填充剩余空间，则将其显式设置为 False
<Grid><Grid.ColumnDefinitions><ColumnDefinition/><ColumnDefinition/></Grid.ColumnDefinitions><DockPanel LastChildFill="False"><Button DockPanel.Dock="Top" Content="Top" FontSize="20"/><Button DockPanel.Dock="Left" Content="Left" FontSize="20"/><Button DockPanel.Dock="Right" Content="Right" FontSize="20"/><Button DockPanel.Dock="Bottom" Content="Bottom" FontSize="20"/></DockPanel><DockPanel Grid.Column="1" LastChildFill="True">--------底部Bottom组件自动充实<Button DockPanel.Dock="Top" Content="Top" FontSize="20"/><Button DockPanel.Dock="Left" Content="Left" FontSize="20"/><Button DockPanel.Dock="Right" Content="Right" FontSize="20"/><Button DockPanel.Dock="Bottom" Content="Bottom" FontSize="20"/></DockPanel>
</Grid>
4 WrapPanel
WrapPanel 是一个将控件按纵向或横向排列。在排列控件时，如果控件在区域排列不下，该组件的特点是在向后折叠的同时排列控件。
WrapPanel 指定控件的放置方向以及分配给一个控件的垂直和水平宽度。
Orientation 方向属性
指定 Vertical 以垂直排列控件，指定 Horizontal 以水平排列它们。
使用 ItemHeight 指定一个控件的垂直宽度，使用 ItemWidth 指定水平宽度。
横排列例子
<WrapPanel Orientation="Horizontal"ItemHeight="80"ItemWidth="80"><Button Content="AAA" FontSize="20"/><Button Content="AAA" FontSize="20"/><Button Content="AAA" FontSize="20"/><Button Content="AAA" FontSize="20"/><Button Content="AAA" FontSize="20"/><Button Content="AAA" FontSize="20"/>
</WrapPanel>
水平排列
<WrapPanel Orientation="Vertical"ItemHeight="80"ItemWidth="80"><Button Content="AAA" FontSize="20"/><Button Content="AAA" FontSize="20"/><Button Content="AAA" FontSize="20"/><Button Content="AAA" FontSize="20"/><Button Content="AAA" FontSize="20"/>
</WrapPanel>
唯一的区别是Orientation属性设置。
实例代码
<Grid><Grid.ColumnDefinitions><ColumnDefinition/><ColumnDefinition/></Grid.ColumnDefinitions><WrapPanel Orientation="Horizontal"ItemHeight="80"ItemWidth="80"><Button Content="AAA" FontSize="20"/><Button Content="AAA" FontSize="20"/><Button Content="AAA" FontSize="20"/><Button Content="AAA" FontSize="20"/><Button Content="AAA" FontSize="20"/><Button Content="AAA" FontSize="20"/></WrapPanel><WrapPanel Grid.Column = "1"Orientation="Vertical"ItemHeight="80"ItemWidth="80"><Button Content="AAA" FontSize="20"/><Button Content="AAA" FontSize="20"/><Button Content="AAA" FontSize="20"/><Button Content="AAA" FontSize="20"/><Button Content="AAA" FontSize="20"/></WrapPanel>
</Grid>
效果图
5 项目后台布局
在实际的项目开发中制作一个符合管理后台要求的UI设计,需要将WPF中多种布局组件进行组合使用。
1 使用 DockPanel 布局将页面分成3个操作部分。
<DockPanel>
<Menu DockPanel.Dock="Top"></Menu>
<Grid DockPanel.Dock="Left"></Grid>
<Grid DockPanel.Dock="Right"></Grid>
</DockPanel>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ztnYcidU-1656036353976)(D:\build\Typora\wpf\Snipaste_2021-11-30_17-23-21.png)]
2 Left部分组件，使用Grid布局创建高于宽
<Grid Grid.IsSharedSizeScope="True" DockPanel.Dock="Left"><Grid x:Name="layer0Grid" Panel.ZIndex="0"><Grid.RowDefinitions><RowDefinition Height="*"></RowDefinition>------------设置Grid布局的高</Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition Width="300"></ColumnDefinition>------设置Grid布局的宽300</Grid.ColumnDefinitions><Border Background="red"></Border></Grid>
</Grid>
3 Right部分组件，使用Grid布局创建高于宽
<Grid Grid.IsSharedSizeScope="True" DockPanel.Dock="Right"><Grid x:Name="conetext" Panel.ZIndex="0"><Grid.RowDefinitions><RowDefinition Height="*"></RowDefinition>-----------设置Grid布局的高自适应</Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition Width="*"></ColumnDefinition>------设置Grid布局的宽自适应</Grid.ColumnDefinitions><Border Background="Blue"></Border></Grid></Grid>
</Grid>
4 整体布局代码
<Window x:Class="WpfApp1.布局.main"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:WpfApp1.布局"mc:Ignorable="d"Title="main" Height="450" Width="1200"><DockPanel><Menu DockPanel.Dock="Top"> ----------------top部分菜单组件<MenuItem Header="文件" /><MenuItem Header="编辑" /><MenuItem Header="视图" /><MenuItem Header="项目" /><MenuItem Header="帮助" /></Menu><Grid Grid.IsSharedSizeScope="True" DockPanel.Dock="Left"><Grid x:Name="layer0Grid" Panel.ZIndex="0"><Grid.RowDefinitions><RowDefinition Height="*"></RowDefinition></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition Width="300"></ColumnDefinition></Grid.ColumnDefinitions></Grid><Border Background="red"></Border>------------加入菜单树与手风琴组件</Grid><Grid Grid.IsSharedSizeScope="True" DockPanel.Dock="Right"><Grid x:Name="conetext" Panel.ZIndex="0"><Grid.RowDefinitions><RowDefinition Height="*"></RowDefinition></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition Width="*"></ColumnDefinition></Grid.ColumnDefinitions><Border Background="Blue"></Border>-------内容组件部分</Grid></Grid></DockPanel>
</Window>
效果图
WPF 项目开发入门（二） WPF 页面布局相关推荐
- WPF 项目开发入门（三）WPF 窗体与页面
WPF 项目开发入门(一) 安装运行 WPF 项目开发入门(二) WPF 页面布局 WPF 项目开发入门(三)WPF 窗体与页面 WPF 项目开发入门(四) MVVM 模式 与 TreeView树组件 ...
- WPF 项目开发入门（一） 安装运行
WPF 项目开发入门(一) 安装运行 WPF 项目开发入门(二) WPF 页面布局 WPF 项目开发入门(三)WPF 窗体与页面 WPF 项目开发入门(四) MVVM 模式 与 TreeView树组件 ...
- WPF 项目开发入门（十）DevExpress 插件+NHibernate 登录实现
WPF 项目开发入门(一) 安装运行 WPF 项目开发入门(二) WPF 页面布局 WPF 项目开发入门(三)WPF 窗体与页面 WPF 项目开发入门(四) MVVM 模式 与 TreeView树组件 ...
- WPF 项目开发入门（五）ListView列表组件 与 Expander组件
WPF 项目开发入门(一) 安装运行 WPF 项目开发入门(二) WPF 页面布局 WPF 项目开发入门(三)WPF 窗体与页面 WPF 项目开发入门(四) MVVM 模式 与 TreeView树组件 ...
- C#WPF 项目开发（一）（火车订票系统）
C#WPF 项目开发(一)(火车订票系统) 一.架构模式 I.了解架构模式 1.如何设计大型企业级的系统,在开始主要的代码开发之前,我们必须选择一种 合适的体系架构. (1).架构模式是对给定上下文的 ...
- WPF PRISM开发入门一( 初始化PRISM WPF程序)
原文:WPF PRISM开发入门一( 初始化PRISM WPF程序) 这篇博客将介绍在WPF项目中引入PRISM框架进行开发的一些基础知识.目前最新的PRISM的版本是Prism 6.1.0,可以在G ...
- WPF编程基础入门 ——— 第三章 布局（五）布局面板WrapPanel
WPF布局--布局面板WrapPanel WPF--WrapPanel布局控件 WrapPanel实例--十个按钮 WPF--WrapPanel布局控件 WrapPanel(自动折行面板),允许任意多 ...
- （项目实战）基于QT嵌入式ARM数据采集卡上位机（二）——页面布局
(项目实战)基于QT嵌入式ARM数据采集卡上位机(二)--页面布局 上一篇文章<基于 QT 嵌入式ARM数据采集卡上位机(一)> 下一篇文章<(项目实战)基于QT嵌入式ARM数据采集 ...
- python开发web项目_Django2：Web项目开发入门笔记（20）
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 这一篇教程,我们一起来了解如何在CentOS系统中将Django2的Web项目部署到Nginx服务器. CentOS系统虽然和Ubuntu系统都是Linu ...
最新文章
- MySQL查询所有字段
- 大疆aeb连拍_前后双屏幕：大疆OSMO Action行动相机规格与谍照曝光
- 经典FOXMAIL报错 winsock error 11004
- 【汇编语言】8086汇编，快速搞定各种寻址方式：立即数寻址 / 寄存器寻址 / 存储器寻址
- ***redis linux 命令使用总结
- python画图指定起点_python3绘图示例6-1（基于matplotlib，绘图流程介绍及设置等）...
- FFmpeg源代码简单分析：结构体成员管理系统-AVOption
- L1-046 整除光棍 (20 分)—团体程序设计天梯赛
- python爬虫qq音乐_Python爬虫-QQ音乐无损音乐地址解析
- 域策略（4）——设置统一锁屏壁纸（此策略仅适用于企业版、教育版和 Server SKU版）
- 2017-9-13 NOIP模拟赛[xxy]
- 雷迪9000使用说明_标准版DM雷迪操作及维护手册 精品
- cost的导函数_几种常见函数的导数
- 搭建博客、自己的小窝？快来看看这些开源静态网站生成器
- 东北大学计算机实验班,东北大学理科试验班
- 游戏建模一般使用什么软件？
- 神经网络中“端到端”思想
- 因果推理(causal inference)中的ATT和ATE有什么区别？
- 417关于ads-b与雷达数据融合
- RAID之全程图解 手把手教你做RAID磁盘阵列(硬RAID)