開源WPF控件庫-AdonisUI

原文：https://github.com/benruehl/adonis-ui
翻譯：沙漠盡頭的狼(谷歌翻譯加持)

用于 WPF 應用程序的輕量級 UI 工具包，提供經典和增強的 Windows 視覺效果:

倉庫信息

倉庫地址：https://github.com/benruehl/adonis-ui
Demo：https://github.com/benruehl/adonis-ui#demo

有哪些內容？

幾乎所有 WPF 控件的默認樣式和模板
可根據需要使用的其他樣式以方便使用
兩種配色方案（淺色和深色）也可用于自定義樣式
支持在運行時更改配色方案
支持其他自定義配色方案
內置控件的擴展，提供水印等功能
常見用例的自定義控件很少

設計原則

保持接近 WPF 的原始外觀
不需要任何配置，但為想要控制全局和個人行為的人提供選項
支持 WPF 對創建新控件的內置控件的擴展，以便成為現有應用程序的直接替代品

文檔

使用文檔地址：https://benruehl.github.io/adonis-ui/docs/getting-started/introduction/

開始吧

在您的項目中引用AdonisUI和AdonisUI.ClassicTheme。可通過NuGet^[1]或手動下載^[2]獲得。目前它至少需要 .NET Framework 4.5 或 .NET Core 3.0。

Install-Package?AdonisUI.ClassicTheme?-Version?1.17.1

像這樣將資源添加到您的應用程序App.xaml中：

<Application?xmlns:adonisUi="clr-namespace:AdonisUI;assembly=AdonisUI"><Application.Resources><ResourceDictionary><ResourceDictionary.MergedDictionaries><ResourceDictionary?Source="pack://application:,,,/AdonisUI;component/ColorSchemes/Light.xaml"/><ResourceDictionary?Source="pack://application:,,,/AdonisUI.ClassicTheme;component/Resources.xaml"/></ResourceDictionary.MergedDictionaries></ResourceDictionary></Application.Resources>
</Application>

從 Adonis UI 的默認樣式派生窗口樣式，如下所示：

<Window.Style><Style?TargetType="Window"?BasedOn="{StaticResource?{x:Type?Window}}"/>
</Window.Style>

控件特色

在運行時切換配色方案

Adonis UI 帶有淺色和深色配色方案。可以不受限制地添加自定義配色方案。

淺色方案	深色方案 Scheme

要在運行時切換配色方案，ResourceDictionary需要從應用程序資源中刪除包含方案的所有顏色和畫筆，以便可以添加不同的配色方案。這可以使用內置ResourceLocator類來完成，例如在單擊事件處理程序中。

AdonisUI.ResourceLocator.SetColorScheme(Application.Current.Resources,?ResourceLocator.DarkColorScheme);

第一個參數必須是對ResourceDictionary包含配色方案的引用，作為其MergedDictionaries。第二個參數是應添加的配色方案的 Uri。

閱讀有關切換配色方案的更多信息^[3]

強調色

在依賴于背景區域和邊框的統一顏色的同時，強調色可用于視覺突出重要點。默認情況下，兩種配色方案都使用藍色作為強調色。這可以通過覆蓋強調色值來改變。一組樣式有助于在強調色上顯示按鈕等控件。

關于顏色和畫筆的信息^[4]

自定義窗口標題欄

Adonis UI 帶來了一個自定義窗口標題欄，默認情況下看起來與 Windows 10 標題欄一模一樣，但有幾個優點。首先，它尊重當前的配色方案，因此在切換到深色配色方案時它會變暗。其次，它的顏色也可以獨立于顏色方案設置，例如通過綁定和觸發器。第三，它的內容可以很容易地定制，例如通過隱藏圖標、添加額外的按鈕或在其中放置標簽。派生您的窗口AdonisWindow以接收這些功能。

閱讀有關窗體的更多信息^[5]

光標聚光燈懸停效果(Cursor Spotlight hover effect)

依賴交互的 UI 控件（如按鈕、文本框、組合框、列表框等）在此處使用稱為 Cursor Spotlight 的懸停效果。當將鼠標懸停在隱藏的控件上時，它會使光標周圍的圖層可見。它適用于兩種配色方案。

淺色方案	深色方案 Scheme

因為它與OpacityMasks一起作用不僅限于照亮 UI 控件。它可以用來隱藏幾乎所有可以用 WPF 渲染的東西。

閱讀有關光標聚光燈效果的更多信息^[6]

連鎖反應(Ripple effect)

默認情況下，按鈕和 ContextMenuItem 在單擊時會顯示漣漪效果。ListBoxItems 也支持它，但默認情況下禁用它。

淺色方案	深色方案 Scheme

閱讀有關漣漪效應的更多信息^[7]

圖層

在 UI 設計中，容器將屬于一起的項目分組是很常見的。例如，在 WPF 中，這可以使用 GroupBoxes 輕松實現。如果容器分配了不同的背景顏色以更好地區分分組項目及其周圍環境，則顏色對比可能會成為問題。灰色按鈕最初在白色應用程序背景上可能看起來不錯，但是當它們被移動到也具有灰色背景的 GroupBox 中時，它們可能會失去可見性。

這就是為什么 Adonis UI 引入了一個簡單的分層系統，它可以根據 UI 控件所屬的層自動調整 UI 控件的顏色。默認情況下，所有樣式的 Adonis UI 都會自動適應系統，但也可以禁用它。

淺色方案	深色方案 Scheme

這些圖像顯示了一個由 Buttons 和 GroupBoxes 組成的簡單布局。所有控件都使用它們的默認樣式，除了它們的內容之外沒有設置任何屬性。分層系統負責稍微調整每層按鈕的顏色和 GroupBoxes 的背景。它確保容器的背景和容器中控件的背景始終存在差異。如果沒有系統，所有按鈕都將具有完全相同的背景顏色。

該系統是完全可定制的。當然，它適用于所有控件，而不僅僅是按鈕。每個控件都可以配置為為其子級增加層，但默認情況下已經為某些控件（如 GroupBoxes）啟用它。控件也可以強制駐留在特定層上。

閱讀有關分層系統的更多信息^[8]

數據驗證支持

WPF 的數據驗證機制提供了驗證屬性值并在它們無效時分配錯誤消息的能力。在 Adonis UI 中，如果控件綁定到無效屬性，則錯誤會在控件模板中由紅色邊框和錯誤圖標指示。當控件獲得鍵盤焦點或用戶將鼠標懸停在圖標上時，錯誤消息將顯示為彈出窗口。要設置驗證錯誤，可以使用接口IDataErrorInfo或WPF。

淺色方案	深色方案 Scheme

默認情況下，錯誤消息彈出窗口顯示在鍵盤焦點和鼠標懸停上。兩者都可以單獨禁用。

閱讀有關數據驗證的更多信息^[9]

ComponentResourceKeys

Adonis UI 提供的資源具有分配的 ComponentResourceKey，以便以簡單的方式使用它們。資源存在于顏色、畫筆、尺寸、樣式、模板和圖標等類別中。例如，當前配色方案的前景畫筆可以通過引用其資源鍵來使用，如Foreground="{DynamicResource {x:Static adonisUi:Brushes.ForegroundBrush}}"。ComponentResourceKeys 允許使用 IntelliSense 自動完成，這在探索可用資源時會派上用場。

閱讀有關資源的更多信息^[10]

Space

控件之間的Space通常由邊距、填充和網格行和列控制。為了確保每個位置的Space一致，可以選擇一個固定的大小，在任何地方都使用（或它的倍數）。Adonis UI 提供了一個支持您這樣做的系統。默認情況下，空間的基值為8，但可以分別針對水平和垂直空間進行調整。

可以像這樣應用空間：

<RowDefinition?Height="{adonisUi:Space?1}"/>?<!--?equals?Height="8"?-->
<RowDefinition?Height="{adonisUi:Space?2.5}"/>?<!--?equals?Height="20"?-->
<RowDefinition?Height="{adonisUi:Space?2.5+1}"/>?<!--?equals?Height="21"?-->
<RowDefinition?Height="{adonisUi:Space?2.5-1}"/>?<!--?equals?Height="19"?-->

同樣適用于邊距和填充等厚度：

<Button?Margin="{adonisUi:Space?1}"/>?<!--?equals?Margin="8,8,8,8"?-->
<Button?Margin="{adonisUi:Space?1,?2}"/>?<!--?equals?Margin="8,16,8,16"?-->
<Button?Margin="{adonisUi:Space?1,?1+2,?2,?3}"/>?<!--?equals?Margin="8,10,16,24"?-->

閱讀有關空間的更多信息^[11]