首页 > 其他分享 >wpfui:一个开源免费具有现代化设计趋势的WPF控件库

wpfui:一个开源免费具有现代化设计趋势的WPF控件库

时间:2024-06-13 11:25:15浏览次数:23  
标签:控件 UI wpfui 使用 WPF 图标

wpfui介绍

wpfui是一款开源免费(MIT协议)具有现代化设计趋势的WPF界面库。wpfui为wpf的界面开发提供了流畅的体验,提供了一个简单的方法,让使用WPF编写的应用程序跟上现代设计趋势。截止写这篇文章,该项目获得了6.7k starts。

image-20240613090119353

最近我也在使用wpfui,整体使用下来感觉非常不错,因此想写一篇文章介绍一下wpfui。

image-20240613090330237

wpfui项目概览

将该项目fork一份,克隆到本地,打开之后,项目的结构如下所示:

image-20240613091519362

带有Demo的,我们可以运行看一看,非常适合学习。

Wpf.Ui.Demo.Console

项目结构:

image-20240613091952546

运行效果:

image-20240613091913748

Wpf.Ui.Demo.Mvvm

可以根据这个Demo学习与理解Mvvm模式。

项目结构:

image-20240613092113970

运行效果如下:

image-20240613092437380

Wpf.Ui.Demo.Simple

如果觉得mvvm模式太麻烦了,或者不想使用mvvm,那么可以看这个demo。

项目结构:

image-20240613092659135

运行效果:

image-20240613092722052

Wpf.Ui.Gallery

Wpf.Ui.Gallery是wpfui中控件的集合示例,可以在上面查看不同控件的使用方式,以个人经验来看,配合这个使用wpfui体验感还是很不错的。

项目结构:

image-20240613093319767

运行效果:

image-20240613093337369

官方还在Microsoft Store中提供了WPF UI Gallery,可以使用它测试所有功能。

image-20240613094308263

下载地址:https://apps.microsoft.com/store/detail/wpf-ui/9N9LKV8R9VGM?cid=windows-lp-hero

下载安装之后,可以直接打开这个应用,学习控件的使用。

实践

前面的只是对这个项目一个简单的介绍,重点还是我们如何在自己的WPF项目中使用它。

添加字典

XAML和WPF都对资源字典进行操作。这些类似HTML的文件描述控件的外观和各个方面。

WPF UI添加了自己的这些文件集,以告知应用程序控件的外观。

在我们的应用程序中应该有一个名为 App.xaml 的文件。使用WPF UI ControlsDictionaryThemesDictionary 类向其添加新字典:

<Application
  ...
  xmlns:ui="http://schemas.lepo.co/wpfui/2022/xaml">
  <Application.Resources>
    <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
        <ui:ThemesDictionary Theme="Light" />
        <ui:ControlsDictionary />
      </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
  </Application.Resources>
</Application>

你可以在这里选择一个颜色主题, LightDark

添加命名空间

在窗口中添加一个新的名称空间,以告知解释器您将使用来自某个地方的控件,例如WPF UI库。

<Window
  ...
  xmlns:ui="http://schemas.lepo.co/wpfui/2022/xaml" />

添加控件

从WPF UI库添加新控件,您只需输入其类名,并使用 ui: 前缀作为前缀:

<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:ui="http://schemas.lepo.co/wpfui/2022/xaml"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
      <ui:SymbolIcon Symbol="Fluent24"/>
    </Grid>
</Window>

效果如下:

image-20240613095440244

比如我现在想要使用一个带图标的Button该怎么做呢?

可以打开WPF UI Gallery,搜索Button,找到想要使用的样式,点击Source code,如下所示:

image-20240613095750998

直接复制到xaml如下所示:

  <ui:Button Content="WPF UI button" Icon="Fluent24"/>

效果如下:

image-20240613100246310

发现并没有显示图标。

可能是我们的使用方式错了,这时候就可以点击上方的Xaml soure code 与 C# source code了,代码不会骗人。

image-20240613100841539

先来看一下C# source code:

image-20240613100646018

没找到我们想要的。

再来看看Xaml soure code:

image-20240613100940209

在这个地方找到了原因,复制过来,如下所示:

<ui:Button Content="WPF UI button"  Icon="{ui:SymbolIcon Fluent24}"/>

现在就有图标了,如下所示:

image-20240613101059957

如果想换图标,只需搜索Icons,找到一个图标,替换图标的名字即可,如下所示:

image-20240613104927600

 <ui:Button Content="WPF UI button"  Icon="{ui:SymbolIcon AirPlane20}"/>

现在效果如下:

image-20240613105043700

剩下的控件可以在使用过程中进行探索。

参考

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)](

标签:控件,UI,wpfui,使用,WPF,图标
From: https://www.cnblogs.com/mingupupu/p/18245521

相关文章

  • DevExpress WPF中文教程:Grid - 如何完成列和编辑器配置(设计时)?
    DevExpressWPF拥有120+个控件和库,将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过DevExpressWPF能创建有着强大互动功能的XAML基础应用程序,这些应用程序专注于当代客户的需求和构建未来新一代支持触摸的解决方案。无论是Office办公软件的衍伸产品,还是以数据为中心......
  • 如何在Labview中添加自定义动态控件(旋转风扇控件)
     前言:    使用labview做了一个自定义的labview控件在Labview中添加自定义动态控件(旋转风扇控件)下面具体介绍步骤:1.打开Labview,新建VI项目,在前面板“文件”->“新建”->“自定义控件”2.接着,转到“新建”->“自定义控件”3.然后,右击添加一个布尔......
  • WPF-DataGrid 样式设置
    在wpf中使用DataGrid虽然方便,但是其默认样式往往很难满足需求,而修改模板往往由比较麻烦,很多时候我们会用ListBox或ListView+DataTemplate来实现同样效果,但为了有些时候需要应用,这里记录一下一些基本属性设置方法,以免忘记。code<Windowx:Class="WpfApp7.MainWindow"......
  • WPF/C#:异常处理
    什么是异常?在C#中,异常是在程序执行过程中发生的特殊情况,例如尝试除以零、访问不存在的文件、网络连接中断等。这些情况会中断程序的正常流程。当C#程序中发生这种特殊情况时,会创建一个异常对象并将其抛出。这个异常对象包含了关于异常的详细信息,如异常类型和异常发生时的程序状......
  • WPF/C#:程序关闭的三种模式
    ShutdownMode枚举类型介绍ShutdownMode是一个枚举类型,它定义了WPF应用程序的关闭方式。这个枚举类型有三个成员:OnLastWindowClose:当最后一个窗口关闭或者调用System.Windows.Application.Shutdown方法时,应用程序会关闭。OnMainWindowClose:当主窗口关闭或者调用System.Windows.......
  • 界面控件DevExpress WinForms垂直&属性网格组件 - 拥有更灵活的UI选择(一)
    DevExpressWinForms垂直&属性网格组件旨在提供UI灵活性,它允许用户显示数据集中的单个行或在其90度倒置网格容器中显示多行数据集。另外,用户可以把它用作一个属性网格,就像在VisualStudioIDE中那样。P.S:DevExpressWinForms拥有180+组件和UI库,能为WindowsForms平台创建具有影响......
  • WPF dependency property to customize control in usercontrol
    //usercontrol<UserControlx:Class="WpfApp157.ImageListBox"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xm......
  • WPF中读取Excel文件的内容
    演示效果实现方案1.首先导入需要的Dll(这部分可能需要你自己搜一下)Epplus.dllExcel.dllICSharpCode.SharpZipLib.dll2.在你的解决方案的的依赖项->添加引用->浏览->选择1中的这几个Dll点击确定。(添加依赖)3.然后看代码内容附上源码usingExcel;usingSystem.Dat......
  • 使用WPF 当程序已打开时第二次打开程序直接弹出第一次打开的程序
    在代码中增加[DllImport("user32.dll")]privatestaticexternboolSetForegroundWindow(IntPtrhWnd);[DllImport("user32.dll")]privatestaticexternboolShowWindowAsync(IntPtrhWnd,intnCmdShow);[DllImport("user32.dll"......
  • WPF阻止窗体被系统缩放,使用显示器DPI
    WPF默认是跟随系统DPI变化(缩放与布局)而缩放窗体的;微软把它称为默认DPI感知,当DPI发生变化时WPF感知到后缩放窗体,介绍链接:设置进程的默认DPI感知(Windows)-Win32apps|MicrosoftLearn如果我们不希望窗体被缩放,而是让窗体使用显示器DPI该怎么办呢?首先修改app.manifest,如......