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?cid=windows-lp-hero
下載安裝之後，可以直接開啟這個應用，學習控制元件的使用。
實踐
前面的只是對這個專案一個簡單的介紹，重點還是我們如何在自己的WPF專案中使用它。
新增字典
XAML和WPF都對資源字典進行操作。這些類似HTML的檔案描述控制元件的外觀和各個方面。
WPF UI新增了自己的這些檔案集，以告知應用程式控制元件的外觀。
在我們的應用程式中應該有一個名為 App.xaml 的檔案。使用WPF UI ControlsDictionary 和 ThemesDictionary 類向其新增新字典：
<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>
你可以在這裡選擇一個顏色主題， Light 或 Dark 。
新增名稱空間
在視窗中新增一個新的名稱空間，以告知直譯器您將使用來自某個地方的控制元件，例如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>
效果如下：
比如我現在想要使用一個帶圖示的Button該怎麼做呢？
可以開啟WPF UI Gallery，搜尋Button，找到想要使用的樣式，點選Source code，如下所示：
直接複製到xaml如下所示：
<ui:Button Content="WPF UI button" Icon="Fluent24"/>
效果如下：
發現並沒有顯示圖示。
可能是我們的使用方式錯了，這時候就可以點選上方的Xaml soure code 與 C# source code了，程式碼不會騙人。
先來看一下C# source code：
沒找到我們想要的。
再來看看Xaml soure code：
在這個地方找到了原因，複製過來，如下所示：
<ui:Button Content="WPF UI button" Icon="{ui:SymbolIcon Fluent24}"/>
現在就有圖示了，如下所示：
如果想換圖示，只需搜尋Icons，找到一個圖示，替換圖示的名字即可，如下所示：
<ui:Button Content="WPF 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)](