网站建设行业细分,wordpress首页布局怎么修改,标书制作是什么工作,wordpress 主题笔记wpfui介绍
wpfui是一款开源免费#xff08;MIT协议#xff09;具有现代化设计趋势的WPF界面库。wpfui为wpf的界面开发提供了流畅的体验#xff0c;提供了一个简单的方法#xff0c;让使用WPF编写的应用程序跟上现代设计趋势。截止写这篇文章#xff0c;该项目获得了6.7k …wpfui介绍
wpfui是一款开源免费MIT协议具有现代化设计趋势的WPF界面库。wpfui为wpf的界面开发提供了流畅的体验提供了一个简单的方法让使用WPF编写的应用程序跟上现代设计趋势。截止写这篇文章该项目获得了6.7k starts。 最近我也在使用wpfui整体使用下来感觉非常不错因此想写一篇文章介绍一下wpfui。 wpfui项目概览
将该项目fork一份克隆到本地打开之后项目的结构如下所示 带有Demo的我们可以运行看一看非常适合学习。
Wpf.Ui.Demo.Console
项目结构 运行效果 Wpf.Ui.Demo.Mvvm
可以根据这个Demo学习与理解Mvvm模式。
项目结构 运行效果如下 Wpf.Ui.Demo.Simple
如果觉得mvvm模式太麻烦了或者不想使用mvvm那么可以看这个demo。
项目结构 运行效果 Wpf.Ui.Gallery
Wpf.Ui.Gallery是wpfui中控件的集合示例可以在上面查看不同控件的使用方式以个人经验来看配合这个使用wpfui体验感还是很不错的。
项目结构 运行效果 官方还在Microsoft Store中提供了WPF UI Gallery可以使用它测试所有功能。 下载地址https://apps.microsoft.com/store/detail/wpf-ui/9N9LKV8R9VGM?cidwindows-lp-hero
下载安装之后可以直接打开这个应用学习控件的使用。
实践
前面的只是对这个项目一个简单的介绍重点还是我们如何在自己的WPF项目中使用它。
添加字典
XAML和WPF都对资源字典进行操作。这些类似HTML的文件描述控件的外观和各个方面。
WPF UI添加了自己的这些文件集以告知应用程序控件的外观。
在我们的应用程序中应该有一个名为 App.xaml 的文件。使用WPF UI ControlsDictionary 和 ThemesDictionary 类向其添加新字典
Application...xmlns:uihttp://schemas.lepo.co/wpfui/2022/xamlApplication.ResourcesResourceDictionaryResourceDictionary.MergedDictionariesui:ThemesDictionary ThemeLight /ui:ControlsDictionary //ResourceDictionary.MergedDictionaries/ResourceDictionary/Application.Resources
/Application你可以在这里选择一个颜色主题 Light 或 Dark 。
添加命名空间
在窗口中添加一个新的名称空间以告知解释器您将使用来自某个地方的控件例如WPF UI库。
Window...xmlns:uihttp://schemas.lepo.co/wpfui/2022/xaml /添加控件
从WPF UI库添加新控件您只需输入其类名并使用 ui: 前缀作为前缀
Window x:ClassWpfApp1.MainWindowxmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlxmlns:dhttp://schemas.microsoft.com/expression/blend/2008xmlns:mchttp://schemas.openxmlformats.org/markup-compatibility/2006xmlns:uihttp://schemas.lepo.co/wpfui/2022/xamlxmlns:localclr-namespace:WpfApp1mc:IgnorabledTitleMainWindow Height450 Width800Gridui:SymbolIcon SymbolFluent24//Grid
/Window效果如下 比如我现在想要使用一个带图标的Button该怎么做呢
可以打开WPF UI Gallery搜索Button找到想要使用的样式点击Source code如下所示 直接复制到xaml如下所示 ui:Button ContentWPF UI button IconFluent24/效果如下 发现并没有显示图标。
可能是我们的使用方式错了这时候就可以点击上方的Xaml soure code 与 C# source code了代码不会骗人。 先来看一下C# source code 没找到我们想要的。
再来看看Xaml soure code 在这个地方找到了原因复制过来如下所示
ui:Button ContentWPF UI button Icon{ui:SymbolIcon Fluent24}/现在就有图标了如下所示 如果想换图标只需搜索Icons找到一个图标替换图标的名字即可如下所示 ui:Button ContentWPF UI button Icon{ui:SymbolIcon AirPlane20}/现在效果如下 剩下的控件可以在使用过程中进行探索。
参考
1、lepoco/wpfui: WPF UI provides the Fluent experience in your known and loved WPF framework. Intuitive design, themes, navigation and new immersive controls. All natively and effortlessly. (github.com)
2、WPF UI Docs | WPF UI (lepo.co)
