WPF2022终结版系列课程笔记 1 WPF 基本布局

embedded/2024/10/19 0:21:57/

本笔记为B站
微软系列技术教程 WPF项目实战合集(2022终结版) 项目记录

WPF 基本布局

WPF布局原则

一个窗口中只能包含一个元素
不应显示设置元素尺寸
不应使用坐标设置元素的位置
可以嵌套布局容器

WPF布局容器

StackPanel: 水平或垂直排列元素、Orientation属性分别: Horizontal / Vertical

WrapPanel : 水平或垂直排列元素、针对剩余空间不足会进行换行或换列进行排列

DockPanel : 根据容器的边界、元素进行Dock.Top、Left、Right、Bottom设置

Grid : 类似table表格、可灵活设置行列并放置控件元素、比较常用

UniformGrid : 指定行和列的数量, 均分有限的容器空间

Canvas : 使用固定的坐标设置元素的位置、不具备锚定停靠等功能。

Grid

学过web的应该知道table表格, 而Grid与其类似, Grid具备分割空间的能力。
RowDefinitions / ColumnDefinitions 用于给Grid分配行与列。
ColumnSpan / RowSpan 则用于设置空间元素的 跨列与阔行。

wpf"><Window x:Class="WpfApp1.MainWindow"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="MainWindow" Height="450" Width="800"><Grid><Grid.RowDefinitions><RowDefinition/><RowDefinition/></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition/><ColumnDefinition/></Grid.ColumnDefinitions><!--默认都是0，0开始--><Border Background="red"/><Border Grid.Row="1" Background="Yellow"/><Border Grid.Column="1" Background="Blue"/><Border Grid.Row="1" Grid.Column="1" Background="Green"/></Grid>
</Window>

此时页面被平均分为四个
在这里插入图片描述

自适应

若设置为自适应

<Grid><Grid.RowDefinitions><RowDefinition Height="auto"/><RowDefinition/></Grid.RowDefinitions>

因为第一行没有任何元素和高度，整个元素 就被隐藏了
在这里插入图片描述

添加一个按钮定义宽高
以行内，最高元素高度为标准，来定义高度

<Grid><Grid.RowDefinitions><RowDefinition Height="auto"/><RowDefinition/></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition/><ColumnDefinition/></Grid.ColumnDefinitions><Button Width="100" Height="100"/><!--默认都是0，0开始--><Border Background="red"/><Border Grid.Row="1" Background="Yellow"/><Border Grid.Column="1" Background="Blue"/><Border Grid.Row="1" Grid.Column="1" Background="Green"/>
</Grid>

在这里插入图片描述

绝对尺寸
<Grid.RowDefinitions><RowDefinition Height="100"/><RowDefinition/>
</Grid.RowDefinitions>
比例

2* 代表第一行高度是第二行得两倍

<Grid.RowDefinitions><RowDefinition Height="2*"/><RowDefinition/>
</Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition/><ColumnDefinition/>
</Grid.ColumnDefinitions>

在这里插入图片描述

元素跨行跨列

默认情况下，元素占一行一列
在这里插入图片描述

让他占据两列得空间

<Grid><Grid.RowDefinitions><RowDefinition/><RowDefinition/></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition/><ColumnDefinition/></Grid.ColumnDefinitions><Border Background="red" Grid.ColumnSpan="2"/>
</Grid>

在这里插入图片描述

两行

<Border Background="red" Grid.ColumnSpan="2"Grid.RowSpan="2"/>

在这里插入图片描述

StackPanel

StackPanel主要用于垂直或水平排列元素、在容器的可用尺寸内放置有限个元素，
元素的尺寸总和(长/高)不允许超过StackPanel的尺寸, 否则超出的部分不可见。

默认的排列方式，是从上往下

<Grid><Grid.RowDefinitions><RowDefinition/><RowDefinition/></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition/><ColumnDefinition/></Grid.ColumnDefinitions><StackPanel><Button Width="100" Height="40"/><Button Width="100" Height="40"/><Button Width="100" Height="40"/><Button Width="100" Height="40"/><Button Width="100" Height="40"/></StackPanel>
</Grid>

在这里插入图片描述
可以通过Orientation（Horizontal/Vertical） 设置排列方向

<Grid><Grid.RowDefinitions><RowDefinition/><RowDefinition/></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition/><ColumnDefinition/></Grid.ColumnDefinitions><StackPanel Orientation="Horizontal"><Button Width="100" Height="40"/><Button Width="100" Height="40"/><Button Width="100" Height="40"/><Button Width="100" Height="40"/><Button Width="100" Height="40"/></StackPanel>
</Grid>

在这里插入图片描述

WrapPanel

WrapPanel默认排列方向与StackPanel相反、WrapPanel的Orientation默认为Horizontal。
WrapPanel具备StackPanel的功能基础上具备在尺寸变更后自动适应容器的宽高进行换行换列处理。

<WrapPanel Grid.Row="1"><Button Width="100" Height="40"/><Button Width="100" Height="40"/><Button Width="100" Height="40"/><Button Width="100" Height="40"/><Button Width="100" Height="40"/>
</WrapPanel>

在这里插入图片描述
也可以通过设置Orientation（Horizontal/Vertical） 设置排列方向

DockPanel

默认DockPanel中的元素具备DockPanel.Dock属性,
该属性为枚举具备: Top、Left、Right、Bottom。

默认情况下, DockPanel中的元素不添加DockPanel.Dock属性, 则系统则会默认添加 Left。

DockPanel有一个LastChildFill属性, 该属性默认为true, 该属性作用为, 当容器中的最后一个元素时, 默认该元素填充DockPanel所有空间。

<Window x:Class="WpfApp1.MainWindow"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="MainWindow" Height="450" Width="800"><Grid><DockPanel><Button Width="100" Height="40"/><Button Width="100" Height="40"/><Button Width="100" Height="40"/><Button Width="100" Height="40"/></DockPanel></Grid>
</Window>

在这里插入图片描述
最后一个元素，跟前面的分开得原因是，最后一个元素默认填充剩余空间，但是他的宽度不够，就放在中间

将LastChildFill 设为False,最后一个元素就会跟随默认向左停靠

<Grid><DockPanel LastChildFill="False"><Button Width="100" Height="40"/><Button Width="100" Height="40"/><Button Width="100" Height="40"/><Button Width="100" Height="40"/></DockPanel>
</Grid>

在这里插入图片描述
可以单独定义停靠方向

<Grid><DockPanel LastChildFill="False"><Button Width="100" Height="40" DockPanel.Dock="Left"/><Button Width="100" Height="40" DockPanel.Dock="Top"/><Button Width="100" Height="40" DockPanel.Dock="Right"/><Button Width="100" Height="40" DockPanel.Dock="Bottom"/></DockPanel>
</Grid>

在这里插入图片描述

UniformGrid

: 指定行和列的数量, 均分有限的容器空间

<Window x:Class="WpfApp1.MainWindow"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="MainWindow" Height="450" Width="800"><Grid><UniformGrid Columns="3" Rows="3"><Button/><Button/><Button/><Button/><Button/><Button/><Button/><Button/><Button/></UniformGrid></Grid>
</Window>

在这里插入图片描述
也可以不指定 行列数量

<Grid><UniformGrid><Button/><Button/><Button/><Button/><Button/><Button/><Button/><Button/><Button/></UniformGrid>
</Grid>

结果相同
在这里插入图片描述

项目作业

在这里插入图片描述


http://www.ppmy.cn/embedded/17020.html

相关文章

03-JAVA设计模式-观察者模式

03-JAVA设计模式-观察者模式

观察者模式 什么是观察者模式 Java中的观察者模式是一种常见的设计模式&#xff0c;它允许对象&#xff08;观察者&#xff09;订阅另一个对象&#xff08;被观察者&#xff09;的状态变化&#xff0c;并在状态变化时自动得到通知。 核心&#xff1a; 观察者模式主要用于1&a…
阅读更多...
【Qt常用控件】—— 多元素控件

【Qt常用控件】—— 多元素控件

目录 1.1 List Widget 1.2 Table Widget 1.3 Tree Widget 1.4 小结 Qt 中提供的多元素控件有: QListWidget QListView QTableWidget QTableView QTreeWidget QTreeView xxWidget 和 xxView 之间的区别 以 QTableWidget 和 QTableView 为例&#xff1a; QTableView 是基于…
阅读更多...
学习 Rust 的第十一天：如何使用模块

学习 Rust 的第十一天：如何使用模块

大家好&#xff0c; 今天是学习 Rust 的第 11 天&#xff0c;今天我们来看看 Rust 的模块系统。我们可以利用这个系统来管理不断增长的项目&#xff0c;并跟踪各个模块的存储位置。 介绍 在 Rust 中&#xff0c;模块系统通过将相关函数、类型和其他项目分组来帮助保持代码组…
阅读更多...
less和scss循环生成margin和padding

less和scss循环生成margin和padding

less // 循环生成 margin padding .padding(n, i: 1) when (i < n) {.pt-{i} {padding-top: i 0px;}.pr-{i} {padding-right: i 0px;}.pb-{i} {padding-bottom: i 0px;}.pl-{i} {padding-left: i 0px;}.p-{i} {padding: i 0px;}.padding(n, (i 1)); }.margin(n, i: 1…
阅读更多...
维护网络安全的途径有哪些？

维护网络安全的途径有哪些？

网络安全是各个网络企业中的重中之重&#xff0c;维护网络安全是确保个人、组织的信息和资产可以在网络环境中得到保护的重要任务&#xff0c;以下是常见的维护网络安全的多种途径&#xff1a; 对于网络安全的维护&#xff0c;用户和企业可以设置一些比较复杂且独特的密码&…
阅读更多...
深度学习基础之《TensorFlow框架（13）—二进制数据》

深度学习基础之《TensorFlow框架（13）—二进制数据》

一、CIFAR-10二进制数据集介绍 1、CIFAR-10数据集 CIFAR-10数据集由10个类别的60000个32x32彩色图像组成&#xff0c;每个类别有6000个图像。有50000个训练图像和10000个测试图像 2、数据集分为五个训练批次和一个测试批次&#xff0c;每个批次有10000个图像 3、data_batch_…
阅读更多...
常见的锁策略与死锁（详解）

常见的锁策略与死锁（详解）

文章目录 前言一、常见的锁策略1.乐观锁vs悲观锁2.重量级锁vs轻量级锁3.自旋锁vs挂起等待锁4.读写锁vs互斥锁5.公平锁vs非公平锁6.可重入锁vs不可重入锁可重入锁在哪释放锁 7.synchronized具体是采用了哪些锁策略呢?synchronized内部实现策略(内部原理)锁消除锁粗化 二、死锁1…
阅读更多...
python 学习笔记24 图片视频修复

python 学习笔记24 图片视频修复

这个是python 学习笔记18 GFPGAN人脸(图片)修复_nameerror: name fused_act_ext is not defined-CSDN博客 的后续。 gfpgan衍生出了个Real-ESRGAN&#xff0c;这个更灵活并且能修复一般性图片以及动画&#xff0c;简单上手无门槛。链接如下&#xff1a; Real-ESRGAN/README_…
阅读更多...
最新文章

Copyright @ 2022~2023