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

小白鼠零号2025-02-07 10:59

目录

前言

参考文章：

参考视频：【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】

csharp 复制代码 
    <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>

中间布局

csharp 复制代码 
    <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>

四、例子

简单的模仿文本文档布局

csharp 复制代码 
<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：创建。
相关推荐
weixin_307779131 小时前
使用C#实现从Hive的CREATE TABLE语句中提取分区字段名和数据类型
开发语言·数据仓库·hive·c#
时光追逐者2 小时前
在 Blazor 中使用 Chart.js 快速创建数据可视化图表
开发语言·javascript·信息可视化·c#·.net·blazor
huizhixue-IT2 小时前
华为存储考试内容&HCIP-Storage
wpf
与火星的孩子对话3 小时前
Unity3D开发AI桌面精灵/宠物系列 【三】 语音识别 ASR 技术、语音转文本多平台 - 支持科大讯飞、百度等 C# 开发
人工智能·unity·c#·游戏引擎·语音识别·宠物
response_L3 小时前
国产系统统信uos和麒麟v10在线打开word给表格赋值
java·c#·word·信创·在线编辑
MasterNeverDown3 小时前
Swagger2Md：让WebAPI文档生成变得轻松高效
c#
向宇it3 小时前
【零基础入门unity游戏开发——2D篇】2D 游戏场景地形编辑器——TileMap的使用介绍
开发语言·游戏·unity·c#·编辑器·游戏引擎
闪电麦坤9512 小时前
C#：base 关键字
开发语言·c#
mingupup13 小时前
C#连接小智服务器并将音频解码播放过程记录
c#
爱吃奶酪的松鼠丶16 小时前
.net GRPC服务搭建，跨进程调用。C#应用和Python应用之间的通信。
python·c#·.net
热门推荐
01我决定放弃搞 Java 了02DeepSeek各版本说明与优缺点分析03如何在WPS和Word/Excel中直接使用DeepSeek功能04RAG 实践- Ollama+RagFlow 部署本地知识库05本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程06从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑07如何本地部署AI智能体平台，带你手搓一个AI Agent08苍穹外卖面试总结09DeepSeek RAGFlow构建本地知识库系统10【芯片封测学习专栏 -- D2D 和 C2C 之间的区别】