開源WPF控件庫-AdonisUI

開源WPF控件庫-AdonisUI

用於 WPF 應用程式的輕量級 UI 工具包,提供經典和增強的 Windows 視覺效果

最後更新 2022/7/14 下午8:44
沙漠尽头的狼
預計閱讀 8 分鐘
分類
WPF
專題
WPF控件庫 WPF開源項目
標籤
.NET C# WPF 控件庫 WPF開源項目

原文:https://github.com/benruehl/adonis-ui

翻譯:沙漠盡頭的狼(谷歌翻譯加持)

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

倉庫資訊

有哪些內容?

  1. 幾乎所有 WPF 控制項的預設樣式和範本
  2. 可根據需要使用的其他樣式以方便使用
  3. 兩種配色方案(淺色和深色)也可用於自訂樣式
  4. 支援在執行階段更改配色方案
  5. 支援其他自訂配色方案
  6. 內建控制項的擴充,提供水印等功能
  7. 常見用例的自訂控制項很少

設計原則

  1. 保持接近 WPF 的原始外觀
  2. 不需要任何配置,但為想要控制全域和個人行為的人提供選項
  3. 支援 WPF 對建立新控制項的內建控制項的擴充,以便成為現有應用程式的直接替代品

文件

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

開始吧

  1. 在您的專案中引用AdonisUIAdonisUI.ClassicTheme。可透過NuGet手動下載獲得。目前它至少需要 .NET Framework 4.5.NET Core 3.0
Install-Package AdonisUI.ClassicTheme -Version 1.17.1
  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>
  1. 從 Adonis UI 的預設樣式衍生視窗樣式,如下所示:
<Window.Style>
    <Style TargetType="Window" BasedOn="{StaticResource {x:Type Window}}"/>
</Window.Style>

控制項特色

在執行階段切換配色方案

Adonis UI 帶有淺色和深色配色方案。可以不受限制地新增自訂配色方案。

淺色方案 深色方案 Scheme
Light color scheme overview Dark color scheme overview

要在執行階段切換配色方案,ResourceDictionary需要從應用程式資源中刪除包含方案的所有顏色和畫筆,以便可以新增不同的配色方案。這可以使用內建ResourceLocator類別來完成,例如在點擊事件處理程式中。

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

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

閱讀有關切換配色方案的更多資訊

強調色

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

閱讀更多關於顏色和畫筆的資訊

自訂視窗標題列

Adonis UI 帶來了一個自訂視窗標題列,預設情況下看起來與 Windows 10 標題列一模一樣,但有幾個優點。首先,它尊重當前的配色方案,因此在切換到深色配色方案時它會變暗。其次,它的顏色也可以獨立於顏色方案設定,例如通過繫結和觸發器。第三,它的內容可以很容易地客製化,例如通過隱藏圖示、新增額外的按鈕或在其中放置標籤。衍生您的視窗AdonisWindow以接收這些功能。

Custom green title bar Custom yellow title bar
Custom red title bar Custom gradient title bar

閱讀有關表單的更多資訊

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

依賴互動的 UI 控制項(如按鈕、文字方塊、組合框、列表框等)在此處使用稱為 Cursor Spotlight 的懸停效果。當將滑鼠懸停在隱藏的控制項上時,它會使游標周圍的圖層可見。它適用於兩種配色方案。

淺色方案 深色方案 Scheme
Light color scheme overview Dark color scheme overview

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

閱讀有關游標聚光燈效果的更多資訊

連鎖反應(Ripple effect)

預設情況下,按鈕和 ContextMenuItem 在點擊時會顯示漣漪效果。ListBoxItems 也支援它,但預設情況下停用它。

淺色方案 深色方案 Scheme
Light color scheme overview Dark color scheme overview

閱讀有關漣漪效應的更多資訊

圖層

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

這就是為什麼 Adonis UI 引入了一個簡單的分層系統,它可以根據 UI 控制項所屬的層自動調整 UI 控制項的顏色。預設情況下,所有樣式的 Adonis UI 都會自動適應系統,但也可以停用它。

淺色方案 深色方案 Scheme
Light color scheme overview Dark color scheme overview

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

該系統是完全可客製化的。當然,它適用於所有控制項,而不僅僅是按鈕。每個控制項都可以配置為為其子級增加層,但預設情況下已經為某些控制項(如 GroupBoxes)啟用它。控制項也可以強制駐留在特定層上。

閱讀有關分層系統的更多資訊

資料驗證支援

WPF 的資料驗證機制提供了驗證屬性值並在它們無效時分配錯誤訊息的能力。在 Adonis UI 中,如果控制項繫結到無效屬性,則錯誤會在控制項範本中由紅色邊框和錯誤圖示指示。當控制項獲得鍵盤焦點或用戶將滑鼠懸停在圖示上時,錯誤訊息將顯示為彈出視窗。要設定驗證錯誤,可以使用介面IDataErrorInfoWPF

淺色方案 深色方案 Scheme
Light color scheme overview Dark color scheme overview

預設情況下,錯誤訊息彈出視窗顯示在鍵盤焦點和滑鼠懸停上。兩者都可以單獨停用。

閱讀有關資料驗證的更多資訊

ComponentResourceKeys

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

閱讀有關資源的更多資訊

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" -->

閱讀有關空間的更多資訊

演示

板上有一個 WPF 演示應用程式,它顯示了 Adonis UI 的大部分功能。請不要猶豫,試一試。

在這裡下載

License

MIT © Benjamin Rühl

參考

繼續探索

延伸閱讀

更多文章
同分類 / 同標籤 2025/1/26

WPF 藉助自訂 XML 檔案實現國際化

本文詳細介紹了在WPF程式中使用自訂XML檔案實現國際化的方法,包括安裝必備NuGet套件、動態獲取語言清單、動態切換語言、在程式碼和XAML介面中使用翻譯字串等內容,同時提供了原始碼連結,幫助開發者輕鬆實現WPF應用程式的國際化。

繼續閱讀