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

该博文参考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>