オープンソースWPFコントロールライブラリ-AdonisUI

オープンソースWPFコントロールライブラリ-AdonisUI

クラシックと強化されたWindowsビジュアルを提供するWPFアプリケーション用の軽量UIツールキット

最后更新 2022/07/14 20:44
沙漠尽头的狼
预计阅读 6 分钟
分类
WPF
专题
WPFコントロール·ライブラリ WPFのオープンソースプロジェクト
标签
.NET C# WPF コントロール·ライブラリー WPFのオープンソースプロジェクト

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

砂漠の果ての狼

クラシックおよび強化されたWindowsビジュアルを提供するWPFアプリケーション用の軽量UIツールキット。

倉庫の情報

内容は何?

  1. ほぼすべてのWPFコントロールの既定のスタイルとテンプレート
  2. 必要に応じて使用可能なその他のスタイル
  3. 2つのカラースキーム(ライトとダーク)もカスタムスタイルに使用できます
  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には明るい色と暗い色があります。カスタムカラースキームを制限なく追加できます。

ライトライトプログラム ダークスキームスキームスキーム
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

阅读有关窗体的更多信息

カーソルスポットライトのホーバーエフェクトCurhover

依赖交互的 UI 控件(如按钮、文本框、组合框、列表框等)在此处使用称为 Cursor Spotlight 的悬停效果。当将鼠标悬停在隐藏的控件上时,它会使光标周围的图层可见。它适用于两种配色方案。

ライトライトプログラム ダークスキームスキームスキーム
Light color scheme overview Dark color scheme overview

因为它与OpacityMasks一起作用不仅限于照亮 UI 控件。它可以用来隐藏几乎所有可以用 WPF 渲染的东西。

阅读有关光标聚光灯效果的更多信息

反応

既定では、ボタンとContextMenuItemはクリックすると波紋効果を表示します。ListBoxItemsもサポートしていますが、デフォルトでは無効です。

ライトライトプログラム ダークスキームスキームスキーム
Light color scheme overview Dark color scheme overview

阅读有关涟漪效应的更多信息

画層

UIデザインでは、コンテナがグループに属するアイテムをグループ化するのが一般的です。例えば、WPFでは、GroupBoxesを使って簡単に実現できます。コンテナに異なる背景色が割り当てられている場合、グループ化されたアイテムとその周辺をよりよく区別すると、色のコントラストが問題になる可能性があります。グレーのボタンは、最初は白いアプリの背景では見栄えが良いかもしれませんが、グレーの背景を持つGroupBoxに移動すると、表示されなくなることがあります。

そのため、Adonis UIはシンプルなレイヤーシステムを導入しており、UIコントロールが属するレイヤーに基づいてUIコントロールの色を自動的に調整します。デフォルトでは、すべてのスタイルのAdonis UIは自動的にシステムに適応しますが、無効にすることもできます。

ライトライトプログラム ダークスキームスキームスキーム
Light color scheme overview Dark color scheme overview

これらの画像は、ButtonsとGroupBoxesで構成されたシンプルなレイアウトを示しています。すべてのコントロールはデフォルトのスタイルを使用し、コンテンツ以外のプロパティは設定されません。レイヤーシステムは、各レイヤーのボタンの色とGroupBoxesの背景をわずかに調整します。コンテナの背景とコンテナ内のコントロールの背景が常に異なることを保証します。システムがない場合、すべてのボタンはまったく同じ背景色になります。

このシステムは完全にカスタマイズ可能です。もちろん、ボタンだけでなく、すべてのコントロールに適用できます。各コントロールは、その子にレイヤを追加するように設定できますが、GroupBoxesなどの一部のコントロールではデフォルトで有効になっています。コントロールは特定の層に強制的に存在することもできます。

阅读有关分层系统的更多信息

データ検証サポート

WPF 的数据验证机制提供了验证属性值并在它们无效时分配错误消息的能力。在 Adonis UI 中,如果控件绑定到无效属性,则错误会在控件模板中由红色边框和错误图标指示。当控件获得键盘焦点或用户将鼠标悬停在图标上时,错误消息将显示为弹出窗口。要设置验证错误,可以使用接口IDataErrorInfoWPF

ライトライトプログラム ダークスキームスキームスキーム
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" -->

阅读有关空间的更多信息

プレゼンテーションプレゼンテーション

ボードには、Adonis UIのほとんどの機能を表示するWPFデモアプリケーションがあります。お気軽にお試し下さい。

在这里下载

License

MIT © Benjamin Rühl

リファレンス

Keep Exploring

延伸阅读

更多文章
同分类 / 同标签 2025/01/26

WPFはカスタムXMLファイルで国際化を実現

この記事では、必要なNuGetパッケージのインストール、言語リストの動的取得、言語の動的切り替え、コードとxamlインターフェイスでの翻訳文字列の使用、開発者がWPFアプリケーションを簡単に国際化できるようにするソースコードへのリンクなど、WPFプログラムでカスタムXMLファイルを使用した国際化の方法について詳しく説明します。

继续阅读
同分类 / 同标签 2024/01/25

C#WPFにおけるFluentValidationの使用

この記事では、C#WPFプロジェクトでFluentValidationをプロパティ検証に使用する方法を詳しく見て、MVVMパターンでこれを実装する方法を示します。

继续阅读