原文:https://github.com/benruehl/adonis-ui
砂漠の果ての狼
クラシックおよび強化されたWindowsビジュアルを提供するWPFアプリケーション用の軽量UIツールキット。

倉庫の情報

内容は何?
- ほぼすべてのWPFコントロールの既定のスタイルとテンプレート
- 必要に応じて使用可能なその他のスタイル
- 2つのカラースキーム(ライトとダーク)もカスタムスタイルに使用できます
- 実行時にカラースキームを変更するサポート
- その他のカスタムカラースキームのサポート
- ウォーターマークなどの機能を提供する内蔵コントロールの拡張
- 一般的なユースケースに対するカスタムコントロールが少ない
デザインの原則
- WPFの元の外観に近いままにする
- 設定は不要ですが、グローバルおよび個人的な行動を制御したい人のためのオプションを提供します。
- 既存のアプリケーションの直接的な代替として、新しいコントロールを作成するための組み込みコントロールのWPF拡張をサポート
ファイルのアーカイブ
使用文档地址:https://benruehl.github.io/adonis-ui/docs/getting-started/introduction/
始めましょう。
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);
第一个参数必须是对 ResourceDictionary 包含配色方案的引用,作为其MergedDictionaries。 第二个参数是应添加的配色方案的 Uri。
強調色。
背景領域と境界線の均一な色に依存しながら、アクセントカラーは重要な点を視覚的に強調するために使用できます。デフォルトでは、どちらのカラースキームもアクセントカラーとして青を使用します。これは、強調色値を上書きすることによって変更することができる。一連のスタイルは、強調色にボタンなどのコントロールを表示するのに役立ちます。
ウィンドウのタイトルバーのカスタマイズ
Adonis UI 带来了一个自定义窗口标题栏,默认情况下看起来与 Windows 10 标题栏一模一样,但有几个优点。首先,它尊重当前的配色方案,因此在切换到深色配色方案时它会变暗。其次,它的颜色也可以独立于颜色方案设置,例如通过绑定和触发器。第三,它的内容可以很容易地定制,例如通过隐藏图标、添加额外的按钮或在其中放置标签。派生您的窗口AdonisWindow以接收这些功能。
![]() |
![]() |
![]() |
![]() |
カーソルスポットライトのホーバーエフェクトCurhover
依赖交互的 UI 控件(如按钮、文本框、组合框、列表框等)在此处使用称为 Cursor Spotlight 的悬停效果。当将鼠标悬停在隐藏的控件上时,它会使光标周围的图层可见。它适用于两种配色方案。
| ライトライトプログラム | ダークスキームスキームスキーム |
|---|---|
![]() |
![]() |
因为它与OpacityMasks一起作用不仅限于照亮 UI 控件。它可以用来隐藏几乎所有可以用 WPF 渲染的东西。
反応
既定では、ボタンとContextMenuItemはクリックすると波紋効果を表示します。ListBoxItemsもサポートしていますが、デフォルトでは無効です。
| ライトライトプログラム | ダークスキームスキームスキーム |
|---|---|
![]() |
![]() |
画層
UIデザインでは、コンテナがグループに属するアイテムをグループ化するのが一般的です。例えば、WPFでは、GroupBoxesを使って簡単に実現できます。コンテナに異なる背景色が割り当てられている場合、グループ化されたアイテムとその周辺をよりよく区別すると、色のコントラストが問題になる可能性があります。グレーのボタンは、最初は白いアプリの背景では見栄えが良いかもしれませんが、グレーの背景を持つGroupBoxに移動すると、表示されなくなることがあります。
そのため、Adonis UIはシンプルなレイヤーシステムを導入しており、UIコントロールが属するレイヤーに基づいてUIコントロールの色を自動的に調整します。デフォルトでは、すべてのスタイルのAdonis UIは自動的にシステムに適応しますが、無効にすることもできます。
| ライトライトプログラム | ダークスキームスキームスキーム |
|---|---|
![]() |
![]() |
これらの画像は、ButtonsとGroupBoxesで構成されたシンプルなレイアウトを示しています。すべてのコントロールはデフォルトのスタイルを使用し、コンテンツ以外のプロパティは設定されません。レイヤーシステムは、各レイヤーのボタンの色とGroupBoxesの背景をわずかに調整します。コンテナの背景とコンテナ内のコントロールの背景が常に異なることを保証します。システムがない場合、すべてのボタンはまったく同じ背景色になります。
このシステムは完全にカスタマイズ可能です。もちろん、ボタンだけでなく、すべてのコントロールに適用できます。各コントロールは、その子にレイヤを追加するように設定できますが、GroupBoxesなどの一部のコントロールではデフォルトで有効になっています。コントロールは特定の層に強制的に存在することもできます。
データ検証サポート
WPF 的数据验证机制提供了验证属性值并在它们无效时分配错误消息的能力。在 Adonis UI 中,如果控件绑定到无效属性,则错误会在控件模板中由红色边框和错误图标指示。当控件获得键盘焦点或用户将鼠标悬停在图标上时,错误消息将显示为弹出窗口。要设置验证错误,可以使用接口IDataErrorInfo或WPF。
| ライトライトプログラム | ダークスキームスキームスキーム |
|---|---|
![]() |
![]() |
デフォルトでは、エラーメッセージのポップアップがキーボードフォーカスとマウスオーバーの上に表示されます。どちらも別々に禁止できる。
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













