Avalonia UI - スタイル定義

概要

コントロールのスタイルおよびテンプレートを別ファイルとして定義して再利用する"スタイルの外部化"を行う。

スタイルの外部化を行うことにより、以下に示すようなメリットがある。

• 開発効率の向上

  デザイナーと開発者の分業が容易になり、並行作業が可能になる。

  コンポーネントの部品化による再利用性の向上する。

  デザインシステムの一貫性を保ちやすい。

• コード管理の最適化

  関心の分離 (Separation of Concerns) 原則に従った明確な責任分担が可能となる。

  整理された階層的なファイル構造により、メンテナンス性が向上する。

  スタイル定義の集中管理による変更の追跡が容易になる。

• 再利用性の最大化

  コードの重複を防ぎ、DRY原則を実現

  複数の画面での同一スタイルの再利用が容易になる。

  アプリケーション全体での一貫したデザインの実現できる。

  コンポーネントライブラリとしての活用が可能になる。

• テーマ対応の柔軟性

  ダークモード/ライトモードの切り替えが容易になる。

  複数のテーマやブランディングへの対応が可能になる。

  カラーパレットやデザイントークンの一元管理できる。

• 保守性の向上

  スタイルの変更が1箇所で完結し、影響範囲を制御可能になる。

  デザインの修正や更新が効率的になる。

  品質管理とテストが容易になる。

[プロジェクトのトップディレクトリ]
 ├── Styles/
 │   ├── ButtonStyles.axaml     # ボタンスタイル
 │   ├── TextBoxStyles.axaml    # テキストボックススタイル
 │   ├── Colors.axaml           # カラーテーマ
 │   └── Dimensions.axaml       # サイズ定義
 ├── Controls/
 │   └── CustomButton.axaml     # カスタムコントロール
 └── Views/
     └── MainWindow.axaml       # メインウインドウ

このような構造化により、大規模なプロジェクトでも効率的な開発とメンテナンスが可能となり、チーム開発での生産性が向上する。
また、デザインシステムの構築と進化にも柔軟に対応できる。

スタイル定義ファイルの作成

リソースディクショナリとして定義する。

スタイル定義ファイルは.axamlまたは.axaml.csとして作成する。

リソースディクショナリの基本構造

タグ / 属性	説明	備考
ResourceDictionary	スタイルやリソースを定義するためのルート要素	アプリケーション全体で使用可能なリソースを格納する。 複数のリソースディクショナリを結合可能にする。
xmlns="https://github.com/avaloniaui"	Avalonia UIの名前空間を定義する。	Avalonia UIの基本コントロールと機能へのアクセスを提供する。
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"	XAMLの基本名前空間を定義する。	XAML言語の基本機能へのアクセスを提供する。

スタイル定義の構造

タグ / 属性	説明	使用例
Style Selector="<コントロール名>.<クラスセレクタ名>"	スタイルを適用するターゲットを指定する。	例えば、Style Selector="Button.modern"は、modernクラスが指定されたボタンを選択する。 CSSセレクタに似た構文である。
Setter	プロパティの値を設定する。	Property プロパティ名 Value プロパティの値
Transitions	アニメーション遷移を定義する。	複数のトランジションをグループ化する。 プロパティ変更時の動的な変化を定義
TransformOperationsTransition	変形アニメーションを定義する。	例: Property="RenderTransform" Duration="0.2" Easing="CubicEaseOut"
BrushTransition	色の変化アニメーションを定義する。	例: Property="Background" Duration="0.2" Easing="CubicEaseOut"
Style Selector="^:pointerover"	マウスホバー時のスタイルを定義する。	^は、親セレクタを参照する。 :pointeroverは、マウスホバー状態を示す。
Style Selector="^:pressed"	ボタン押下時のスタイルを定義する。	:pressedは、ボタンが押下された状態を示す。

Setterプロパティの詳細

プロパティ	設定値	説明
Background	カラー名または#xxxxxx 例1 : White 例2: #2196F3 (マテリアルデザインのブルー)	背景色
Foreground	カラー名または#xxxxxx 例1 : White 例2: #2196F3 (マテリアルデザインのブルー)	文字色
CornerRadius	整数値	角の丸み (ピクセル単位)
Padding	<整数値>,<整数値> 例: 16,8　(左右16px, 上下8px)	内部余白
BorderThickness	<整数値>	境界線の太さ
HorizontalContentAlignment	Center	水平方向の配置
VerticalContentAlignment	Center	垂直方向の配置
RenderTransform	例. 102%にする場合 : scale(1.02) 例. 98%にする場合 : scale(0.98)	ホバー時の拡大率および縮小率

使用例

 <!-- /Styles/ButtonStyles.axaml -->
 
 <ResourceDictionary xmlns="https://github.com/avaloniaui"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style Selector="Button.modern">
       <Setter Property="Background" Value="#2196F3"/>
       <Setter Property="Foreground" Value="White"/>
       <Setter Property="CornerRadius" Value="4"/>
       <Setter Property="Padding" Value="16,8"/>
       <Setter Property="BorderThickness" Value="0"/>
       <Setter Property="HorizontalContentAlignment" Value="Center"/>
       <Setter Property="VerticalContentAlignment" Value="Center"/>
 
       <Setter Property="Transitions">
          <Transitions>
             <TransformOperationsTransition Property="RenderTransform" Duration="0.2" Easing="CubicEaseOut"/>
             <BrushTransition Property="Background" Duration="0.2" Easing="CubicEaseOut"/>
          </Transitions>
       </Setter>
 
       <Style Selector="^:pointerover">
          <Setter Property="Background" Value="#1976D2"/>
          <Setter Property="RenderTransform" Value="scale(1.02)"/>
       </Style>
 
       <Style Selector="^:pressed">
          <Setter Property="RenderTransform" Value="scale(0.98)"/>
       </Style>
    </Style>
 </ResourceDictionary>

スタイル定義の読み込み

App.axamlでスタイルを読み込むことにより、アプリケーション全体で使用可能になる。
複数のStyleIncludeを定義することにより、複数のスタイルファイルを読み込むことが可能となる。

※注意
読み込み順序において、後に読み込まれたスタイルが優先される。
リソースディクショナリとして定義されたスタイルを読み込む。

 <Application xmlns="https://github.com/avaloniaui"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Application.Styles>
       <FluentTheme />
 
       <!-- スタイルの読み込み -->
       <StyleInclude Source="/Styles/ButtonStyles.axaml"/>
       <StyleInclude Source="/Styles/TextBoxStyles.axaml"/>
       <StyleInclude Source="/Styles/Colors.axaml"/>
    </Application.Styles>
 </Application>

タグ / 属性名	説明	備考
StyleInclude	スタイルを読み込むためのタグ	Avalonia UIの組み込み要素である。 外部スタイルファイルを参照する時に使用する。
Source	スタイルファイルのパスを指定する。 これは、プロジェクトルートからの相対パスである。	先頭の"/"はプロジェクトルートを示す。 これは、ビルド時に自動的に解決される。
/xxx/yyy.axaml 例: /Styles/ButtonStyles.axaml	スタイルファイルのパス	xxxディレクトリのyyy.axamlを参照する。 axaml拡張子は、Avalonia XAMLファイルを示す。 これは、プロジェクトのトップディレクトリからのパスである。

その他、指定可能なプロパティを下表に示す。

タグ / 属性名	説明	使用例
Mode	スタイルの読み込みモードを指定する。	Mode="Append" 既存のスタイルに追加 (デフォルト) Mode="Replace" 既存のスタイルを置き換え ※注意 Mode属性 (特に、Replace) は慎重に使用する必要がある。
ResourceType	リソースの型を明示的に指定する。	ResourceType="{x:Type local:CustomStyles}" ※注意 ResourceTypeは必要な場合のみ指定する。
DynamicResource	動的リソース参照を指定する。	DynamicResource="CustomThemeStyles" ※注意 DynamicResourceを使用する場合は、パフォーマンスへの影響を考慮する必要がある。
IsEnabled	スタイルの有効 / 無効を制御する。	IsEnabled="{Binding IsCustomStyleEnabled}" ※注意 IsEnabled属性をバインディングで制御する場合は、適切なデータコンテキストが必要となる。
x:Key	スタイルのキーを指定する。	x:Key="CustomButtonStyle"
x:Shared	リソースの共有状態を指定する。	x:Shared="False"

 <!-- 基本的な使用例 -->
 <StyleInclude Source="/Styles/ButtonStyles.axaml"
               Mode="Append"
               IsEnabled="True"/>
 
 <!-- リソースタイプを指定する例 -->
 <StyleInclude Source="/Styles/CustomStyles.axaml"
               ResourceType="{x:Type local:CustomStyles}"
               x:Key="CustomStyle"/>
 
 <!-- 動的リソース参照の例 -->
 <StyleInclude Source="{DynamicResource ThemeStylesPath}"
               Mode="Replace"/>

スタイル定義の使用

例えば、MainWindow.axamlファイルでカスタムスタイル定義 (以下の例ではボタン) を使用する。

 <Button Classes="modern"
         Name="BtnStart" 
         Width="200" 
         Height="50"
         Click="btnStart_Click">
    Start
 </Button>

属性名	説明	備考
Classes="<スタイルクラス名>" Classes="<スタイルクラス名 1> <スタイルクラス名 2>"	スタイルクラスの指定	ResourceDictionaryで定義されたスタイルクラス名を適用する。 複数のクラスを空白区切りで指定可能 (例: Classes="modern primary")
Name="<コントロールの識別子>"	コントロールの一意な識別子	コードビハインドからコントロールを参照する場合は定義する。 XAMLとコードの橋渡しとなる重要な属性である。
Width="<数値>" Width="Auto"	ボタンの幅をピクセル単位で指定する。	固定値での指定、あるいは、他の単位 (Width="Auto") や相対値も使用できる。
Height="<数値>" Height="Auto"	ボタンの高さをピクセル単位で指定する。	固定値での指定、あるいは、他の単位 (Width="Auto") や相対値も使用できる。
Click="<イベントハンドラメソッド名>"	コントロールのイベントハンドラメソッド名を指定する。	例えば、ボタンの場合は、クリックイベントハンドラメソッド名を指定する。 ただし、コードビハインド (.cs) ファイルに定義が必要となる。
コンテンツ名 (キャプション名)	コントロールに表示されるテキストを指定する。	開始タグと終了タグの間に配置する。 他のコントロールや画像等も配置可能である。

その他、指定可能なプロパティを下表に示す。

プロパティ名	説明	備考
IsEnabled	ボタンの有効 / 無効状態	true / falseで指定する。 falseの場合、ボタンは押下不可でグレーアウト表示される。
Background	背景色	Color型での指定が可能である。 ブラシ (SolidColorBrush等) での指定も可能。 また、透明度 (Alpha) の指定も可能。
Foreground	文字色	Backgroundと同様、Color型やブラシでの指定が可能である。 ボタン内のテキストやアイコンの色に適用する。
Padding	内部の余白	4辺個別に指定が可能である。(左,上,右,下) 一括指定も可能 (例 : Padding="10") 単位はピクセルであることに注意する。
Margin	外部の余白	Paddingと同様に4辺個別に指定が可能である。 コントロール間の間隔を調整する場合に使用する。 単位はピクセルであることに注意する。
HorizontalAlignment	水平方向の配置	親コンテナ内での配置位置を指定する。 Left, Center, Right, Stretchから選択可能である。
VerticalAlignment	垂直方向の配置	親コンテナ内での配置位置を指定する。 Top, Center, Bottom, Stretchから選択可能である。