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

news2024/12/23 13:49:06

本笔记为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 则用于设置空间元素的 跨列与阔行。

<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.coloradmin.cn/o/1616193.html

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

相关文章

森林消防装备：高压消防接力水泵/恒峰智慧科技

森林消防装备：高压消防接力水泵/恒峰智慧科技

在广袤无垠的森林中&#xff0c;每一份绿色都是大自然赋予我们的宝贵财富。然而&#xff0c;这些美丽的绿色也可能因为一场突如其来的火灾而被瞬间吞噬。为了保护这片生命的绿洲&#xff0c;我们需要一种高效、可靠的消防装备——高压消防接力水泵。 这款森林消防装备采用本田汽…
阅读更多...
Hadoop3：HDFS、YARN、MapReduce三部分的架构概述及三者间关系（Hadoop入门必须记住的内容）

Hadoop3：HDFS、YARN、MapReduce三部分的架构概述及三者间关系（Hadoop入门必须记住的内容）

一、HDFS架构概述 Hadoop Distributed File System&#xff0c;简称HDFS&#xff0c;是一个分布式文件系统。 1&#xff09;NameNode(nn)&#xff1a;存储文件的元数据&#xff0c;如文件名&#xff0c;文件目录结构&#xff0c;文件属性&#xff08;生成时间、副本数、文件…
阅读更多...
Linux 系统IO函数之stat、lstat函数

Linux 系统IO函数之stat、lstat函数

1、stat函数 要点&#xff1a; int stat(const char *pathname, struct stat *statbuf); 作用&#xff1a;查看文件的信息 man 2 stat/return value1、stat结构体&#xff1a; 2、sturct stat 结构体中 st_mode 的含义&#xff08;文件的类型和存取的权限&#xff09;: st_mo…
阅读更多...
go语言通过TCP协议实现聊天室样例

go语言通过TCP协议实现聊天室样例

1、服务端&#xff1a; package mainimport ("fmt""net""sync" )type ChatServer struct {clients map[string]net.ConnclientsMux sync.Mutex }func NewChatServer() *ChatServer {return &ChatServer{clients: make(map[string]net.Co…
阅读更多...
JS-47-Node.js06-fs模块-读写文件

JS-47-Node.js06-fs模块-读写文件

Node.js内置的fs模块就是文件系统模块&#xff0c;负责读写文件。 和所有其它JavaScript模块不同的是&#xff0c;fs模块同时提供了异步和同步的方法。 一、回顾&#xff1a;异步方法VS同步方法 1-1、异步方法 因为JavaScript的单线程模型&#xff0c;执行IO操作时&#xff…
阅读更多...
iStat Menus for Mac：强大的系统监控工具

iStat Menus for Mac：强大的系统监控工具

iStat Menus for Mac是一款功能强大的系统监控工具&#xff0c;专为Mac用户设计&#xff0c;旨在帮助用户全面了解电脑的运行状态&#xff0c;提高电脑的性能和稳定性。 iStat Menus for Mac v6.73 (1239)中文版下载 该软件可以实时监测CPU使用率、内存占用、网络速度、硬盘活动…
阅读更多...
华为P系列“砍了”，三角美学系列全新登场

华为P系列“砍了”，三角美学系列全新登场

2021 年 10 月&#xff0c;Intel 正式带来了颠覆以往的第 12 代酷睿「混合架构」 CPU。 不知道是良心发现还是为了弥补 11 代酷睿过于拉胯表现&#xff0c;Intel 终于把狠活儿都用在了这代。 全新 Intel 7 工艺、全新架构、单核与多核性能大幅提升&#xff0c;让大家十分默契…
阅读更多...
excel文件可以直接转换成图片格式吗？excel文件怎样才能快速转换成图片？excel文件快速转换成图片的方法

excel文件可以直接转换成图片格式吗？excel文件怎样才能快速转换成图片？excel文件快速转换成图片的方法

一&#xff0c;excel文件转图片的必要性 1&#xff0c;excel文件转图片可以提高信息传播的便捷性。在日常工作中&#xff0c;我们可能需要将表格数据分享给同事或客户&#xff0c;但由于Excel文件的复杂性&#xff0c;对方可能需要安装相应的软件才能查看。而如果将Excel文件转…
阅读更多...
【多态】底层原理

【多态】底层原理

博主首页&#xff1a; 有趣的中国人 专栏首页&#xff1a; C进阶 本篇文章主要讲解 多态底层原理 的相关内容 1. 多态原理 1.1 虚函数表 先看一下这段代码&#xff0c;计算一下sizeof(Base)是多少&#xff1a; class Base { public:virtual void Func1(){cout << &quo…
阅读更多...
Facebook的区块链应用深度分析

Facebook的区块链应用深度分析

去中心化身份验证的意义 在当今数字化社会中&#xff0c;身份验证的重要性不言而喻。对于Facebook这样的大型社交媒体平台来说&#xff0c;确保用户的身份真实性和数据的安全性是至关重要的。传统的中心化身份验证方式存在一定的安全风险和可信性问题&#xff0c;而去中心化身…
阅读更多...
成电少年学fpga培训就业班怎么样

成电少年学fpga培训就业班怎么样

成电少年学是专注做FPGA培训的&#xff0c;以就业为导向&#xff0c;学习FPGA还是很有前途的&#xff0c;如果你是像电气、通信、自动化、物联网、集成电路这类专业&#xff0c;又不是名校高学历的&#xff0c;确实有必要可以考虑下校外培训机构。找工作多少会遇到一些问题&…
阅读更多...
机器学习-10-神经网络python实现-从零开始

机器学习-10-神经网络python实现-从零开始

文章目录 总结参考本门课程的目标机器学习定义从零构建神经网络手写数据集MNIST介绍代码读取数据集MNIST神经网络实现测试手写的图片 带有反向查询的神经网络实现 总结 本系列是机器学习课程的系列课程&#xff0c;主要介绍基于python实现神经网络。 参考 BP神经网络及pytho…
阅读更多...
VUE 项目 自动按需导入

VUE 项目 自动按需导入

你是否有这样的苦恼&#xff0c;每个.vue都需要导入所需的vue各个方法 unplugin-auto-import 库 Vite、Webpack和Rollup的按需自动导入API 本章提供Vite、Webpack中使用说明 1. 安装 npm i -D unplugin-auto-import 2. config.js 配置文件内追加配置 2.1 Vite // vite.conf…
阅读更多...
计算机网络—— book

计算机网络—— book

文章目录 一、概述1.互联网的核心部分1&#xff0e;电路交换的主要特点2&#xff0e;分组交换的主要特点 2.计算机网络的性能1&#xff0e;速率2&#xff0e;带宽3&#xff0e;吞吐量4&#xff0e;时延5&#xff0e;利用率 3.计算机网络体系结构协议与划分层次具有五层协议的体…
阅读更多...
达芬奇调色:色彩理论入门

达芬奇调色:色彩理论入门

写在前面 整理一些达芬奇调色的笔记博文内容涉及&#xff1a; 一级调色是什么&#xff0c;以及 调色素材格式 log&#xff0c;raw&#xff0c;rec709 简单认知理解不足小伙伴帮忙指正 不必太纠结于当下&#xff0c;也不必太忧虑未来&#xff0c;当你经历过一些事情的时候&#…
阅读更多...
四、【易 AI】模型渲染与透明背景

四、【易 AI】模型渲染与透明背景

美恶相饰，命曰复周，物极则反，命曰环流。 ——《鹖冠子环流》 一、渲染帧率 以上两种移植方式，均可正常渲染出模型，但是画面是静止的，是因为没有调用 update 方法来刷新窗口渲染内容，我们可以通过 QTimer 来控制渲染帧率，以 MyOpenGLWindow 为例，做以下修改， #ifnde…
阅读更多...
GHO文件安装到Vmware的两种姿势

GHO文件安装到Vmware的两种姿势

1、使用 Ghost11.5.1.2269 将gho转换为vmdk文件(虚拟机硬盘)&#xff0c;Vmware新建虚拟机自定义配置&#xff0c;然后添加已有的虚拟硬盘文件。 注意ghost的版本&#xff0c;如果你是用Ghost11.5备份的gho文件&#xff0c;再用Ghost12把gho文件转换为vmdk&#xff0c;则vmdk文…
阅读更多...
C++及QT的线程学习

C++及QT的线程学习

目录 一. 线程学习 二. 学习线程当中&#xff0c;得到的未知。 1. 了解以下MainWindow和main的关系 2. []()匿名函数 有函数体&#xff0c;没有函数名. 3. join和detach都是用来管理线程的生命周期的&#xff0c;它们的区别在于线程结束和资源的回收。 4. operator()() 仿…
阅读更多...
Spark-机器学习（4）回归学习之逻辑回归

Spark-机器学习（4）回归学习之逻辑回归

在之前的文章中&#xff0c;我们来学习我们回归中的线性回归&#xff0c;了解了它的算法&#xff0c;知道了它的用法&#xff0c;并带来了简单案例。想了解的朋友可以查看这篇文章。同时&#xff0c;希望我的文章能帮助到你&#xff0c;如果觉得我的文章写的不错&#xff0c;请…
阅读更多...
管理集群工具之LVS

管理集群工具之LVS

管理集群工具之LVS 集群概念 将很多机器组织在一起&#xff0c;作为一个整体对外提供服务集群在扩展性、性能方面都可以做到很灵活集群分类 负载均衡集群&#xff1a;Load Balance高可用集群&#xff1a;High Availability高性能计算&#xff1a;High Performance Computing …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023