浅谈WPF之UI布局

一个成功的软件,离不开人性化的UI设计,如何抓住用户第一视觉,让用户产生依赖感,合适优雅的布局必不可少。本文以一些简单的小例子,简述WPF中布局 面板 控件的使用,仅供学习分享使用,如有不足之处,还请指正。

图片

涉及知识点

在WPF中,关于布局面板控件,主要有以下几种:

  1. StackPanel栈面板,可以将元素排列成一行或者一列。其特点是:每个元素各占一行或者一列。

  2. WrapPanel环绕面板,将各个控件从左至右按照行或列的顺序罗列,当长度或高度不够时就会自动调整进行换行后续排序按照从上至下或从左至右的顺序进行。

  3. DockPanel停靠面板,定义一个区域,在此区域中,您可以使子元素通过描点的形式排列这些对象位于 Children 属性中。

  4. Grid网格面板, Grid顾名思义就是“网格”,以表格形式布局元素,对于整个面板上的元素进行布局,它的子控件被放在一个一个事先定义好的小格子里面,整齐配列Grid和其他各个Panel比较起来,功能最多也最为复杂。

  5. Canvas画布面板,画布,用于完全控制每个元素的精确位置他是布局控件中最为简单的一种,直接将元素放到指定位置,主要来布置图面。

StackPanel【栈面板】

栈面板,可以将元素排列成一行或者一列,其特点是:每个元素各占一行或者一列

Orientation属性指定排列方式:

  1. Vertical(垂直)【默认】,垂直排列时,每个元素都与面板一样宽。

  2. Horizontal(水平),水平排列时,每个元素都与面板一样高;

如果包含的元素超过了面板空间,它只会截断多出的内容。元素的Margin属性用于使元素之间产生一定得间隔,当元素空间大于其内容的空间时,剩余空间将由HorizontalAlignment和 VerticalAlignment属性来决定如何分配。

Vertical(垂直),默认情况下,每一个元素都与面板一样宽,如下所示:

图片

 示例代码,如下所示:

<Window x:Class="WpfApp1.SecondWindow"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="StackPanel示例" Height="450" Width="500"><StackPanel Margin="5,5,5,5"><Button x:Name="button1" Content="第一个按钮" Margin="2,5,2,5"></Button><Button x:Name="button2" Content="第二个按钮" Margin="2,5,2,5"></Button><Button x:Name="button3" Content="第三个按钮" Margin="2,5,2,5"></Button><Button x:Name="button4" Content="第四个按钮" Margin="2,5,2,5"></Button><Button x:Name="button5" Content="第五个按钮" Margin="2,5,2,5"></Button><Button x:Name="button6" Content="第六个按钮" Margin="2,5,2,5"></Button><Button x:Name="button7" Content="第七个按钮" Margin="2,5,2,5"></Button></StackPanel>
</Window>

Horizontal(水平),水平排列时,每个元素都与面板一样高。如下所示:

图片

示例代码,与垂直排列相同,只是多了一个Oriention属性,如下所示:

<StackPanel Margin="5,5,5,5" Orientation="Horizontal"><Button x:Name="button1" Content="第一个按钮" Margin="2,5,2,5"></Button><Button x:Name="button2" Content="第二个按钮" Margin="2,5,2,5"></Button><Button x:Name="button3" Content="第三个按钮" Margin="2,5,2,5"></Button><Button x:Name="button4" Content="第四个按钮" Margin="2,5,2,5"></Button><Button x:Name="button5" Content="第五个按钮" Margin="2,5,2,5"></Button><Button x:Name="button6" Content="第六个按钮" Margin="2,5,2,5"></Button><Button x:Name="button7" Content="第七个按钮" Margin="2,5,2,5"></Button>
</StackPanel>

StackPanel其他常用属性:

  1. HorizontalAlignment:水平对齐方式,值:Left,Center,Right,Stretch。

  2. VerticalAlignment:垂直对齐方式,值:Bottom , Center,Stretch,Top。

  3. Visibility:设置StackPanel是否可见,值:Visible,Hidden,Collapsed。

  4. Background:设置背景颜色,值为Bursh类型的枚举值。

  5. Width,Height,MinWidth,MinHeight,MaxWidth,MaxHeight:分别用来设置StackPanel的宽,高,最小宽,最小高,最大宽,最大高。

WrapPanel【环绕面板】

WrapPanel布局面板将各个控件从左至右按照行或列的顺序罗列,当长度或高度不够时就会自动调整进行换行后续排序按照从上至下或从左至右的顺序进行。

水平排列:当Orientation属性的值设置为 Horizontal:元素是从左向右排列的,然后自上至下自动换行。如下所示:

图片

 示例源码所示:

<Window x:Class="WpfApp1.ThirdWindow"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="WrapPanel示例" Height="450" Width="400"><WrapPanel Margin="5,5,5,5"><Button x:Name="button1" Content="第一个按钮" Margin="2,5,2,5"></Button><Button x:Name="button2" Content="第二个按钮" Margin="2,5,2,5"></Button><Button x:Name="button3" Content="第三个按钮" Margin="2,5,2,5"></Button><Button x:Name="button4" Content="第四个按钮" Margin="2,5,2,5"></Button><Button x:Name="button5" Content="第五个按钮" Margin="2,5,2,5"></Button><Button x:Name="button6" Content="第六个按钮" Margin="2,5,2,5"></Button><Button x:Name="button7" Content="第七个按钮" Margin="2,5,2,5"></Button></WrapPanel>
</Window>

垂直排列:默认为水平排列,通过设置WrapPanel的Orientation属性为Vertical,可以修改排列方向,垂直排列,如下所示:

图片

 示例源码如下所示:

<WrapPanel Margin="5,5,5,5" Orientation="Vertical"><Button x:Name="button1" Content="第一个按钮" Margin="2,5,2,5" Height="40"></Button><Button x:Name="button2" Content="第二个按钮" Margin="2,5,2,5" Height="40"></Button><Button x:Name="button3" Content="第三个按钮" Margin="2,5,2,5" Height="40"></Button><Button x:Name="button4" Content="第四个按钮" Margin="2,5,2,5" Height="40"></Button><Button x:Name="button5" Content="第五个按钮" Margin="2,5,2,5" Height="40"></Button><Button x:Name="button6" Content="第六个按钮" Margin="2,5,2,5" Height="40"></Button><Button x:Name="button7" Content="第七个按钮" Margin="2,5,2,5" Height="40"></Button></WrapPanel>

WrapPanel其他常用属性,除了StackPanel属性常用属性,还有两个,如下所示:

  1. ItemHeight:所有的元素都相同高度。

  2. ItemWidth:所有的元素都相同宽度。

其他子元素设置的属性,如果大于ItemHeight,ItemWidth的值,则被截取。如下所示:

 源码如下所示:

<WrapPanel Margin="5,5,5,5" Orientation="Vertical" ItemHeight="30" ItemWidth="100"><Button x:Name="button1" Content="第一个按钮" Margin="2,5,2,5" Height="40"></Button><Button x:Name="button2" Content="第二个按钮" Margin="2,5,2,5" Height="40"></Button><Button x:Name="button3" Content="第三个按钮" Margin="2,5,2,5" Height="40"></Button><Button x:Name="button4" Content="第四个按钮" Margin="2,5,2,5" Height="40"></Button><Button x:Name="button5" Content="第五个按钮" Margin="2,5,2,5" Height="40"></Button><Button x:Name="button6" Content="第六个按钮" Margin="2,5,2,5" Height="40"></Button><Button x:Name="button7" Content="第七个按钮" Margin="2,5,2,5" Height="40"></Button></WrapPanel>

DockPanel【停靠面板】

DockPanel定义一个区域,在此区域中,您可以使子元素通过描点的形式排列,这些对象位于 Children 属性中。停靠面板类似于WinForm中控件的Dock属性。DockPanel会对每个子元素进行排序,并将根据指定的边进行停靠,多个停靠在同侧的元素则按顺序排序。在DockPanel中,指定停靠边的控件,会根据定义的顺序占领边角,所有控件绝不会交叠。

默认情况下,所有子元素都是靠左停靠【DockPanel.Dock=Left】

图片

可以单独设置每一个子元素的Dock属性,如下所示:

图片

示例源码如下所示:

<Window x:Class="WpfApp1.FourWindow"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="DockPanel示例" Height="450" Width="600"><DockPanel LastChildFill="True" ><Button x:Name="button1" Content="第一个按钮" Margin="2,5,2,5" DockPanel.Dock="Left"></Button><Button x:Name="button2" Content="第二个按钮" Margin="2,5,2,5" DockPanel.Dock="Top"></Button><Button x:Name="button3" Content="第三个按钮" Margin="2,5,2,5" DockPanel.Dock="Right"></Button><Button x:Name="button4" Content="第四个按钮" Margin="2,5,2,5" DockPanel.Dock="Bottom"></Button><Button x:Name="button5" Content="第五个按钮" Margin="2,5,2,5" DockPanel.Dock="Left"></Button><Button x:Name="button6" Content="第六个按钮" Margin="2,5,2,5" DockPanel.Dock="Top"></Button><Button x:Name="button7" Content="第七个按钮" Margin="2,5,2,5" DockPanel.Dock="Right"></Button><Button x:Name="button8" Content="第八个按钮" Margin="2,5,2,5" DockPanel.Dock="Bottom"></Button><Button x:Name="button9" Content="第九个按钮" Margin="2,5,2,5"></Button></DockPanel>
</Window>

注意:在DockPanel中,元素的先后顺序很重要,关系着元素是否“顶边”。

 DockPanel其他常用属性,除了StackPanel属性常用属性,还有一个,如下所示:

  1. LastChildFill:最后一个子元素,是否填充剩余空间,默认为True。

Grid【网格面板】

Grid顾名思义就是“网格”,以表格形式布局元素,对于整个面板上的元素进行布局,它的子控件被放在一个一个事先定义好的小格子里面,整齐配列。Grid和其他各个Panel比较起来,功能最多也最为复杂。

要使用Grid,首先要向RowDefinitions和ColumnDefinitions属性中添加一定数量的RowDefinitions和 ColumnDefinitions元素,从而定义行数和列数。

而放置在Grid面板中的控件元素都必须显示采用Row和Column附加属性定义其放置所在的行和列,这两个属性的值都是从0开始的索引数如果没有显式设置任何行或列,Grid将会隐式地将控件加入在第0行第0列。

由于Grid的组成并非简单的添加属性标记来区分行列,这也使得用户在实际应用中可以具体到某一单 元格中,所以布局起来就很精细了。 

Grid的单元格可以是空的,一个单元格中可以有多个元素,而在单元格中元素是根据它们的Z顺序一个接着一个呈现的。

Grid面板将元素分割到不可见的行列网格中。尽管可以在一个单元格中放置多个元素(这时这些元素会相互重叠),但在每个单元格中只放置一个元素通常更合理。当然,在Grid单元格中的元素本身也可能是另一个容器,该容器组织它所包含的一组控件。

默认情况下,如果不设置Grid面板的行列宽,与高,则默认均分,且如果不显示设置子元素的大小,则默认填充,如下所示:

 

图片

 示例代码,如下所示:

<Window x:Class="WpfApp1.FiveWindow"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="GridPanel示例" Height="450" Width="700"><Grid><Grid.RowDefinitions><RowDefinition></RowDefinition><RowDefinition></RowDefinition><RowDefinition></RowDefinition></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition></ColumnDefinition><ColumnDefinition></ColumnDefinition><ColumnDefinition></ColumnDefinition></Grid.ColumnDefinitions><Button x:Name="button1" Content="第一个按钮" Margin="2,5,2,5" Grid.Row="0" Grid.Column="0"></Button><Button x:Name="button2" Content="第二个按钮" Margin="2,5,2,5" Grid.Row="0" Grid.Column="1"></Button><Button x:Name="button3" Content="第三个按钮" Margin="2,5,2,5" Grid.Row="0" Grid.Column="2"></Button><Button x:Name="button4" Content="第四个按钮" Margin="2,5,2,5" Grid.Row="1" Grid.Column="0"></Button><Button x:Name="button5" Content="第五个按钮" Margin="2,5,2,5" Grid.Row="1" Grid.Column="1"></Button><Button x:Name="button6" Content="第六个按钮" Margin="2,5,2,5" Grid.Row="1" Grid.Column="2"></Button><Button x:Name="button7" Content="第七个按钮" Margin="2,5,2,5" Grid.Row="2" Grid.Column="0"></Button><Button x:Name="button8" Content="第八个按钮" Margin="2,5,2,5" Grid.Row="2" Grid.Column="1"></Button><Button x:Name="button9" Content="第九个按钮" Margin="2,5,2,5" Grid.Row="2" Grid.Column="2"></Button></Grid></Window>

Grid行高与列宽设置

列宽和行高,分别可以在ColumnDefinition、RowDefinition里面指定Width、Height的值。

设置宽与高的几种方式:

  1. 固定值:设置具体的数字,单位为像素px。

  2. Auto:根据子元素的大小,自动分配大小,刚好能够容纳子元素的内容。

  3. 星号*:根据比例自动分配剩余空间。

行高列宽设置示例

图片

示例源码如下所示:

<Grid><Grid.RowDefinitions><RowDefinition Height="1*"></RowDefinition><RowDefinition Height="2*"></RowDefinition><RowDefinition Height="3*"></RowDefinition></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition Width="1*"></ColumnDefinition><ColumnDefinition Width="2*"></ColumnDefinition><ColumnDefinition Width="3*"></ColumnDefinition></Grid.ColumnDefinitions><Button x:Name="button1" Content="第一个按钮" Margin="2,5,2,5" Grid.Row="0" Grid.Column="0"></Button><Button x:Name="button2" Content="第二个按钮" Margin="2,5,2,5" Grid.Row="0" Grid.Column="1"></Button><Button x:Name="button3" Content="第三个按钮" Margin="2,5,2,5" Grid.Row="0" Grid.Column="2"></Button><Button x:Name="button4" Content="第四个按钮" Margin="2,5,2,5" Grid.Row="1" Grid.Column="0"></Button><Button x:Name="button5" Content="第五个按钮" Margin="2,5,2,5" Grid.Row="1" Grid.Column="1"></Button><Button x:Name="button6" Content="第六个按钮" Margin="2,5,2,5" Grid.Row="1" Grid.Column="2"></Button><Button x:Name="button7" Content="第七个按钮" Margin="2,5,2,5" Grid.Row="2" Grid.Column="0"></Button><Button x:Name="button8" Content="第八个按钮" Margin="2,5,2,5" Grid.Row="2" Grid.Column="1"></Button><Button x:Name="button9" Content="第九个按钮" Margin="2,5,2,5" Grid.Row="2" Grid.Column="2"></Button>
</Grid>

Grid面板其他属性,除了StackPanel属性常用属性,还有两个,如下所示:

  1. Grid.ColumnSpan:用于设置元素跨越的单元格列数。

  2. Grid.RowSpan:用于设置元素跨越的单元格行数。

Canvas【画布面板】

画布,用于完全控制每个元素的精确位置。他是布局控件中最为简单的一种,直接将元素放到指定位置,主要来布置图面

使用Canvas,必须指定一个子元素的位置(相对于画布),否则所有元素都将出现在画布的左上角。如果Canvas是窗口主元素(即最外层的布局面板是Canvas),用户改变窗口大小时,Canvas也会随之变化,子元素的位置也会随之移动,以保证相对于Canvas的位置属性不变。

Canvas通过设置Left,Top,Bottom,Right等属性的值,来设置子元素的位置。如下所示:

图片

示例源码,如下所示:

<Window x:Class="WpfApp1.SixWindow"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="Canvas面板示例" Height="500" Width="500"><Canvas><Button x:Name="button1" Content="第一个按钮" Margin="2,5,2,5" Canvas.Left="0" Canvas.Top="0"></Button><Button x:Name="button2" Content="第二个按钮" Margin="2,5,2,5" Canvas.Left="50" Canvas.Top="50"></Button><Button x:Name="button3" Content="第三个按钮" Margin="2,5,2,5" Canvas.Left="100" Canvas.Top="100"></Button><Button x:Name="button4" Content="第四个按钮" Margin="2,5,2,5" Canvas.Left="150" Canvas.Top="150"></Button><Button x:Name="button5" Content="第五个按钮" Margin="2,5,2,5" Canvas.Left="200" Canvas.Top="200"></Button><Button x:Name="button6" Content="第六个按钮" Margin="2,5,2,5" Canvas.Left="250" Canvas.Top="250"></Button><Button x:Name="button7" Content="第七个按钮" Margin="2,5,2,5" Canvas.Left="300" Canvas.Top="300"></Button><Button x:Name="button8" Content="第八个按钮" Margin="2,5,2,5" Canvas.Left="350" Canvas.Top="350"></Button><Button x:Name="button9" Content="第九个按钮" Margin="2,5,2,5" Canvas.Left="400" Canvas.Top="400"></Button></Canvas>
</Window>

注意:要说明一点Canvas内的子控件不能使用两个以上的Canvas附加属性如果同时设置Canvas.Left和Canvas.Right属性,那么后者将会被忽略。

Canvas的其他属性,除了StackPanel的常用属性外,还有两个属性,如下所示:

  1. ClipToBounds:超出边界部分,是否需要进行剪裁。

  2. Panel.ZIndex:用于设置子元素在Z方向上的顺序,值越大,越靠上。如果两个元素重叠,则ZIndex值小的将会被覆盖。

以上就是【浅谈WPF之UI布局】的全部内容,关于更多详细内容,可参考官方文档。希望能够一起学习,共同进步。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/646447.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AWS 云监控工具

Amazon Web Services&#xff08;AWS&#xff09;是 Amazon 提供的云计算平台&#xff0c;为企业提供技术服务&#xff0c;包括计算能力、存储和数据库。借助 AWS&#xff0c;企业无需购买、拥有或维护物理数据中心和服务器&#xff0c;而 AWS 的即用即付方法使企业能够避免与 …

vcruntime140.dll找不到的多种解决方法分享,修复vcruntime140.dll文件

当操作电脑软件的过程中弹出一个错误提示“vcruntime140.dll已加载,但找不到入口点”&#xff0c;这通常意味着程序所依赖的vcruntime140.dll文件可能已经丢失、遭到破坏&#xff0c;或者该文件的路径及位置在软件开发时未被正确配置。此外&#xff0c;这种情况还有可能是因为电…

Windows11 Copilot助手开启教程(免费GPT-4)

Windows11上开启Copilot助手教程踩坑指南 Copilot介绍Copilot开启步骤1、更新系统2、更改语言和区域3、下载 ViVeTool 工具4、开启Copilot 使用 Copilot介绍 Windows Copilot 是 Windows 11 中的一个新功能&#xff0c;它可以让你与一个智能助理进行对话&#xff0c;获取信息&…

应用协议漏洞

应用协议漏洞 一、rsync rsync是Linux下一款数据备份工具&#xff0c;支持通过rsync协议、ssh协议进行远程文件传输。其中rsync协议默认监听873端口 1.未授权访问 打开靶场 判断漏洞是否存在 rsync rsync://目标ip:端口读取文件 rsync rsync://47.99.49.128:873/src/tmp/下…

浏览器打开本地应用和程序制作安装包

1、引言 最近使用python开发一款windows应用&#xff0c;有一个需求是从浏览器打开本地应用。从网上查到可以通过注册表的方法完成需求。所以就需要往注册表写内容。因此应用需要在安装的时候写注册表。 2、安装包制作工具&#xff1a;NSISVNISEdit NSIS可以制作安装包&…

JVM内存问题排查

本文又名《对JVM一窍不通的我快速开始排查应用内存问题》。主要系统性地整理了排查思路&#xff0c;为大家遇到问题时提供全面的排查流程&#xff0c;不至于漏掉某些可能性误入歧途浪费时间。 基本原则 由于本文的定位是Cookbook,基本原则是让整个流程能够系统化规范化的同时将…

Vue2学习之第六、七章——vue-router与ElementUI组件库

路由 理解&#xff1a; 一个路由&#xff08;route&#xff09;就是一组映射关系&#xff08;key - value&#xff09;&#xff0c;多个路由需要路由器&#xff08;router&#xff09;进行管理。前端路由&#xff1a;key是路径&#xff0c;value是组件。 1.基本使用 安装vue-…

李沐《动手学深度学习》深度学习计算

系列文章 李沐《动手学深度学习》预备知识 张量操作及数据处理 李沐《动手学深度学习》预备知识 线性代数及微积分 李沐《动手学深度学习》线性神经网络 线性回归 李沐《动手学深度学习》线性神经网络 softmax回归 李沐《动手学深度学习》多层感知机 模型概念和代码实现 李沐《…

使用 LinkAi 打造自己的知识库和数字人

其他系列文章导航 Java基础合集数据结构与算法合集 设计模式合集 多线程合集 分布式合集 ES合集 文章目录 其他系列文章导航 文章目录 前言 一、LinkAi 介绍 二、文档库 2.1 创建知识库 2.2 配置知识库 2.3 Ai配置 2.4 导入文档 2.5 接入微信 三、扩展 四、总结…

结合CSS一些样式属性和属性值进行案例演示

案例演示 图1 1.结构分析 文字部分用<p>标签定义&#xff0c;对于特殊显示的文本&#xff08;如导语、详情&#xff09;等可以用<em>、<strong>等格式化标签来定义&#xff0c;效果图如图2。 图2 2.样式分析 &#xff08;1&#xff09;控制段落文本的字体…

一种改进的小龙虾优化算法大|Crayfish optimization algorithm(COA)|首次公开—原创代码

1、简介 本文介绍一种新的全局优化算法——小龙虾优化算法Crayfish optimization algorithm&#xff08;COA&#xff09;&#xff0c;模拟了小龙虾的避暑行为、竞争行为和觅食行为。该成果于2023年9月最新发表在Artifcial Intelligence Review。 COA的灵感来自小龙虾的避暑、…

springboot农机电招平台源码和论文

随着农机电招行业的不断发展&#xff0c;农机电招在现实生活中的使用和普及&#xff0c;农机电招行业成为近年内出现的一个新行业&#xff0c;并且能够成为大群众广为认可和接受的行为和选择。设计农机电招平台的目的就是借助计算机让复杂的销售操作变简单&#xff0c;变高效。…

异常检测(Anomaly Detection)

1.问题的动机 什么是异常检测呢&#xff1f;为了解释这个概念&#xff0c;让我举一个例子吧&#xff1a; 假想你是一个飞机引擎制造商&#xff0c;当你生产的飞机引擎从生产线上流出时&#xff0c;你需要进行QA(质量控制测试)&#xff0c;而作为这个测试的一部分&#xff0c;你…

CSS自适应分辨率 postcss-pxtorem(适用于 Vite)

前言 此篇是基于 Vite Vu3 项目的 CSS 自适应分辨率&#xff01; 如果想知道基于 Webpack Vue2 可移步 《CSS自适应分辨率 amfe-flexible 和 postcss-pxtorem&#xff08;适用于 Webpack&#xff09;》 项目对应的主要插件版本如下&#xff1a; "vite": "^4…

纳斯达克VS路透社MIFI大屏直投-大舍传媒

纳斯达克VS路透社MIFI大屏直投-大舍传媒 引言 在数字时代的今天&#xff0c;大屏投放成为一种广泛应用的营销手段和传媒方式。纳斯达克大屏和路透社MIFI大屏作为两个重要的投放平台&#xff0c;为企业和机构提供了广告和宣传的机会。 纳斯达克大屏的魅力 纳斯达克大屏位于纽…

Wpf 使用 Prism 实战开发Day14

备忘录接口增删&#xff08;CURD&#xff09;改查实现 一.添加备忘录控制器&#xff08;MemoController&#xff09; 备忘录控制器&#xff08;MemoController&#xff09;和待办事项控制器 &#xff08;ToDoController&#xff09;功能实现差不多一样。基本套路就是&#xff1…

写点东西《JavaScript 中的递归》

写点东西《JavaScript 中的递归》 您是否曾经发现自己需要在 JavaScript 中循环遍历一个复杂的多维对象&#xff0c;却不知道如何操作&#xff1f; 那么&#xff0c;递归函数到底是什么&#xff1f; 让我们回到我们的树对象。 为什么使用递归&#x1f31f;更多精彩 您是否曾经发…

LabVIEW工业机器人系统

介绍了ABB工业机器人与LabVIEW之间进行数据交互的解决方案。通过使用TCP/IP协议的socket通信&#xff0c;实现了机器人坐标数据的读取&#xff0c;为人机交互提供了一个更便捷、更高效的新思路。 系统主要由ABB工业机器人、基于TCP/IP协议的通信接口和LabVIEW软件组成。工业机…

鸿蒙常用UI效果及一些处理方式总结

前言&#xff1a; DevEco Studio版本&#xff1a;4.0.0.600 详细使用介绍 1、Text的一些常用设置 Text(this.message).fontSize(50)//字体大小.fontColor(Color.White)//字体颜色.fontWeight(FontWeight.Bold)//字体加粗.backgroundColor(Color.Black)//背景颜色.fontStyle(…

[安全警报] Npm木马利用“Oscompatible“包悄然安装AnyDesk

最近&#xff0c;一个名为OsCompatible的恶意包被上传到npm 。该包被发现包含一个针对 Windows 的远程访问木马。 这个名为OsCompatible的软件包于2024年1月9日发布&#xff0c;在被撤下之前共吸引了380次下载。 据了解&#xff0c;OsCompatible包含“几个奇怪的二进制文件”…