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

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

翻訳：砂漠の果ての狼(Google翻訳補助)

WPF アプリケーション向けの軽量 UI ツールキット。クラシックで強化された Windows ビジュアルを提供します:

リポジトリ情報

リポジトリアドレス：https://github.com/benruehl/adonis-ui
デモ：https://github.com/benruehl/adonis-ui#demo

何が含まれているか？

ほぼすべての WPF コントロールの既定のスタイルとテンプレート
必要に応じて使用できる追加スタイル（便利なように）
カスタムスタイルでも使用可能な2つの配色（ライトとダーク）
実行時の配色変更をサポート
独自のカスタム配色の追加をサポート
ウォーターマークなどの機能を提供する組み込みコントロールの拡張
一般的なユースケース向けの少数のカスタムコントロール

設計原則

WPF の元の外観に近いままにする
設定不要で動作するが、グローバルおよび個別の動作を制御したい方向けのオプションを提供
新しいコントロールを作成するための WPF の組み込みコントロール拡張をサポートし、既存アプリケーションへの直接的な代替品となるようにする

ドキュメント

ドキュメントアドレス：https://benruehl.github.io/adonis-ui/docs/getting-started/introduction/

はじめに

プロジェクトに AdonisUI と AdonisUI.ClassicTheme を参照追加してください。NuGet または手動ダウンロードで入手できます。現時点では、.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 にはライトとダークの配色が付属しています。カスタム配色も制限なく追加できます。

ライト配色	ダーク配色

実行時に配色を切り替えるには、ResourceDictionary から配色のすべての色とブラシを含むリソースを削除し、別の配色を追加できるようにする必要があります。これには内蔵の ResourceLocator クラスを使用できます。例えば、クリックイベントハンドラ内で使用します。

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

最初のパラメータは、MergedDictionaries として配色を含むリソースディクショナリへの参照である必要があります。2番目のパラメータは、追加する配色の URI です。

配色の切り替えについて詳しく読む

アクセントカラー

背景領域やボーダーの統一色に依存しつつ、アクセントカラーを使用して重要なポイントを視覚的に強調できます。デフォルトでは両方の配色で青がアクセントカラーとして使用されています。これはアクセントカラーの値を上書きすることで変更できます。一連のスタイルにより、アクセントカラーでボタンなどのコントロールを表示するのに役立ちます。

色とブラシについて詳しく読む

カスタムウィンドウタイトルバー

Adonis UI は、デフォルトでは Windows 10 のタイトルバーとまったく同じに見えるカスタムウィンドウタイトルバーを提供しますが、いくつかの利点があります。まず、現在の配色を尊重するため、ダーク配色に切り替えると暗くなります。次に、バインディングやトリガーなどを通じて配色とは独立して色を設定することもできます。第三に、アイコンを非表示にしたり、追加のボタンを追加したり、ラベルを配置したりと、その内容を簡単にカスタマイズできます。これらの機能を利用するには、ウィンドウを AdonisWindow から派生させます。

ウィンドウについて詳しく読む

カーソルスポットライトホバー効果

ボタン、テキストボックス、コンボボックス、リストボックスなどのインタラクティブな UI コントロールでは、ここでは Cursor Spotlight と呼ばれるホバー効果を使用しています。非表示のコントロールにマウスをホバーすると、カーソル周辺のレイヤーが表示されます。両方の配色で動作します。

ライト配色	ダーク配色

これは OpacityMasks と連動するため、UI コントロールの照明に限定されません。WPF でレンダリングできるほぼすべてのものを非表示にするために使用できます。

カーソルスポットライト効果について詳しく読む

リップル効果

デフォルトでは、ボタンと ContextMenuItem はクリック時にリップル効果を表示します。ListBoxItems もサポートしていますが、デフォルトでは無効になっています。

ライト配色	ダーク配色

リップル効果について詳しく読む

レイヤー

UI デザインでは、コンテナを使用して関連するアイテムをグループ化することがよくあります。例えば、WPF では GroupBox を使用して簡単に実現できます。コンテナに異なる背景色を割り当ててグループ化されたアイテムとその周囲をより区別しやすくすると、色のコントラストが問題になる場合があります。グレーのボタンは白いアプリケーション背景上では見栄えが良いかもしれませんが、同じくグレーの背景を持つ GroupBox 内に移動すると、視認性が低下する可能性があります。

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

ライト配色	ダーク配色

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

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

レイヤーシステムについて詳しく読む

データ検証のサポート

WPF のデータ検証メカニズムは、プロパティ値を検証し、無効な場合にエラーメッセージを割り当てる機能を提供します。Adonis UI では、コントロールが無効なプロパティにバインドされている場合、コントロールテンプレート内で赤い境界線とエラーアイコンによってエラーが示されます。コントロールがキーボードフォーカスを取得したとき、またはユーザーがアイコンにマウスをホバーしたときに、エラーメッセージがポップアップとして表示されます。検証エラーを設定するには、IDataErrorInfo インターフェースまたは WPF を使用できます。

ライト配色	ダーク配色

デフォルトでは、エラーメッセージのポップアップはキーボードフォーカス時とマウスホバー時に表示されます。どちらも個別に無効にできます。

データ検証について詳しく読む

ComponentResourceKeys

Adonis UI が提供するリソースには ComponentResourceKey が割り当てられており、簡単に使用できます。リソースは、色、ブラシ、サイズ、スタイル、テンプレート、アイコンなどのカテゴリに存在します。例えば、現在の配色の前景ブラシは、Foreground="{DynamicResource {x:Static adonisUi:Brushes.ForegroundBrush}}" のようにリソースキーを参照して使用できます。ComponentResourceKeys を使用すると、IntelliSense による自動補完が可能になり、利用可能なリソースを調べるのに役立ちます。

リソースについて詳しく読む

Space

コントロール間の Space は通常、マージン、パディング、グリッドの行と列によって制御されます。すべての場所で一貫した Space を確保するために、どこでも（またはその倍数）使用される固定サイズを選択できます。Adonis UI はそれを支援するシステムを提供します。デフォルトでは Space の基本値は 8 ですが、水平方向と垂直方向の Space をそれぞれ調整できます。

Space は次のように適用できます：

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

マージンやパディングなどの Thickness にも同様に適用できます：

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

Space について詳しく読む

デモ

Adonis UI のほとんどの機能を示す WPF デモアプリケーションが付属しています。ぜひお試しください。

ここからダウンロード

ライセンス

参考

AdonisUI - 用于 WPF 应用程序的轻量级 UI 工具包，提供经典但增强的 Windows 视觉效果