记录 | WPF创建和基本的页面布局

embedded/2025/2/8 0:22:14/

目录

  • 前言
  • 一、创建新项目
    • 注意
      • 注意点1
      • 注意点2 解决方案名称和项目名称
  • 二、布局
    • 2.1 Grid
      • 2.1.1 RowDefinitions 行分割
      • 2.1.2 Row & Column 行列定位
        • 区分
      • 2.1.3 ColumnDefinitions 列分割
    • 2.2 StackPanel
      • 2.2.1 Orientation 修改方向
  • 三、模板
    • 水平布局【Grid中套StackPanel】
    • 中间布局
  • 四、例子
  • 本文代码下载
  • 更新时间


前言

参考文章:
参考视频:【WPF入门教程 Visual Studio 2022】WPF界面开发入门

自己的感想


一、创建新项目

注意:WPF应用程序,指创建.NET Core平台

在这里插入图片描述

注意

注意点1

系统是如何区分当前的是winform还是WPF文件呢?
方式是通过记事本。
下图中可以看到sln文件需要执行哪些文件,加载哪些文件。
csproj文件中指示加载哪些配置文件等信息。

在这里插入图片描述
在这里插入图片描述

注意点2 解决方案名称和项目名称

关系:大文件夹里包含多个独立的小文件。
联想:糖果盒里有多个小糖果。
理解:针对一个问题的解决,是有多种方案(项目名称)
在这里插入图片描述


二、布局

2.1 Grid

表格布局。讲究:行列。
特点:里面组件创建出来就是水平居中。
例如:下图就是行列布局
在这里插入图片描述

2.1.1 RowDefinitions 行分割

先把界面分成2行。
在这里插入图片描述

2.1.2 Row & Column 行列定位

ShowGridLines显示分割线。

在这里插入图片描述

区分

在这里插入图片描述

2.1.3 ColumnDefinitions 列分割

  • 先指定某个区域:第3行,第1列采用Grid布局。
  • 选取分割方式:用ColumnDefinitons进行列分割

在这里插入图片描述

2.2 StackPanel

特点:从上直下,依次填充。

2.2.1 Orientation 修改方向

虽然可以用Margin去控制组件之间的距离,但是它还是无法自动。
在这里插入图片描述
在Grid中采用Stackpanel布局,用Orientation属性来修改其排列方向,可初步实现自动水平排列。【如下图所示】
在这里插入图片描述

三、模板

水平布局【Grid中套StackPanel】

在这里插入图片描述

    <Grid ShowGridLines="True"><Grid.RowDefinitions><RowDefinition Height="20"/><RowDefinition/></Grid.RowDefinitions><StackPanel Grid.Row="0" Grid.Column="0"  Orientation="Horizontal"><Button Height="20" Width="70" Content="文件"/><Button Height="20" Width="70" Content="编辑"/><Button Height="20" Width="70" Content="查看"/><Button Height="20" Width="70" Content="外观"/><Button Height="20" Width="70" Content="设置"/><Button Height="20" Width="70" Content="帮助"/></StackPanel></Grid>

中间布局

在这里插入图片描述

    <Grid ShowGridLines="True"><!--整体划分3--><Grid.RowDefinitions><RowDefinition/><RowDefinition/><RowDefinition/></Grid.RowDefinitions><!--2行,第1--><Grid Grid.Row="1" Grid.Column="0" ShowGridLines="True"><!--划分出2--><Grid.ColumnDefinitions><ColumnDefinition/><ColumnDefinition/></Grid.ColumnDefinitions></Grid></Grid>

四、例子

简单的模仿文本文档布局
在这里插入图片描述

<Window x:Class="WPF_Study.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:WPF_Study"mc:Ignorable="d"Title="WPF入门.txt" Height="600" Width="800"><Grid ShowGridLines="True"><!--整体分行,总共分4--><Grid.RowDefinitions><RowDefinition Height="20"/><RowDefinition Height="20"/><RowDefinition/><RowDefinition Height="20"/></Grid.RowDefinitions><!--1行,第1--><StackPanel Grid.Row="0" Grid.Column="0"  Orientation="Horizontal"><Button Height="20" Width="70" Content="文件"/><Button Height="20" Width="70" Content="编辑"/><Button Height="20" Width="70" Content="查看"/><Button Height="20" Width="70" Content="外观"/><Button Height="20" Width="70" Content="设置"/><Button Height="20" Width="70" Content="帮助"/></StackPanel><!--2行,第1--><StackPanel Grid.Row="1" Grid.Column="0" Orientation="horizontal"><Button Height="20" Width="20" Content="1"/><Button Height="20" Width="20" Content="2"/><Button Height="20" Width="20" Content="3"/><Button Height="20" Width="20" Content="4"/><Button Height="20" Width="20" Content="5"/><Button Height="20" Width="20" Content="6"/><Button Height="20" Width="20" Content="7"/></StackPanel><!--3行,第1--><Grid Grid.Row="2" Grid.Column="0"><Grid.ColumnDefinitions><ColumnDefinition Width="70"/><ColumnDefinition/></Grid.ColumnDefinitions><!--该区域中,第1行,第1--><StackPanel Grid.Row="0" Grid.Column="0"><Button Height="20" Width="70" Content="1"/><Button Height="20" Width="70" Content="1"/><Button Height="20" Width="70" Content="1"/><Button Height="20" Width="70" Content="1"/></StackPanel><!--该区域中,第1行,第2--><TextBox Grid.Row="0" Grid.Column="1" TextWrapping="Wrap"/></Grid><!--4行,第1--><Grid Grid.Row="3" Grid.Column="0" ShowGridLines="True"><Grid.ColumnDefinitions><ColumnDefinition/><ColumnDefinition/><ColumnDefinition/><ColumnDefinition/><ColumnDefinition/><ColumnDefinition/><ColumnDefinition/><ColumnDefinition/><ColumnDefinition/><ColumnDefinition/><ColumnDefinition/><ColumnDefinition/><ColumnDefinition/><ColumnDefinition/></Grid.ColumnDefinitions><Button Grid.Row="0" Grid.Column="0" Content="行 8/11"/><Button Grid.Row="0" Grid.Column="1" Content="列 3/2"/><Button Grid.Row="0" Grid.Column="2" Content="字符 3/2"/><Button Grid.Row="0" Grid.Column="3" Content="求值 --"/><Button Grid.Row="0" Grid.Column="4" Content="选定 --"/><Button Grid.Row="0" Grid.Column="5" Content="选行 --"/><Button Grid.Row="0" Grid.Column="6" Content="匹配 --"/><Button Grid.Row="0" Grid.Column="7" Content="行 8/11"/><Button Grid.Row="0" Grid.Column="8" Content="行 8/11"/><Button Grid.Row="0" Grid.Column="9" Content="行 8/11"/><Button Grid.Row="0" Grid.Column="10" Content="行 8/11"/><Button Grid.Row="0" Grid.Column="11" Content="行 8/11"/><Button Grid.Row="0" Grid.Column="12" Content="行 8/11"/><Button Grid.Row="0" Grid.Column="13" Content="行 8/11"/></Grid></Grid>
</Window>

本文代码下载

上面的代码就是全部代码,如果需要源代码,点击进行下载


更新时间

  • 2025-02-06:创建。

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

相关文章

优化fm.jiecao.jcvideoplayer_lib中视频横竖屏自动适配原视频方案

fm.jiecao:jiecaovideoplayer:x.x.x 优化fm.jiecao.jcvideoplayer_lib中视频横竖屏自动适配原视频方案&#xff1a; 仅优化关键代码部分&#xff0c;源码&#xff1a; public void startWindowFullscreen() {Log.i(TAG, "startWindowFullscreen " " [" …

DeepSeek横空出世,AI格局或将改写?

引言 这几天&#xff0c;国产AI大模型DeepSeek R1&#xff0c;一飞冲天&#xff0c;在全球AI圈持续引爆热度&#xff0c;DeepSeek R1 已经是世界上最先进的 AI 模型之一&#xff0c;可与 OpenAI 的新 o1 和 Meta 的 Llama AI 模型相媲美。 DeepSeek-V3模型发布后&#xff0c;在…

B-树:解锁大数据存储和与快速存储的密码

在我们学习数据结构的过程中&#xff0c;我们会学习到二叉搜索树、二叉平衡树、红黑树。 这些无一例外&#xff0c;是以一个二叉树展开的&#xff0c;那么对于我们寻找其中存在树中的数据&#xff0c;这个也是一个不错的方法。 但是&#xff0c;如若是遇到了非常大的数据容量…

网络原理一>数据链路层协议->以太网协议

目录 以太网协议的结构&#xff1a;类型&#xff1a;ARP请求应答报文&#xff1a;CRC&#xff1a;MTU: 为什么需要mac地址&#xff1a;mac地址和IP地址的区别&#xff1a; 以太网协议的结构&#xff1a; 以太网是数据链路层和物理层的主要协议 源IP&#xff0c;目的IP就不多说…

Deepseek本地部署指南:在linux服务器部署,在mac远程web-ui访问

1. 在Linux服务器上部署DeepSeek模型 要在 Linux 上通过 Ollama 安装和使用模型&#xff0c;您可以按照以下步骤进行操作&#xff1a; 步骤 1&#xff1a;安装 Ollama 安装 Ollama&#xff1a; 使用以下命令安装 Ollama&#xff1a; curl -sSfL https://ollama.com/download.…

PostgreSQL 数据库模式基础操作

查看数据库或者使用pgAdmin或者QGIS查看PG数据库时&#xff0c;可以看到数据库名下面有一个Public&#xff0c;然后才是具体的表&#xff0c;搜索了一下&#xff0c;按照PG官网&#xff1a;https://www.postgresql.org/docs/current/ddl-schemas.html 的说明&#xff0c;这个Pu…

PHP-trim

[题目信息]&#xff1a; 题目名称题目难度PHP-trim1 [题目考点]&#xff1a; trim() 函数移除字符串两侧的空白字符或其他预定义字符。[Flag格式]: SangFor{dl9hFiITmhQNAJysCgigAskyCZ6kQaDc}[环境部署]&#xff1a; docker-compose.yml文件或者docker tar原始文件。 ht…

安全实验作业

一 拓扑图 二 要求 1、R4为ISP&#xff0c;其上只能配置IP地址&#xff1b;R4与其他所有直连设备间均使用共有IP 2、R3-R5-R6-R7为MGRE环境&#xff0c;R3为中心站点&#xff1b; 3、整个OSPF环境IP基于172.16.0.0/16划分&#xff1b; 4、所有设备均可访问R4的环回&#x…