开始使用Panuon开源界面库环境配置并手写VS2019高仿界面

embedded/2025/1/15 12:02:22/
  • 1. Panuon环境配置
    • 1.1. 通过Nuget 安装 Panuon.WPF.UI
    • 1.2. xaml引用命名空间
    • 1.3. using Panuon.WPF.UI;
  • 2. VS2019 view
    • 2.1. 设置窗体尺寸和title
    • 2.2. 添加静态资源
      • 2.2.1. 什么是静态资源
    • 2.3. 主Grid
      • 2.3.1. 盒子模型
      • 2.3.2. 嵌套布局
  • 3. 总结

1. Panuon环境配置

1.1. 通过Nuget 安装 Panuon.WPF.UI

现在最新的是1.2.4.9，点击安装即可

文章配图

1.2. xaml引用命名空间

修改MainWindow.xaml,引用命名空间xmlns:pu="clr-namespace:Panuon.WPF.UI;assembly=Panuon.WPF.UI"

然后把Window标签改为pu:WindowX

文章配图

1.3. using Panuon.WPF.UI;

在MainWindow.cs中引用命名空间using Panuon.WPF.UI;

同样，需要把基类Window 改为 WindowX, 这样窗体变成了Panuon 窗体了，很简单。

2. VS2019 view

下面我们用panuon开发一个高仿VS2019启动界面，最终成品如下：

文章配图

2.1. 设置窗体尺寸和title

新建WPF工程，按第1节配置panuon环境，然后在pu:WindowX继续添加属性

Title="Visual Studio (SIM)"
Height="630"
Width="1058"
MinHeight="630"
MinWidth="1058"
Background="#252526"
BorderBrush="#3E3E45"
BorderThickness="1"
Foreground="#F1F1F1"

2.2. 添加静态资源

2.2.1. 什么是静态资源

资源可以分为静态资源或动态资源进行引用。

分别是通过使用 StaticResource 标记扩展或 DynamicResource 标记扩展完成的。

StaticResource的用法：

通过替换已定义资源的值（x:Key）来为 XAML 属性提供值。

这里添加静态资源就是可以对单个控件的样式单独控制，定制化。为后面的控件样式所用。


<pu:WindowX.Resources><Style x:Key="SearchComboBoxStyle"TargetType="ComboBox"BasedOn="{StaticResource {x:Type ComboBox}}"><Setter Property="pu:ComboBoxHelper.HoverBorderBrush"Value="#007ACC" /><Setter Property="pu:ComboBoxHelper.FocusedBorderBrush"Value="#007ACC" /><Setter Property="Height"Value="35" /><Setter Property="Width"Value="320" /><Setter Property="Background"Value="#333337" /><Setter Property="BorderBrush"Value="#3F3F46" /><Setter Property="Foreground"Value="#F1F1F1" /></Style><Style x:Key="CardButtonStyle"TargetType="Button"BasedOn="{StaticResource {x:Type Button}}"><Setter Property="pu:IconHelper.FontFamily"Value="{StaticResource PanuonIconFont}" /><Setter Property="pu:IconHelper.FontSize"Value="30" /><Setter Property="pu:IconHelper.VerticalAlignment"Value="Top" /><Setter Property="pu:IconHelper.Margin"Value="7,2,17,0" /><Setter Property="pu:ButtonHelper.HoverBackground"Value="#3F3F40" /><Setter Property="pu:ButtonHelper.ClickBackground"Value="{x:Null}" /><Setter Property="Foreground"Value="#F1F1F1" /><Setter Property="Background"Value="#333337" /><Setter Property="Padding"Value="10,7,10,10" /><Setter Property="Height"Value="75" /><Setter Property="VerticalContentAlignment"Value="Stretch" /><Setter Property="HorizontalContentAlignment"Value="Stretch" /></Style><Style x:Key="LinkButtonStyle"TargetType="Button"BasedOn="{StaticResource {x:Type Button}}"><Setter Property="pu:IconHelper.FontFamily"Value="{StaticResource PanuonIconFont}" /><Setter Property="pu:ButtonHelper.HoverBackground"Value="{x:Null}" /><Setter Property="pu:ButtonHelper.ClickBackground"Value="{x:Null}" /><Setter Property="Foreground"Value="#0097FB" /><Setter Property="Background"Value="{x:Null}" /><Setter Property="Cursor"Value="Hand" /><Setter Property="VerticalContentAlignment"Value="Stretch" /><Setter Property="HorizontalContentAlignment"Value="Stretch" /><Style.Triggers><Trigger Property="IsMouseOver"Value="True"><Setter Property="ContentTemplate"><Setter.Value><DataTemplate><TextBlock Text="{Binding}" TextDecorations="Underline"/></DataTemplate></Setter.Value></Setter></Trigger></Style.Triggers></Style><Style x:Key="ProjectListBoxStyle"TargetType="ListBox"BasedOn="{StaticResource {x:Type ListBox}}"><Setter Property="pu:IconHelper.FontFamily"Value="{StaticResource PanuonIconFont}" /><Setter Property="pu:IconHelper.Width"Value="25" /><Setter Property="pu:IconHelper.Height"Value="25" /><Setter Property="pu:IconHelper.VerticalAlignment"Value="Top" /><Setter Property="pu:IconHelper.Margin"Value="0,-15,7,0" /><Setter Property="pu:ListBoxHelper.ItemsHeight"Value="65" /><Setter Property="pu:ListBoxHelper.ItemsPadding"Value="10,0,10,0" /><Setter Property="pu:ListBoxHelper.ItemsHoverBackground"Value="#3F3F40" /><Setter Property="pu:ListBoxHelper.ItemsSelectedBackground"Value="{x:Null}" /><Setter Property="Foreground"Value="#F1F1F1" /><Setter Property="Background"Value="Transparent" /><Setter Property="BorderThickness"Value="0" /><Setter Property="VerticalContentAlignment"Value="Center" /><Setter Property="HorizontalContentAlignment"Value="Stretch" /></Style></pu:WindowX.Resources>

2.3. 主Grid

2.3.1. 盒子模型

主Grid里面的布局需要手写，手写需要有一定布局的基础。如果不是很清楚需要先了解下盒子模型。

盒子模型最开始是应用于网页布局，将页面中所有元素都看作是一个盒子，盒子都包含以下几个属性：

width 宽度

height 高度

border 边框——围绕在内边距和内容外的边框

padding 内边距——清除内容周围的区域，内边距是透明的

margin 外边距——清除边框外的区域，外边距是透明的

content 内容——盒子的内容，显示文本和图像

文章配图

2.3.2. 嵌套布局

文章配图

用xaml写布局，当层级嵌套比较深，比较复杂的时候自己都会很晕，这里有个小技巧我经常用，就是给背景/边框标红，这样能直观看到当前的嵌套到哪里了。等找到自己的定位后，在把红色标记去掉。

<Grid Margin="55,0,65,35" Background="Red">

完整的Grid布局代码：


<Grid Margin="55,0,65,35"><Grid.RowDefinitions><RowDefinition Height="Auto"/><RowDefinition /></Grid.RowDefinitions><TextBlock Text="Visual Studio 2019 (SIM)"FontSize="33"/><Grid Grid.Row="1"><Grid.ColumnDefinitions><ColumnDefinition /><ColumnDefinition Width="30"/><ColumnDefinition Width="0.6*" /></Grid.ColumnDefinitions><Grid.RowDefinitions><RowDefinition Height="Auto"/><RowDefinition /></Grid.RowDefinitions><TextBlock Margin="0,30,0,0"Text="Open recent"FontSize="20" /><Grid Grid.Row="1"><Grid.RowDefinitions><RowDefinition Height="Auto" /><RowDefinition /></Grid.RowDefinitions><ComboBox Margin="0,15,0,0"HorizontalAlignment="Left"IsEditable="True"Style="{StaticResource SearchComboBoxStyle}"pu:ComboBoxHelper.Watermark="Search recent" /><ListBox Grid.Row="1"Margin="0,15,0,0"Style="{StaticResource ProjectListBoxStyle}"><ListBoxItem pu:ListBoxItemHelper.Icon="/Samples;component/Resources/WebForms.png"><Grid><Grid.RowDefinitions><RowDefinition Height="Auto"/><RowDefinition Height="Auto"/></Grid.RowDefinitions><TextBlock FontSize="14"FontWeight="Bold"Text="ProjectA.sln" /><TextBlock VerticalAlignment="Center"HorizontalAlignment="Right"Foreground="#C6C8D2"Text="2021/4/12 12:00" /><TextBlock Grid.Row="1"Margin="0,8,0,0"Text="D:\ProjectA"TextTrimming="CharacterEllipsis"Foreground="#C6C8D2" /></Grid></ListBoxItem><ListBoxItem pu:ListBoxItemHelper.Icon="/Samples;component/Resources/WebForms.png"><Grid><Grid.RowDefinitions><RowDefinition Height="Auto" /><RowDefinition Height="Auto" /></Grid.RowDefinitions><TextBlock FontSize="14"FontWeight="Bold"Text="ProjectB.sln" /><TextBlock VerticalAlignment="Center"HorizontalAlignment="Right"Foreground="#C6C8D2"Text="2021/4/12 12:00" /><TextBlock Grid.Row="1"Margin="0,8,0,0"Text="D:\ProjectB"TextTrimming="CharacterEllipsis"Foreground="#C6C8D2" /></Grid></ListBoxItem></ListBox></Grid><TextBlock Grid.Column="2"Margin="0,30,0,0"Text="Get started"FontSize="20" /><StackPanel Grid.Column="2"Grid.Row="1"Margin="0,15,0,0"><Button  Style="{StaticResource CardButtonStyle}"pu:ButtonHelper.Icon="&#xe941;"><StackPanel><TextBlock FontSize="18"Text="Connect to a codespace"/><TextBlock Margin="0,5,0,0"Text="Create and manage cloud-powered development environments"TextWrapping="Wrap"Foreground="#C6C8D2"/></StackPanel></Button><Button Margin="0,5,0,0"Style="{StaticResource CardButtonStyle}"pu:ButtonHelper.Icon="&#xe94d;"><StackPanel><TextBlock FontSize="18"Text="Clone a repository" /><TextBlock Margin="0,5,0,0"Text="Get code from an online repository like GitHub or Azure DevOps"TextWrapping="Wrap"Foreground="#C6C8D2" /></StackPanel></Button><Button Margin="0,5,0,0"Style="{StaticResource CardButtonStyle}"pu:ButtonHelper.Icon="&#xe951;"><StackPanel><TextBlock FontSize="18"Text="Open a project or solution" /><TextBlock Margin="0,5,0,0"Text="Open a local Visual Studio project or .sln file"TextWrapping="Wrap"Foreground="#C6C8D2" /></StackPanel></Button><Button Margin="0,5,0,0"Style="{StaticResource CardButtonStyle}"pu:ButtonHelper.Icon="&#xe956;"><StackPanel><TextBlock FontSize="18"Text="Open a local folder" /><TextBlock Margin="0,5,0,0"Text="Navigate and edit code within any folder"TextWrapping="Wrap"Foreground="#C6C8D2" /></StackPanel></Button><Button Margin="0,5,0,0"Style="{StaticResource CardButtonStyle}"pu:ButtonHelper.Icon="&#xe960;"><StackPanel><TextBlock FontSize="18"Text="Create a new project" /><TextBlock Margin="0,5,0,0"Text="Choose a project template with code scaffolding to get started"TextWrapping="Wrap"Foreground="#C6C8D2" /></StackPanel></Button><StackPanel Margin="0,10,0,0"HorizontalAlignment="Center"Orientation="Horizontal"><Button Style="{StaticResource LinkButtonStyle}"Content="Continue without code" /><TextBlock Text="&#xe90e;"VerticalAlignment="Center"Foreground="#0097FB"FontFamily="{StaticResource PanuonIconFont}"/></StackPanel></StackPanel></Grid>
</Grid>

3. 总结

Panuon.WPF.UI 是一个适用于定制个性化UI界面的组件库。它能帮助你快速完成样式和控件的UI设计，而不必深入了解WPF的 ControlTemplate 、 Storyboard 等知识。

例如，在原生WPF中下，如果你想要修改 Button 按钮 控件的悬浮背景色，你需要修改按钮的 Style 属性，并编写 Trigger 和 Storyboard 来实现悬浮渐变效果。如果你想要更复杂的效果，你可能还需要编写内部的ControlTemplate模板。但现在， Panuon.WPF.UI 为你提供了一个更简单的方式。你只需要在 Button 按钮 控件上添加一条 pu:ButtonHelper.HoverBackground="#FF0000" 属性，即可实现背景色悬浮渐变到红色的效果。Panuon.WPF.UI为每一种控件都提供了大量的属性，使你能够方便地修改WPF中没有直接提供，但在UI设计中非常常用的效果，这有助于你快速地完成UI设计（尤其是在你有设计图的情况下）。


http://www.ppmy.cn/embedded/154094.html

相关文章

rclone，云存储备份和迁移的瑞士军刀，千字常文解析，附下载链接和安装操作步骤...

rclone，云存储备份和迁移的瑞士军刀，千字常文解析，附下载链接和安装操作步骤...

一、什么是rclone&#xff1f; rclone是一个命令行程序&#xff0c;全称&#xff1a;rsync for cloud storage。是用于将文件和目录同步到云存储提供商的工具。因其支持多种云存储服务的备份&#xff0c;如Google Drive、Amazon S3、Dropbox、Backblaze B2、One Drive、Swift、…
阅读更多...
【python爬虫入门教程13--selenium的自动点击 --小小案例分享】

【python爬虫入门教程13--selenium的自动点击 --小小案例分享】

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 《python爬虫入门教程12--selenium的安装与使用》 selenium就是一个可以实现python自动化的模块&#xff0c;上次我们更新了如何安装以及它的语法。同时我也更新了如何用爬虫…
阅读更多...
蓝桥杯_B组_省赛_2022（用作博主自己学习）

蓝桥杯_B组_省赛_2022（用作博主自己学习）

题目链接算法11.九进制转十进制 - 蓝桥云课 进制转换 21.顺子日期 - 蓝桥云课 时间与日期 31.刷题统计 - 蓝桥云课 时间与日期 41.修剪灌木 - 蓝桥云课 思维 51.X 进制减法 - 蓝桥云课 贪心 61.统计子矩阵 - 蓝桥云课 二维前缀和 71.积木画 - 蓝桥云课 动态规划 82.扫雷 - 蓝桥…
阅读更多...
WORD转PDF脚本文件

WORD转PDF脚本文件

1、在桌面新建一个文本文件&#xff0c;把下列代码复制到文本文件中。 On Error Resume Next Const wdExportFormatPDF 17 Set oWord WScript.CreateObject("Word.Application") Set fso WScript.CreateObject("Scripting.Filesystemobject") Set fdsf…
阅读更多...
【基础工程搭建】数据地址访问对齐问题分析

【基础工程搭建】数据地址访问对齐问题分析

前言 汽车电子嵌入式开始更新全新的AUTOSAR项目实战专栏内容，从0到1搭建一个AUTOSAR工程，内容会覆盖AUTOSAR通信协议栈、存储协议栈、诊断协议栈、MCAL、系统服务、标定、Bootloader、复杂驱动、功能安全等所有常见功能和模块，全网同步更新开发设计文档（后期也会更新视频内…
阅读更多...
[c语言日寄]递归进阶：深度

[c语言日寄]递归进阶：深度

哈喽大家好啊&#xff0c;经历了残忍的期末周之后&#xff0c;鼠鼠我啊~ 又复活了呢~ 在阔别许久之后的第一次快乐刷题中&#xff0c;我遇到了这样的一道题&#xff1a; 题目 题目初探 如题&#xff0c;这个其实一个简单的for循环就能搞定的题目&#xff0c;结果要求用递归&a…
阅读更多...
opencv warpAffine仿射变换C++源码分析

opencv warpAffine仿射变换C++源码分析

基于opencv 3.1.0源代码 sources\modules\imgproc\src\imgwarp.cpp void cv::warpAffine( InputArray _src, OutputArray _dst,InputArray _M0, Size dsize,int flags, int borderType, const Scalar& borderValue ) {...if( !(flags & WARP_INVERSE_MAP) ){//变换矩阵…
阅读更多...
如何运行Pytest（python -m pytest 与 pytest详解）

如何运行Pytest（python -m pytest 与 pytest详解）

关注开源优测不迷路 大数据测试过程、策略及挑战 测试框架原理&#xff0c;构建成功的基石 在自动化测试工作之前&#xff0c;你应该知道的10条建议 在自动化测试中&#xff0c;重要的不是工具 你可能见过 pytest 和 python -m pytest 这两个命令&#xff0c;但对它们之间的区别…
阅读更多...
最新文章

Copyright @ 2022~2023