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

news2025/3/31 6:18:38

目录

  • 前言
  • 一、创建新项目
    • 注意
      • 注意点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.coloradmin.cn/o/2296039.html

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

相关文章

SpringCloud - Nacos注册/配置中心

前言 该博客为Nacos学习笔记&#xff0c;主要目的是为了帮助后期快速复习使用 学习视频&#xff1a;7小快速通关SpringCloud 辅助文档&#xff1a;SpringCloud快速通关 源码地址&#xff1a;cloud-demo 一、简介 Nacos官网&#xff1a;https://nacos.io/docs/next/quickstar…

C++ 继承(1)

1.继承概念 我们平时有时候在写多个有内容重复的类的时候会很麻烦 比如我要写Student Teacher Staff 这三个类 里面都要包含 sex name age成员变量 唯一不同的可能有一个成员变量 但是这三个成员变量我要写三遍 太麻烦了 有没有好的方式呢&#xff1f; 有的 就是继承…

【C语言】传值调用与传址调用详解

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C语言 文章目录 &#x1f4af;前言&#x1f4af;传值调用1. 什么是传值调用&#xff1f;2. 示例代码&#xff1a;传值调用失败的情况执行结果&#xff1a; 3. 为什么传值调用无法修改外部变量&#xff1f; &#x1f4…

蓝桥杯C语言组:图论问题

蓝桥杯C语言组图论问题研究 摘要 图论是计算机科学中的一个重要分支&#xff0c;在蓝桥杯C语言组竞赛中&#xff0c;图论问题频繁出现&#xff0c;对参赛选手的算法设计和编程能力提出了较高要求。本文系统地介绍了图论的基本概念、常见算法及其在蓝桥杯C语言组中的应用&#…

windows通过网络向Ubuntu发送文件/目录

由于最近要使用树莓派进行一些代码练习&#xff0c;但是好多东西都在windows里或虚拟机上&#xff0c;就想将文件传输到树莓派上&#xff0c;但试了发现u盘不能简单传送&#xff0c;就在网络上找到了通过windows 的scp命令传送 前提是树莓派先开启ssh服务&#xff0c;且Window…

Unity抖音云启动测试:如何用cmd命令行启动exe

相关资料&#xff1a;弹幕云启动&#xff08;原“玩法云启动能力”&#xff09;_直播小玩法_抖音开放平台 1&#xff0c;操作方法 在做云启动的时候&#xff0c;接完发现需要命令行模拟云环境测试启动&#xff0c;所以研究了下。 首先进入cmd命令&#xff0c;CD进入对应包的文件…

ZU47DR 100G光纤 高性能板卡

简介 2347DR是一款最大可提供8路ADC接收和8路DAC发射通道的高性能板卡。板卡选用高性价比的Xilinx的Zynq UltraScale RFSoC系列中XCZU47DR-FFVE1156作为处理芯片&#xff08;管脚可以兼容XCZU48DR-FFVE1156&#xff0c;主要差别在有无FEC&#xff08;信道纠错编解码&#xff0…

【算法】动态规划专题⑥ —— 完全背包问题 python

目录 前置知识进入正题模板 前置知识 【算法】动态规划专题⑤ —— 0-1背包问题 滚动数组优化 完全背包问题是动态规划中的一种经典问题&#xff0c;它与0-1背包问题相似&#xff0c;但有一个关键的区别&#xff1a;在完全背包问题中&#xff0c;每种物品都有无限的数量可用。…

C#中深度解析BinaryFormatter序列化生成的二进制文件

C#中深度解析BinaryFormatter序列化生成的二进制文件 BinaryFormatter序列化时,对象必须有 可序列化特性[Serializable] 一.新建窗体测试程序BinaryDeepAnalysisDemo,将默认的Form1重命名为FormBinaryDeepAnalysis 二.新建测试类Test Test.cs源程序如下: using System; us…

51单片机之引脚图(详解)

8051单片机引脚分类与功能笔记 1. 电源引脚 VCC&#xff08;第40脚&#xff09;&#xff1a;接入5V电源&#xff0c;为单片机提供工作电压。GND&#xff08;第20脚&#xff09;&#xff1a;接地端&#xff0c;确保电路的电位参考点。 2.时钟引脚 XTAL1&#xff08;第19脚&a…

jupyterLab插件开发

jupyter lab安装、配置&#xff1a; jupyter lab安装、配置教程_容器里装jupyterlab-CSDN博客 『Linux笔记』服务器搭建神器JupyterLab_linux_布衣小张-腾讯云开发者社区 Jupyter Lab | 安装、配置、插件推荐、多用户使用教程-腾讯云开发者社区-腾讯云 jupyterLab插件开发教…

配置#include “nlohmann/json.hpp“,用于处理json文件

#include “nlohmann/json.hpp” // 需要安装 nlohmann/json.hpp 头文件 using json = nlohmann::json; 下载链接:https://github.com/nlohmann/json/tree/develop 1.下载并解压:首先,需要从nlohmann/json的GitHub仓库下载源代码,并解压得到的文件。 地址: nlohmann/json…

MATLAB | 基于Theil-Sen斜率和Mann-Kendall检验的栅格数据趋势分析

最近看到一些博主分享关于 SenMK 检验的代码&#xff0c;对于新手来说可能有点复杂。我们编写了一段 MATLAB 代码&#xff0c;能够一次性解决这些问题&#xff0c;简化操作流程。我们还准备了几个关于趋势检验的空间分布图&#xff0c;供大家参考。 一、Sens Slope和Mann-Kenda…

Windows 系统下使用 Ollama 离线部署 DeepSeek - R1 模型指南

引言 随着人工智能技术的飞速发展&#xff0c;各类大语言模型层出不穷。DeepSeek - R1 凭借其出色的语言理解和生成能力&#xff0c;受到了广泛关注。而 Ollama 作为一款便捷的模型管理和部署工具&#xff0c;能够帮助我们轻松地在本地环境中部署和使用模型。本文将详细介绍如…

Docker、Ollama、Dify 及 DeepSeek 安装配置与搭建企业级本地私有化知识库实践

在现代企业中&#xff0c;管理和快速访问知识库是提升工作效率、促进创新的关键。为了满足这些需求&#xff0c;企业越来越倾向于构建本地私有化的知识库系统&#xff0c;这样可以更好地保护企业数据的安全性和隐私性。本文将介绍如何利用 **Docker**、**Ollama**、**Dify** 和…

【漫话机器学习系列】087.常见的神经网络最优化算法(Common Optimizers Of Neural Nets)

常见的神经网络优化算法 1. 引言 在深度学习中&#xff0c;优化算法&#xff08;Optimizers&#xff09;用于更新神经网络的权重&#xff0c;以最小化损失函数&#xff08;Loss Function&#xff09;。一个高效的优化算法可以加速训练过程&#xff0c;并提高模型的性能和稳定…

【JVM详解四】执行引擎

一、概述 Java程序运行时&#xff0c;JVM会加载.class字节码文件&#xff0c;但是字节码并不能直接运行在操作系统之上&#xff0c;而JVM中的执行引擎就是负责将字节码转化为对应平台的机器码让CPU运行的组件。 执行引擎是JVM核心的组成部分之一。可以把JVM架构分成三部分&am…

route 与 router 之间的差别

简述&#xff1a; router&#xff1a;主要用于处理一些动作&#xff0c; route&#xff1a;主要获得或处理一些数据&#xff0c;比如地址、参数等 例&#xff1a; videoInfo1.vue&#xff1a; <template><div class"video-info"><h3>二级组件…

SamWaf开源轻量级的网站应用防火墙(安装包),私有化部署,加密本地存储的数据,易于启动,并支持 Linux 和 Windows 64 位和 Arm64

一、SamWaf轻量级开源防火墙介绍 &#xff08;文末提供下载&#xff09; SamWaf网站防火墙是一款适用于小公司、工作室和个人网站的开源轻量级网站防火墙&#xff0c;完全私有化部署&#xff0c;数据加密且仅保存本地&#xff0c;一键启动&#xff0c;支持Linux&#xff0c;Wi…

极客说|利用 Azure AI Agent Service 创建自定义 VS Code Chat participant

作者&#xff1a;卢建晖 - 微软高级云技术布道师 「极客说」 是一档专注 AI 时代开发者分享的专栏&#xff0c;我们邀请来自微软以及技术社区专家&#xff0c;带来最前沿的技术干货与实践经验。在这里&#xff0c;您将看到深度教程、最佳实践和创新解决方案。关注「极客说」&a…