WPF：WPF原生布局说明

article/2025/10/12 21:37:18

前言

WPF在国内讨论度很小，我在这里记录一下WPF简单的原生控件是如何使用的，顺便回忆一下WPF的基础知识，有些忘记的比较厉害了

WPF简介

WPF是微软推出的桌面UI软件，是我觉得最早实现MVVM（数据驱动事务），比Vue早3,4年吧。当然讨论谁是第一个并没有意义，现在Vue如日中天，Vue+uniapp（uniapp是基于Vue开发的）基本实现了网页端到移动端全平台的UI解决方案。而桌面软件逐渐式微。注意，WPF只能在Windows环境下运行，Linux系统现在应该暂不支持

WPF目前状况

微软技术的特点就是，技术很牛B，但是容易断档。只管开发新技术，但是不管维护。WPF目前框架已经停止更新，微软现在主推的是MAUI，推出Windows桌面应用，Andorid,ios,macos跨端文件，一次生成，多端使用。WPF现在是工控领域比较多，工控领域主打的就是性能。

现在Ui框架情况

  • Vue：
    • Vue2.0：上手难度低，开发速度快
    • Vue3.0：效率更高，
    • uniapp（基于Vue开发）：在追求开发效率上和学习成本上，是国内目前的最优解
  • React：用的比较少，不评价。Web端两个大哥：Vue和React。React 有 React Active，也支持移动端开发。但是我也没接触过。
  • Angular：目前看已经没落了
  • Flutter：没用过，是Andriod和IOS跨端开发的框架，但是好像圈子比较小
  • QT：C++，专业工控领域，因为是C++所以可以实现对内存的完全操控，但是开发周期长，开发难度大。用来开发小项目就是大炮打蚊子。
  • C#/.NET
    • Winform：老东西，死而不僵。在工控领域，不追求UI界面美观，只要求能用。现在岗位也还是很多。
    • WPF:Winform的上位替代，使用XMAL，MVVM。用起来和Vue差不多。
    • Unity2d/3d：上限最高的Ui框架，用游戏的UI去做操作系统简直是降维打击。特别适合需要进行交互设计的软件。但是问题是大部分UI界面就是点点点，有点大材小用。

工控领域是特别讲究性能的地方。网页不太适合做工控领域的操作软件。工控领域的要求是：

  • 效率高：因为工控领域机器性能比较差，打开网页特别慢。
  • 兼容性好：有些工控机还是windows xp系统这种老东西。
  • 权限问题：网页的权限提升难度比较大。

ok,目前有些离题了，现在来介绍WPF原生相关知识

WPF原生介绍

微软官方文档
微软的文档写的真是垃圾在这里插入图片描述，我去微软上面搜WPF文档里面没有，给放到Windows Desktop里面了。我找了半天。还有就是有部分是机器翻译，你TM把元素名翻译了我怎么搜得到。Grid翻译成网格，我搜还没有这个类。
在这里插入图片描述

WPF布局

布局是最重要，因为后面单个元素组件我们可以通过Ui库来进行解决。

名称作用
Grid最基本的布局元素。通过Row和Col来对布局进行划分。有固定长度，比例长度，自动适应三种长度布局
UniformGrid均分布局。如果是9个按钮，就是33。如果是4个按钮，就是22。如果不是平方数，例如10个按钮，则是4*4的布局，然后是4+4+2。剩下的布局为空。
StackPanel无法自动换行的布局
WrapPanel会自动换行的布局
DockPanel停靠容器，类似于vs studio里面的侧边栏

Grid

Grid使用有一定的逻辑顺序

  • Grid
    • Gird.RowDefinitions：定义用于包裹RowDefinition
      • RowDefinition：定义有多少个RowDefinition
    • Grid.ColumnDefinitions：同上
      • ColumnDefinition
    • 元素

示例如下：

<Window x:Class="ModuleB.Views.ViewB"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:ModuleB.Views"mc:Ignorable="d"Title="ViewB" Height="450" Width="800"><Grid><Grid.RowDefinitions><RowDefinition /><RowDefinition /><RowDefinition /></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition /><ColumnDefinition /><ColumnDefinition /></Grid.ColumnDefinitions><TextBlock Text="我是默认"FontSize="50" /><TextBlock Text="我是第二个默认" TextWrapping="Wrap"FontSize="50" /><TextBlock Text="我是默认"FontSize="50" /><TextBlock Text="我是指定第二行第二列"FontSize="50"Grid.Row="2"Grid.Column="2"TextWrapping="Wrap" /></Grid>
</Window>

不指定的话，就默认第一格，这里可以看到两个文字重叠了

在这里插入图片描述

按比例修改

<Window x:Class="ModuleB.Views.ViewB"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:ModuleB.Views"mc:Ignorable="d"Title="ViewB" Height="450" Width="800"><Grid><Grid.RowDefinitions><RowDefinition Height="1*"/><RowDefinition Height="1*"/><RowDefinition Height="2*"/></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition Width="1*"/><ColumnDefinition Width="1*"/><ColumnDefinition Width="2*"/></Grid.ColumnDefinitions>............</Grid>
</Window>

在这里插入图片描述

固定大小

<Window x:Class="ModuleB.Views.ViewB"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:ModuleB.Views"mc:Ignorable="d"Title="ViewB" Height="450" Width="800"><Grid><Grid.RowDefinitions><RowDefinition Height="200"/><RowDefinition Height="100"/><RowDefinition /></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition Width="200"/><ColumnDefinition Width="100"/><ColumnDefinition /></Grid.ColumnDefinitions>.......</Grid>
</Window>

在这里插入图片描述

UniformGrid

自动分配，尽可能均匀分布，与长宽不管。例如4=2x2。9=3x3。如果是不能开方的就会向上取整，缺的就空着。例如8=3*3-1。
效果如下

4个

<Window x:Class="ModuleB.Views.ViewB"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:ModuleB.Views"mc:Ignorable="d"Title="ViewB" Height="450" Width="800"><UniformGrid><TextBox  Text="1" FontSize="50"/><TextBox  Text="2"FontSize="50" /><TextBox  Text="3"FontSize="50" /><TextBox  Text="4"FontSize="50" /></UniformGrid>
</Window>

在这里插入图片描述
9个

<Window x:Class="ModuleB.Views.ViewB"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:ModuleB.Views"mc:Ignorable="d"Title="ViewB" Height="450" Width="800"><UniformGrid><TextBox  Text="1" FontSize="50"/><TextBox  Text="2"FontSize="50" /><TextBox  Text="3"FontSize="50" /><TextBox  Text="4"FontSize="50" /><TextBox  Text="5"FontSize="50" /><TextBox  Text="6"FontSize="50" /><TextBox  Text="7"FontSize="50" /><TextBox  Text="8"FontSize="50" /><TextBox  Text="9"FontSize="50" /></UniformGrid>
</Window>

在这里插入图片描述
8个

<Window x:Class="ModuleB.Views.ViewB"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:ModuleB.Views"mc:Ignorable="d"Title="ViewB" Height="450" Width="800"><UniformGrid><TextBox  Text="1" FontSize="50"/><TextBox  Text="2"FontSize="50" /><TextBox  Text="3"FontSize="50" /><TextBox  Text="4"FontSize="50" /><TextBox  Text="5"FontSize="50" /><TextBox  Text="6"FontSize="50" /><TextBox  Text="7"FontSize="50" /><TextBox  Text="8"FontSize="50" /></UniformGrid>
</Window>

在这里插入图片描述

StackPanel

单方向布局，配合Orientation 使用，默认纵向布局.长宽会自动拉伸填满

<Window x:Class="ModuleB.Views.ViewB"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:ModuleB.Views"mc:Ignorable="d"Title="ViewB"Height="450"Width="800"><Grid><Grid.ColumnDefinitions><ColumnDefinition /><ColumnDefinition /></Grid.ColumnDefinitions><StackPanel Orientation="Horizontal"><Button Content="按钮"FontSize="50" /><Button Content="按钮"FontSize="50" /><Button Content="按钮"FontSize="50" /><Button Content="按钮"FontSize="50" /><Button Content="按钮"FontSize="50" /></StackPanel><StackPanel Grid.Column="1"><Button Content="按钮"FontSize="50" /><Button Content="按钮"FontSize="50" /><Button Content="按钮"FontSize="50" /><Button Content="按钮"FontSize="50" /><Button Content="按钮"FontSize="50" /></StackPanel></Grid></Window>

在这里插入图片描述

WrapPanel

自动换行布局,也可以指定排版方向

<Window x:Class="ModuleB.Views.ViewB"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:ModuleB.Views"mc:Ignorable="d"Title="ViewB" Height="450" Width="800"><Grid><Grid.ColumnDefinitions><ColumnDefinition /><ColumnDefinition /></Grid.ColumnDefinitions><WrapPanel><Button Content="按钮"FontSize="50" /><Button Content="按钮"FontSize="50" /><Button Content="按钮"FontSize="50" /><Button Content="按钮"FontSize="50" /><Button Content="按钮"FontSize="50" /><Button Content="按钮"FontSize="50" /><Button Content="按钮"FontSize="50" /><Button Content="按钮"FontSize="50" /><Button Content="按钮"FontSize="50" /></WrapPanel><WrapPanel Orientation="Vertical" Grid.Column="1"><Button Content="按钮"FontSize="50" /><Button Content="按钮"FontSize="50" /><Button Content="按钮"FontSize="50" /><Button Content="按钮"FontSize="50" /><Button Content="按钮"FontSize="50" /><Button Content="按钮"FontSize="50" /><Button Content="按钮"FontSize="50" /><Button Content="按钮"FontSize="50" /><Button Content="按钮"FontSize="50" /></WrapPanel></Grid>
</Window>

在这里插入图片描述

DockPanel

停靠布局，使用DockPanel.Dock指定停靠方向

默认设置

<Window x:Class="ModuleB.Views.ViewB"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:ModuleB.Views"mc:Ignorable="d"Title="ViewB"Height="450"Width="800"><DockPanel ><Button DockPanel.Dock="Top"Content=" Top" FontSize="50"/><Button DockPanel.Dock="Left"Content="Left"FontSize="50" /><Button DockPanel.Dock="Right"Content=" Right"FontSize="50" /><Button DockPanel.Dock="Bottom"Content=" Bottom"FontSize="50" /><Button Content=" Center"FontSize="50" /></DockPanel></Window>

在这里插入图片描述
放置顺序会影响覆盖逻辑

<Window x:Class="ModuleB.Views.ViewB"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:ModuleB.Views"mc:Ignorable="d"Title="ViewB"Height="450"Width="800"><DockPanel ><Button DockPanel.Dock="Bottom"Content=" Bottom"FontSize="50" /><Button DockPanel.Dock="Left"Content="Left"FontSize="50" /><Button DockPanel.Dock="Top"Content=" Top" FontSize="50"/><Button DockPanel.Dock="Right"Content=" Right"FontSize="50" /><Button Content=" Center"FontSize="50" /></DockPanel></Window>

在这里插入图片描述
最后一个元素不填满布局

<Window x:Class="ModuleB.Views.ViewB"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:ModuleB.Views"mc:Ignorable="d"Title="ViewB"Height="450"Width="800"><DockPanel  LastChildFill="False"><Button DockPanel.Dock="Top"Content=" Top" FontSize="50" /><Button DockPanel.Dock="Left"Content="Left"FontSize="50" /><Button DockPanel.Dock="Right"Content=" Right"FontSize="50" /><Button DockPanel.Dock="Bottom"Content=" Bottom"FontSize="50" /><Button Content=" Center"FontSize="50" /></DockPanel></Window>

在这里插入图片描述


http://chatgpt.dhexx.cn/article/PWCttg3I.shtml

相关文章

WPF界面美化（整体作用到控件），一步步教你使用FirstFloor.ModernUI

WPF界面美化（整体作用到控件），一步步教你使用FirstFloor.ModernUI

开发工具&#xff1a;VS2015 1、获取相关DLL(通过NuGet或者GitHub上下载的源码中获得)&#xff0c;并在项目中添加引用 FirstFloor.ModernUI.dll Microsoft.Windows.Shell.dll UIShell.OSGi(这个是我运行程序时报的错误"未能加载文件或程序集"&#xff0c;然后在…
阅读更多...
WPF 极简风格登录界面

WPF 极简风格登录界面

UI使用MaterialDesign&#xff0c;先看界面 一、界面 极简登录界面 二、下载MaterialDesign包 我使用的是VS2019&#xff0c;选择要引入MaterialDesign包的项目&#xff0c;鼠标右击选择NuGet程勋包 在浏览页签中输入MaterialDesign&#xff0c;下载MaterialDesignColors和Ma…
阅读更多...
WPF绘制自定义窗口

WPF绘制自定义窗口

简介&#xff1a; 原文:WPF绘制自定义窗口 WPF是制作界面的一大利器&#xff0c;下面就用WPF模拟一下360的软件管理界面&#xff0c;360软件管理界面如下&#xff1a; 界面不难&#xff0c;主要有如下几个要素&#xff1a; 窗体的圆角 自定义标题栏及按钮 自定义状态栏 窗体的半…
阅读更多...
WPF简单UI菜单设计

WPF简单UI菜单设计

UI效果如下&#xff1a; XAML 设计&#xff1a; <Window x:Class"简单菜单设计.MainWindow"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d"http://…
阅读更多...
WPF真入门教程05--UI布局2

WPF真入门教程05--UI布局2

这一节&#xff0c;来学习下ComboBox下拉框&#xff0c;Border边框控件&#xff0c;Image图片控件&#xff0c;CheckBox复选框&#xff0c; 这些发挥着不同的作用&#xff0c;是布局基础组成部分&#xff0c;从左侧拖控件到右边&#xff0c;完成以下代码&#xff1a; <Wind…
阅读更多...
WPF基本介绍

WPF基本介绍

WPF基本介绍 WPF&#xff08;Windows Presentation Foundation&#xff09;是&#xff08;微软推出的&#xff09;基于Windows的用户界面框架&#xff0c;属于.NET Framework 3.0的一部分。WPF提供了统一的编程模型&#xff0c;语言和框架&#xff0c;做到了分离界面设计人员与…
阅读更多...
WPF UI介面的革新

WPF UI介面的革新

透過 Microsoft 對 Windows Vista 及 WPF 的強力行 銷&#xff0c;相信許多讀者對於WPF的UI能力只有驚豔二字可以形容&#xff0c;對於如何使用WPF來達到這些效果&#xff0c;基於雜誌與網路上已有相當多的文章討論&#xff0c;筆者於此就不再重述了&#xff0c;直接將主軸放在…
阅读更多...
WPF界面设计—撸大师

WPF界面设计—撸大师

WPF界面设计，模仿了金山卫士，360，鲁大师的界面！ <!--无边框窗体--><Style x:Key="NoResize_window" TargetType="{x:Type Window}"> <Setter Property="AllowsTransparency" Value="true"/> <Setter Prope…
阅读更多...
WPF - 简单的UI框架

WPF - 简单的UI框架

实现了一个简单的WPF应用程序UI框架 &#xff0c;分享出来。界面效果图如下&#xff1a; 运行效果如下&#xff1a; 打算持续更新&#xff0c;将左侧面板所有功能模块全给实现了。 喜欢的可以下载源码体验&#xff1a;https://github.com/DuelWithSelf/WPFEffects 左侧分类导览…
阅读更多...
WPF真入门教程04--UI布局1

WPF真入门教程04--UI布局1

大家都知道&#xff1a;UI是做好一个软件很重要的因素&#xff0c;如果没有一个漂亮的UI&#xff0c;功能做的再好也无法吸引很多用户使用&#xff0c;而且没有漂亮的界面&#xff0c;那么普通用户会感觉这个软件没有多少使用价值。 WPF系统基于流布局的标准&#xff0c;开发人…
阅读更多...
WPF UI界面控件篇

WPF UI界面控件篇

WPF UI界面控件篇 布局控件&#xff1a;是任何用户界面的基础&#xff0c;排列应用中的 UI 元素。 文本、按钮和图像等元素都需要规定自己位置和行为方式&#xff0c;构建基块称为“控件”&#xff0c;有时亦称为“元素”。 <Window x:Class"UsingLayoutsApp.Wpf.Mai…
阅读更多...
WPF（一） WPF基本控件与布局

WPF（一） WPF基本控件与布局

​ WPF&#xff08;Windows Presentation Foundation&#xff09;是微软推出的基于Windows的用户界面框架&#xff0c;中文译为“Windows呈现基础”&#xff0c;属于.NET Framework 3.0的一部分。WPF类似于WinForm技术框架&#xff0c;但是相比于WinForm&#xff0c;WPF对大部分…
阅读更多...
WPF炫酷界面设计

WPF炫酷界面设计

一.效果展示&#xff08;多层次&#xff09; 二.制作流程 1.在vs2012中建立一个wpf程序 2.建立一个主页面&#xff08;.cs&#xff09;(注&#xff1a;C#程序每一个页面都由两个文件构成一个axml一个cs&#xff0c;一个前端文件一个后台文件) 3.在主页面中添加按钮&#xff0c;…
阅读更多...
WPF界面设计工具---Blend学习（一）

WPF界面设计工具---Blend学习（一）

文章目录 前言一.初用Blend之喜二.使用Blend1.Blend工具版本 前言 最近在空闲时间学习WPF界面设计工具Blend&#xff0c;之前写WPF的界面都是完全依靠手敲代码的方式&#xff0c;这种方式往往很低效率而且很难做到一些复杂的效果。比如动画&#xff0c;手敲代码实现动画的话&a…
阅读更多...
C# WPF 一个设计界面

C# WPF 一个设计界面

微信公众号&#xff1a;Dotnet9&#xff0c;网站&#xff1a;Dotnet9&#xff0c;问题或建议&#xff1a;请网站留言&#xff0c; 如果对您有所帮助&#xff1a;欢迎赞赏。 C# WPF 一个设计界面 今天正月初三&#xff0c;大家在家呆着挺好&#xff0c;不要忘了自我充电。 武汉…
阅读更多...
WPF界面设计

WPF界面设计

目录 1.设计一个优美的注册界面1.实现效果2.代码展示 2.简易登录按钮设计1.实现效果2.代码展示 3.设计一个优美的注册登录界面&#xff08;连接数据库&#xff09;1.实现效果2.代码展示 4.设计一个简单的在线教育系统界面1.实现效果2.代码展示 5. 设计一个Dashboard1.实现效果2…
阅读更多...
WPF实例系列一：登录、注册界面设计

WPF实例系列一：登录、注册界面设计

WPF实例系列一&#xff1a;登录、注册界面设计 文章目录 WPF实例系列一&#xff1a;登录、注册界面设计前言一、实例演示1. 登录界面展示2. 注册界面展示3. 数据存储4. 效果演示 二、结构及源码1.主界面跳转登录界面设计2.登录界面设计3.注册界面设计4.Excel保存数据类设计5.源…
阅读更多...
C# WPF界面设计参考 工控机上位机界面 美观炫酷的现代化风格界面设计实际案例分享 界面设计代码

C# WPF界面设计参考 工控机上位机界面 美观炫酷的现代化风格界面设计实际案例分享 界面设计代码

1.动图效果展示 2.界面1 3.界面2 4.界面3 需要界面效果代码的可留言联系博主
阅读更多...
WPF界面设计学习

WPF界面设计学习

github上发现了一个不错的项目&#xff1a; https://github.com/HenJigg/wpf-uidesign 还配有B站的学习视频&#xff1a; https://space.bilibili.com/32497462 看了这个项目&#xff0c;觉得自己学了这么多年的WPF&#xff0c;界面还设计的这么丑&#xff0c;顿时脸都不知道往…
阅读更多...
C# WPF十个美观的界面设计展示

C# WPF十个美观的界面设计展示

概述 很多时候&#xff0c;我们设计的界面总是感觉缺乏美感&#xff0c;不是我们不会开发好看的界面&#xff0c;而是不知道怎么才算美观&#xff0c;这时候我们不妨看看别人好的页面是怎么做的.下面展示一些我觉得做的比较好的cs界面&#xff0c;希望能给大家在平时做界面设计…
阅读更多...
推荐文章

Copyright @ 2022~2023