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

---

前言

参考文章：
参考视频：【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：创建。