【WPF】桌面程序开发之xaml页面基础布局方式详解

使用Visual Studio开发工具，我们可以编写在Windows系统上运行的桌面应用程序。其中，WPF（Windows Presentation Foundation）项目是一种常见的选择。然而，对于初学者来说，WPF项目中xaml页面的布局设计可能是一个难点。下面，将简要介绍WPF项目中xaml页面的基础布局知识。

文章目录

  • 页面布局
  • 网格布局
    • Grid
  • 层叠布局
    • Grid
  • 内联布局
    • WrapPanel
  • 块布局
    • StackPanel
  • 弹性布局
    • DockPanel
  • 一些控件
    • Border

如果还不知道怎么创建WPF项目， 可以看以下文章，回顾一下再来

Windows系统桌面应用程序编程开发新手入门-打造自己的小工具

学过web前端页面设计的同学应该很熟悉，等看完这篇文章，相信你很快就会掌握了。

页面布局

首先看看页面布局文件，带后缀名xaml的是页面布局文件，内容如下

<Window x:Class="WpfApp4.MainWindow"...xmlns:local="clr-namespace:WpfApp4"mc:Ignorable="d"Title="MainWindow" Height="450" Width="800"><Grid><!-- 这里开始添加控件布局 --></Grid>
</Window>

其中xmlns:local="clr-namespace:WpfApp4"是指定本地可用控件local的命令空间

接下来讲一讲通常用到的布局容器控件，这些控件下是可以有多个子控件的

网格布局

从上面的页面可以看到，常用的是Grid控件，如何使用它呢

Grid

这个控件<Grid>是网格面板，可以将所有子控件按行和列数进行布局。

往里面添加的一些控件，默认是放在第一个格子位置上，通过设置它的列数和行数来确定子控件的位置，内容如下

<Grid><Grid.RowDefinitions><RowDefinition></RowDefinition></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition></ColumnDefinition><ColumnDefinition></ColumnDefinition><ColumnDefinition></ColumnDefinition><ColumnDefinition></ColumnDefinition></Grid.ColumnDefinitions><Button Content="Hello zs1028" Grid.Row="0" Grid.Column="0" /><Button Content="Hello zs1028" Grid.Column="1" /><Button Content="Hello zs1028" Grid.Column="2" /><Button Content="Hello zs1028" Grid.Column="3" /><Button Content="Hello zs1028" Grid.Column="4" /><Button Content="Hello zs1028" Grid.Column="5" /></Grid>

其中 Grid.Row="0" Grid.Column="0"是决定网格位置的，可不设置，因为默认均是0

显示效果如下图
在这里插入图片描述

若要限制网格为2行，需要在</RowDefinition>标签后面再加一行，

<RowDefinition></RowDefinition>

继续添加子控件，设置Grid.Row="1" 即可放置在第二行

若要进一步限制其中的列宽，就设置一个属性，内容如下

<ColumnDefinition Width="100"></ColumnDefinition>

层叠布局

在网格布局中，所有子控件不设置行列数就是默认都在第一个网格，是可以层叠存放的，

Grid

用网格布局就行，它可以实现层叠布局

<Grid><Button Content="No.1 zs1028" HorizontalAlignment="Center" VerticalAlignment="Center" /><Button Content="No.2 zs1028" HorizontalAlignment="Center" VerticalAlignment="Top" /><Button Content="No.3 zs1028" HorizontalAlignment="Center" VerticalAlignment="Bottom" /><Button Content="No.4 zs1028" HorizontalAlignment="Left" VerticalAlignment="Center" /><Button Content="No.5 zs1028" HorizontalAlignment="Right" VerticalAlignment="Center" /><Button Content="No.6 zs1028" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>

显示效果如下图
在这里插入图片描述
避免子控件被上下层控件覆盖至看不见，需要设置属性：

通过其HorizontalAlignment和VerticalAlignment属性来控制子控件如何选择上下左右居中放置，
还有个选择值为Stretch，不常用，它表示往水平或者垂直方向填充；

内联布局

也是在静态布局中的说法，所有子控件都是内联控件，要设置宽高，

若不设置的子控件会由系统默认自动调整最小宽高

WrapPanel

这个控件WrapPanel是自动换行面板，可以将所有子控件按顺序排列，从左到右，当空间宽度不足存放时，剩下的子控件才会自动换行放置在下面。

<WrapPanel><Button Content="Hello zs1028" /><Button Content="Hello zs1028" /><Button Content="Hello zs1028" /><Button Content="Hello zs1028" /><Button Content="Hello zs1028" /><Button Content="Hello zs1028" />
</WrapPanel>

显示效果如下图
在这里插入图片描述

块布局

也是在静态布局中的说法，所有子控件都是块控件，占用整行或者整列，

StackPanel

这个控件</StackPanel>是堆栈面板，可以将控件按顺序垂直或水平排列, 是一种常用来布局的面板，

它可以在单个方向（水平或垂直）上排列其子元素，

设置属性Orientation值有：

  • Horizontal 水平
  • Vertical 垂直

往里面添加的一些控件是堆起来放的，内容如下

<StackPanel Background="Gray"><Button Content="Hello zs1028" /><Button Content="Hello zs1028" /><Button Content="Hello zs1028" /><Button Content="Hello zs1028" /><Button Content="Hello zs1028" /><Button Content="Hello zs1028" />
</StackPanel>

可设置属性Margin=”10,5“的边距来调整控件距离父级控件和相邻控件的位置

默认占整行，显示效果如下图
在这里插入图片描述

将属性改成Orientation="Horizontal"，会占整列，显示效果如下
在这里插入图片描述

这里与之前的控件WrapPanel不同的是，它是不会自动换行，超出的部分会被遮挡

弹性布局

DockPanel

这个控件<DockPanel>是停靠用的面板，可以将所有子控件停靠在面板的四个边缘,

需要决定布局方向，通过属性DockPanel.Dock可设置子控件在上下左右方向布局，

属性DockPanel.Dock决定子控件的布局位置，其值有

  • Top
  • Left
  • Right
  • Bottom

如DockPanel.Dock="Top" 决定布局位置在上边，内容如下

<DockPanel Margin="0,0,0,0"><DockPanel DockPanel.Dock="Top"><TextBlock Text="Hello zs1028" /></DockPanel><StackPanel Background="Gray"><Label Content="填充区域" /></StackPanel>
</DockPanel>

如果第一个控件设置了Top或者Buttom，父控件会将所有子控件按照上下（垂直）方向布局；
如果设置了Left或者Right，那就是按照左右（水平）方向布局；

显示效果如下
在这里插入图片描述

最后一个控件大小是不受控制的，因为这会填充剩余空间

如果不想被用来填充，就设置父控件LastChildFill="False"，内容如下

<DockPanel Margin="0,0,0,0" LastChildFill="False"><DockPanel DockPanel.Dock="Top"><TextBlock Text="Hello zs1028" /></DockPanel><StackPanel Background="Gray"><Label Content="填充区域" /></StackPanel>
</DockPanel>

显示效果图如下
在这里插入图片描述

可发现，如果布局方向是垂直的，它只给填充了高度

果然填充的都是最后一个控件，

那如果要填充第一个控件，应该怎么办呢，内容如下

<DockPanel Margin="0,0,0,0"><DockPanel DockPanel.Dock="Bottom"><TextBlock Text="Hello zs1028" /></DockPanel><StackPanel Background="Gray"><Label Content="填充区域" /></StackPanel>
</DockPanel>

效果图如下
在这里插入图片描述

没错吧，看布局方向，只要设置DockPanel.Dock="Bottom"，它就会放到下边，

布局规律不变，最后的子控件，可在父控件里的最上边填充

一些控件

还有一些控件，都只能有一个子控件，多个子控件它是会报错误的，要注意区分，

Border

这个控件，可以给子控件添加边框的效果，

修改边框控件的属性，内容如下

<Grid Margin="0,0,0,0"><Border Width="100" Height="50" BorderThickness="2" BorderBrush="Blue" CornerRadius="10"><TextBlock Text="Hello zs1028" /></Border>
</Grid>

边框的属性如下：

  • BorderThickness=“2” 宽度
  • BorderBrush=“Blue” 颜色
  • CornerRadius=“10”` 圆角

还可以设置边框的属性Padding="10"，添加内边距

就写到这里吧，其它控件不是很常用，这里就不多讲，如果有需要，请查阅官网文档XAML布局自行研究。
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

EtherCAT转Profinet网关配置说明第三讲：博图配置

EtherCAT转Profinet网关配置说明第三讲：博图配置

EtherCAT协议转Profinet协议网关模块&#xff08;XD-ECPNS20&#xff09;是实现EtherCAT协议和Profinet协议之间无缝通讯的重要设备。使EtherCAT协议和Profinet协议能够相互转换&#xff0c;进行工控自动化里的互连和传送数据。 EtherCAT作为一种高性能实时以太网通信协议&…
阅读更多...
【讲解下iOS语言基础】

【讲解下iOS语言基础】

&#x1f308;个人主页: 程序员不想敲代码啊 &#x1f3c6;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f44d;点赞⭐评论⭐收藏 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共…
阅读更多...
【Linux详解】进程等待 | 非阻塞轮询

【Linux详解】进程等待 | 非阻塞轮询

引入&#xff1a; 为什么&#xff1f;是什么&#xff1f;怎么办 是什么&#xff1f; 进程等待是指父进程暂停自己的执行&#xff0c;直到某个特定的子进程结束或发生某些特定的事件。 为什么&#xff1f; 僵尸进程刀枪不入&#xff0c;不可被杀死&#xff0c;存在内存泄露…
阅读更多...
Linux_实现简易日志系统

Linux_实现简易日志系统

目录 1、认识可变参数 2、解析可变参数 3、打印可变参数 3.1 va_list 3.2 va_start 3.3 va_arg 3.4 va_end 3.5 小结 4、实现日志 4.1 日志左半部分 4.2 日志右半部分 4.3 日志的存档归类 结语 前言&#xff1a; 在Linux下实现一个日志系统&#xff0c;该日…
阅读更多...
ffmpeg图片视频编辑器工具的安装与使用

ffmpeg图片视频编辑器工具的安装与使用

title: ffmpeg图片视频编辑器工具的安装与使用 tags: [ffmpeg, 图片, 音频, 视频, 工具, 流媒体] categories: [工具, ffmpeg] FFmpeg是一个开源的命令行工具&#xff0c;广泛用于处理视频和音频文件&#xff0c;包括转换格式、剪辑、混流、解码、编码等。以下是一些基本的FFmp…
阅读更多...
java项目总结6

java项目总结6

目录 1.双列集合 2.map的三种遍历方式&#xff1a; 1.键找值 2.键值对 3.lambda遍历map 3.HashMap 例子&#xff1a;统计字符出现次数 4.LinkedHashMap 5.TreeMap 6.可变参数 7.Collections: 1.双列集合 双列集合特点&#xff1a; 定义Map<String&#xff0c;St…
阅读更多...
Linux中的管道符‘|‘以及SQL(DQL,DCL)

Linux中的管道符‘|‘以及SQL(DQL,DCL)

ls 指令 语法&#xff1a; ls [选项][目录或文件] 功能&#xff1a; 对于目录&#xff0c;该命令列出该目录下的所有子目录与文件。对于文件&#xff0c;将列出文件名以及其他信息。 常用选项&#xff1a; -a 列出目录下的所有文件&#xff0c;包括以 . 开头的隐含文件。 -…
阅读更多...
自注意力机制和多头注意力机制区别

自注意力机制和多头注意力机制区别

Ref&#xff1a;小白看得懂的 Transformer (图解) Ref&#xff1a;一文彻底搞懂 Transformer&#xff08;图解手撕&#xff09; 多头注意力机制&#xff08;Multi-Head Attention&#xff09;和自注意力机制&#xff08;Self-Attention&#xff09;是现代深度学习模型&#x…
阅读更多...
昇思25天学习打卡营第19天|Pix2Pix实现图像转换

昇思25天学习打卡营第19天|Pix2Pix实现图像转换

1. 学习内容复盘 Pix2Pix概述 Pix2Pix是基于条件生成对抗网络&#xff08;cGAN, Condition Generative Adversarial Networks &#xff09;实现的一种深度学习图像转换模型&#xff0c;该模型是由Phillip Isola等作者在2017年CVPR上提出的&#xff0c;可以实现语义/标签到真实…
阅读更多...
点胶系统实战1-项目介绍

点胶系统实战1-项目介绍

准备实战开发如下图的多轴点胶系统实战课程&#xff0c;内容设计界面开发、运动板块开发、任务管理、点胶的控制等。我们将和进入这个领域的初学者门一起进步。 有感兴趣的小伙伴&#xff0c;可以关注点赞&#xff0c;或评论区反馈你们的重点关注的内容&#xff0c;那些部分我…
阅读更多...
Postman使用指南①网页版使用

Postman使用指南①网页版使用

postman官网地址&#xff1a;Postman API Platform 进入后点击右上角免费注册&#xff0c;注册后登录 登录之后即可在网页使用&#xff0c;无需下载
阅读更多...
线上问题---反思与回顾

线上问题---反思与回顾

线上问题一&#xff1a;麦哲伦2.0 人群配置不生效 发现背景&#xff1a;产品发现三层模型部分计划个别测试计划圈选人群特征与数仓统计数据的人群不一致&#xff0c;向值班人员反馈 根因定位&#xff1a; &#xff08;1&#xff09;用户配置三层模型计划时&#xff0c;配置单…
阅读更多...
RNN 交叉熵

RNN 交叉熵

RNN善于处理时序 序列数据 简单RNN 展开就是 LSTM 遗忘门f_t决定上期记忆保留多少 隐藏层 在神经网络中&#xff0c;隐藏层指的是除了输入层和输出层之外的层&#xff0c;它们的输出不会直接用于网络的最终输出&#xff0c;而是作为中间步骤用于提取和转换数据。因此&#x…
阅读更多...
【网络安全】实验五（身份隐藏与ARP欺骗）

【网络安全】实验五（身份隐藏与ARP欺骗）

一、本次实验的实验目的 &#xff08;1&#xff09;了解网络攻击中常用的身份隐藏技术&#xff0c;掌握代理服务器的配置及使用方法 &#xff08;2&#xff09;通过实现ARP欺骗攻击&#xff0c;了解黑客利用协议缺陷进行网络攻击的一般方法 二、搭配环境 打开三台虚拟机&#…
阅读更多...
SQL Server特性

SQL Server特性

一、创建表 在sql server中使用create table来创建新表。 create table Customers( id int primary key identity(1,1), name varchar(5) ) 该表名为Customers其中包含了2个字段&#xff0c;分别为id&#xff08;主键&#xff09;以及name。 1、数据类型 整数类型&#xff…
阅读更多...
Towards Accurate and Robust Architectures via Neural Architecture Search

Towards Accurate and Robust Architectures via Neural Architecture Search

基于网络架构搜索的准确性与鲁棒性结构研究 论文链接&#xff1a;https://arxiv.org/abs/2405.05502 项目链接&#xff1a;未开源 Abstract 为了保护深度神经网络免受对抗性攻击&#xff0c;对抗性训练因其有效性而受到越来越多的关注。然而&#xff0c;对抗训练的准确性和鲁…
阅读更多...
扩散模型笔记

扩散模型笔记

长参数“T”决定了生成全噪声图像所需的步长。在本文中&#xff0c;该参数被设置为1000&#xff0c;这可能显得很大。我们真的需要为数据集中的每个原始图像创建1000个噪声图像吗?马尔可夫链方面被证明有助于解决这个问题。由于我们只需要上一步的图像来预测下一步&#xff0c…
阅读更多...
vue2 webpack使用optimization.splitChunks分包，实现按需引入，进行首屏加载优化

vue2 webpack使用optimization.splitChunks分包，实现按需引入，进行首屏加载优化

optimization.splitChunks的具体功能和配置信息可以去网上自行查阅。 这边简单讲一下他的使用场景、作用、如何使用&#xff1a; 1、没用使用splitChunks进行分包之前&#xff0c;所有模块都揉在一个文件里&#xff0c;那么当这个文件足够大、网速又一般的时候&#xff0c;首…
阅读更多...
【C++】cout.self()函数

【C++】cout.self()函数

&#x1f4e2;博客主页&#xff1a;https://blog.csdn.net/2301_779549673 &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01; &#x1f4e2;本文作为 JohnKi 学习笔记&#xff0c;借鉴了部分大佬案例 &#x1f4e2;未来很长&#…
阅读更多...
工地/矿区/电力/工厂/环卫视频智能安全监控反光衣AI检测算法的原理及场景应用

工地/矿区/电力/工厂/环卫视频智能安全监控反光衣AI检测算法的原理及场景应用

一、引言 随着科技的快速发展&#xff0c;特别是在智能交通和安全生产领域&#xff0c;对于夜间或弱光环境下的人员识别和安全监控需求日益凸显。反光衣作为一种重要的安全装备&#xff0c;被广泛应用于道路施工、工地作业、夜间巡逻、安全生产等场景&#xff0c;旨在提高人员的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023