一、WPF入门介绍+Grid和StackPanel布局介绍+实战模拟Notepad++页面布局

发布于：2025-09-12 ⋅ 阅读:(15) ⋅ 点赞:(0)

该博文参考B站博主丑萌气质狗视频学习小笔记，如有侵权联系立删
视频链接：WPF入门

一、WPF入门介绍（Winform和WPF对比）

1，WPF是C#的一套关于Windows界面应用开发框架；当然Winform也是一样的，这两者有很多区别

区别 Winform WPF
诞生 老 新
界面描述 C#语言去描述 XMAL去描述
界面实现效果难度 复杂 简单
绑定 1，修改变量的值；2，需要手动同步更新到界面中 可直接绑定，自动更新同步

2，创建Winform项目
Windows窗体应用（.NET Framework）使用的是.Net Framework平台
Windows窗体应用使用的是**.NET Core平台**
俩都是支持C#的，没啥太大区别，我喜欢使用Windows窗体应用（.NET Framework）
在这里插入图片描述

视图–工具箱，显示所有的控件
在这里插入图片描述

拖一个button之后，会生成一个Form1.Designer.cs文件，该文件是界面描述文件
当界面里面的控件拖动修改的时候，系统会自动修改该文件

直接使用C#语言去描述页面

3，创建WPF项目
和Winform项目一样，只是平台不一样而已
在这里插入图片描述
拖一个button之后，会生成一个MainWindow.xaml文件去描述页面
该文件主要是通过XAML类似标签的形式进行描述

二、创建项目

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
创建项目的本质：创建文件模板
创建一个文件模板名称为WpfApp1，这个文件模板所在的文件夹名称为WpfApp1_Solution

若网上下载的项目中没有这个.sln解决方案，找.csproj打开即可
.sln管理着多个项目，项目是.csproj
在这里插入图片描述

这个WpfApp1_Solution.sln解决方案里面存放着各个项目的所在位置，多个项目的信息都会进行显示
在这里插入图片描述
在这里插入图片描述

WpfApp1.csproj里面就存放着项目相关的文件路径信息以方便VS进行管理
在这里插入图片描述

文件/文件夹路径 存放内容
bin 编译之后生成文件的地方；若没有引用第三方库，对方电脑有对应版本的,NET Framework框架，直接把exe丢给对方即可
obj 编译中途产生文件的地方
Properties/Resources.resx 存放图片资源等
.xaml 页面标签代码
.xaml.cs 页面功能实现C#代码

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

三、项目代码基础介绍

在App.xaml中可以设置优先启动的窗口
在这里插入图片描述

右击项目可以新建一个窗口
添加、窗口
在这里插入图片描述
在这里插入图片描述

在App.xmal中就可以设置启动窗口
在这里插入图片描述

MainWindow.xaml页面代码分析

Title、Height以及Width就不多说了，整个窗口的标题以及宽高布局

<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>
</Window>

其中x:Class="WpfApp1.MainWindow"会找命名空间为WpfApp1下名为MainWindow的类，前后台对应即可
在这里插入图片描述

xmlns === xml namespace

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”

这些都是在页面里面引入的命名空间，比如在C#后端实现的时候，需要引入命名空间，这里就相当于在前端xaml中引入的命名空间一样，以防止程序在编译的时候报错，先引入的时候可以保证在编写页面xaml的过程中查找问题，直接报错，体验感拉满。

四、布局控件：Grid和StackPanel

Visual Studio 快捷键
F7：代码
Shift + F7：XAML界面
在这里插入图片描述

1，button控件简单布局

在这里插入图片描述

<Grid>
    <Button Width="60" Height="30" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,10,0,0" />
    <Button Width="60" Height="30" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="388,0,0,0" />
    <Button Width="60" Height="30" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0,0,0,10" />
</Grid>
属性 描述 选项
Width 宽 数值
Height 高 数值
HorizontalAlignment 水平方向排布 Left、Center、Right
VerticalAlignment 垂直方向排布 Top、Center、Bottom
Margin Margin=“400,165,0,0” ，表示当前元素边缘轮廓左上右下到窗口四边的距离 在这里插入图片描述

WPF里面的单位不是像素，它是可以随着电脑显示器的DPI进行动态变化的，为了展示效果更加合理人性化；而Winform里面就是以像素为单位的，若显示器DPI差异很大，那么整个页面就会看起来很离谱。

2，布局控件——StackPanel

布局Button的时候默认会按纵向 依次排序，而Grid会重合叠加
StackPanel布局控件会将所有的控件自动紧密贴合
在这里插入图片描述

<StackPanel>
    <Button Height="60"/>
    <Button Height="60"/>
    <Button Height="60"/>
</StackPanel>

Orientation：取向
Horizontal：水平
Vertical：垂直

可以通过修改Orientation="Horizontal"进行水平排布，当然不写的话默认Orientation="Vertical"
在这里插入图片描述

<StackPanel Orientation="Horizontal">
    <Button Width="30"/>
    <Button Width="30"/>
    <Button Width="30"/>
</StackPanel>

3，布局控件——Grid

其本质是一个表格布局，啥都不给参数表示一行一列
默认的button是占满全屏且居中显示的

五、实战模拟Notepad++页面布局

项目实战：仿照notepad++页面的大致布局
在这里插入图片描述
分析：
1，整个项目分为五行，前三行和最后一行使用StackPanel进行紧凑布局，第四行因为是内容编译，故剩余系统填充即可
2，前三行高度固定，第四行使用剩余的空间填满
3，第四行使用一个两列的Grid表格
4，第四行左半部分使用StackPanel，右半部分使用TextBox
5，最后一行再使用一个Grid表格

接下来开始分步骤进行实现：

整个项目分为五行，前三行和最后一行使用StackPanel进行紧凑布局，第四行因为是内容编译，故剩余系统填充即可
在这里插入图片描述
最顶端是标题行，对Window标签里面的Title设置一下即可

Title="E:\normal_desk\desk\0903SubProgram.LS - Notepad++" Height="450" Width="800"

通过设置ShowGridLines属性，方便我们看布局效果

<Grid ShowGridLines="True">

分成五行

<Grid.RowDefinitions>
    <RowDefinition Height="20"/>
    <RowDefinition Height="20"/>
    <RowDefinition Height="20"/>
    <RowDefinition/>
    <RowDefinition Height="20"/>
</Grid.RowDefinitions>

1，第一行是一个StackPanel，内容是水平排列的，即Orientation="Horizontal"在这里插入图片描述

<StackPanel Grid.Row="0" Orientation="Horizontal">
    <Button Width="50" Content="文件(F)"/>
    <Button Width="50" Content="编辑(E)"/>
    <Button Width="50" Content="搜索(S)"/>
    <Button Width="50" Content="视图(V)"/>
    <Button Width="50" Content="编码(N)"/>
    <Button Width="50" Content="语言(L)"/>
    <Button Width="50" Content="设置(T)"/>
    <Button Width="50" Content="工具(O)"/>
    <Button Width="50" Content="宏(M)"/>
    <Button Width="50" Content="运行(R)"/>
    <Button Width="50" Content="插件(P)"/>
    <Button Width="50" Content="窗口(W)"/>
    <Button Width="50" Content="？"/>
</StackPanel>

2，第二行也是一个StackPanel，内容也是水平排列的，即Orientation="Horizontal"

在这里插入图片描述

<StackPanel Grid.Row="1" Orientation="Horizontal">
    <Button Width="20" Content="1"/>
    <Button Width="20" Content="2"/>
    <Button Width="20" Content="3"/>
    <Button Width="20" Content="4"/>
    <Button Width="20" Content="5"/>
    <Button Width="20" Content="6"/>
    <Button Width="20" Content="7"/>
    <Button Width="20" Content="8"/>
    <Button Width="20" Content="9"/>
    <Button Width="20" Content="10"/>
    <Button Width="20" Content="11"/>
    <Button Width="20" Content="12"/>
    <Button Width="20" Content="13"/>
    <Button Width="20" Content="14"/>
    <Button Width="20" Content="15"/>
    <Button Width="20" Content="16"/>
    <Button Width="20" Content="17"/>
    <Button Width="20" Content="18"/>
    <Button Width="20" Content="19"/>
    <Button Width="20" Content="20"/>
    <Button Width="20" Content="21"/>
    <Button Width="20" Content="22"/>
    <Button Width="20" Content="23"/>
    <Button Width="20" Content="24"/>
    <Button Width="20" Content="25"/>
    <Button Width="20" Content="26"/>
    <Button Width="20" Content="27"/>
    <Button Width="20" Content="28"/>
    <Button Width="20" Content="29"/>
    <Button Width="20" Content="30"/>
    <Button Width="20" Content="31"/>
    <Button Width="20" Content="32"/>
</StackPanel>

3，第三行也是一个StackPanel，内容也是水平排列的，即Orientation="Horizontal"

在这里插入图片描述

<StackPanel Grid.Row="2" Orientation="Horizontal">
    <Button Width="120" Content="FanucController.ini"/>
    <Button Width="130" Content="WpfApp1_Solution.sln"/>
    <Button Width="120" Content="WpfApp1.csproj"/>
    <Button Width="130" Content="0903SubProgram.LS"/>
</StackPanel>

4，第四行是一个Grid，由2列组成

左半部分是StackPanel，内容是水平排列的，即Orientation="Horizontal"
右半部分是TextBox
在这里插入图片描述

<Grid ShowGridLines="True" Grid.Row="3">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="20"/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>

    <StackPanel Grid.Column="0">
        <Button Height="20" Content="1"/>
        <Button Height="20" Content="2"/>
        <Button Height="20" Content="3"/>
        <Button Height="20" Content="4"/>
        <Button Height="20" Content="5"/>
        <Button Height="20" Content="6"/>
        <Button Height="20" Content="7"/>
        <Button Height="20" Content="8"/>
        <Button Height="20" Content="9"/>
    </StackPanel>

    <TextBox Grid.Column="1" TextWrapping="Wrap"/>
</Grid>

5，最后一行是一个Grid ，由9列组成

行和列标签里面的Width属性可以是Auto也可以指定，还可以给数值比例
<ColumnDefinition Width="Auto"/>

<ColumnDefinition Width="20"/>

<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="3*"/>
表示三列，共6份(1+2+3)，第一列占1份，第二列占2份，第三列占3份
在这里插入图片描述

<Grid ShowGridLines="True" Grid.Row="4">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>

    <Button Grid.Column="0" Content="Normal text file"/>
    <Button Grid.Column="1" Content="lentgh : 276,653"/>
    <Button Grid.Column="2" Content="lines : 8,803"/>
    <Button Grid.Column="3" Content="Ln : 1"/>
    <Button Grid.Column="4" Content="Col : 1"/>
    <Button Grid.Column="5" Content="Pos : 1"/>
    <Button Grid.Column="6" Content="Windows(CRLF)"/>
    <Button Grid.Column="7" Content="UTF-8"/>
    <Button Grid.Column="8" Content="INS"/>
</Grid>

6，完整代码&页面

在这里插入图片描述

<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="E:\normal_desk\desk\0903SubProgram.LS - Notepad++" Height="450" Width="800">
    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="20"/>
            <RowDefinition Height="20"/>
            <RowDefinition Height="20"/>
            <RowDefinition/>
            <RowDefinition Height="20"/>
        </Grid.RowDefinitions>

        <StackPanel Grid.Row="0" Orientation="Horizontal">
            <Button Width="50" Content="文件(F)"/>
            <Button Width="50" Content="编辑(E)"/>
            <Button Width="50" Content="搜索(S)"/>
            <Button Width="50" Content="视图(V)"/>
            <Button Width="50" Content="编码(N)"/>
            <Button Width="50" Content="语言(L)"/>
            <Button Width="50" Content="设置(T)"/>
            <Button Width="50" Content="工具(O)"/>
            <Button Width="50" Content="宏(M)"/>
            <Button Width="50" Content="运行(R)"/>
            <Button Width="50" Content="插件(P)"/>
            <Button Width="50" Content="窗口(W)"/>
            <Button Width="50" Content="？"/>
        </StackPanel>

        <StackPanel Grid.Row="1" Orientation="Horizontal">
            <Button Width="20" Content="1"/>
            <Button Width="20" Content="2"/>
            <Button Width="20" Content="3"/>
            <Button Width="20" Content="4"/>
            <Button Width="20" Content="5"/>
            <Button Width="20" Content="6"/>
            <Button Width="20" Content="7"/>
            <Button Width="20" Content="8"/>
            <Button Width="20" Content="9"/>
            <Button Width="20" Content="10"/>
            <Button Width="20" Content="11"/>
            <Button Width="20" Content="12"/>
            <Button Width="20" Content="13"/>
            <Button Width="20" Content="14"/>
            <Button Width="20" Content="15"/>
            <Button Width="20" Content="16"/>
            <Button Width="20" Content="17"/>
            <Button Width="20" Content="18"/>
            <Button Width="20" Content="19"/>
            <Button Width="20" Content="20"/>
            <Button Width="20" Content="21"/>
            <Button Width="20" Content="22"/>
            <Button Width="20" Content="23"/>
            <Button Width="20" Content="24"/>
            <Button Width="20" Content="25"/>
            <Button Width="20" Content="26"/>
            <Button Width="20" Content="27"/>
            <Button Width="20" Content="28"/>
            <Button Width="20" Content="29"/>
            <Button Width="20" Content="30"/>
            <Button Width="20" Content="31"/>
            <Button Width="20" Content="32"/>
        </StackPanel>

        <StackPanel Grid.Row="2" Orientation="Horizontal">
            <Button Width="120" Content="FanucController.ini"/>
            <Button Width="130" Content="WpfApp1_Solution.sln"/>
            <Button Width="120" Content="WpfApp1.csproj"/>
            <Button Width="130" Content="0903SubProgram.LS"/>
        </StackPanel>

        <Grid ShowGridLines="True" Grid.Row="3">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="20"/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>

            <StackPanel Grid.Column="0">
                <Button Height="20" Content="1"/>
                <Button Height="20" Content="2"/>
                <Button Height="20" Content="3"/>
                <Button Height="20" Content="4"/>
                <Button Height="20" Content="5"/>
                <Button Height="20" Content="6"/>
                <Button Height="20" Content="7"/>
                <Button Height="20" Content="8"/>
                <Button Height="20" Content="9"/>
            </StackPanel>

            <TextBox Grid.Column="1" TextWrapping="Wrap"/>
        </Grid>

        <Grid ShowGridLines="True" Grid.Row="4">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>

            <Button Grid.Column="0" Content="Normal text file"/>
            <Button Grid.Column="1" Content="lentgh : 276,653"/>
            <Button Grid.Column="2" Content="lines : 8,803"/>
            <Button Grid.Column="3" Content="Ln : 1"/>
            <Button Grid.Column="4" Content="Col : 1"/>
            <Button Grid.Column="5" Content="Pos : 1"/>
            <Button Grid.Column="6" Content="Windows(CRLF)"/>
            <Button Grid.Column="7" Content="UTF-8"/>
            <Button Grid.Column="8" Content="INS"/>
        </Grid>

    </Grid>
</Window>

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布