Avalonia UI - スタイル定義のソースを表示

== 概要 ==
コントロールのスタイルおよびテンプレートを別ファイルとして定義して再利用する<u>"スタイルの外部化"</u>を行う。<br>
<br>
スタイルの外部化を行うことにより、以下に示すようなメリットがある。<br>
* 開発効率の向上
*: デザイナーと開発者の分業が容易になり、並行作業が可能になる。
*: コンポーネントの部品化による再利用性の向上する。
*: デザインシステムの一貫性を保ちやすい。
* コード管理の最適化
*: 関心の分離 (Separation of Concerns) 原則に従った明確な責任分担が可能となる。
*: 整理された階層的なファイル構造により、メンテナンス性が向上する。
*: スタイル定義の集中管理による変更の追跡が容易になる。
* 再利用性の最大化
*: コードの重複を防ぎ、DRY原則を実現
*: 複数の画面での同一スタイルの再利用が容易になる。
*: アプリケーション全体での一貫したデザインの実現できる。
*: コンポーネントライブラリとしての活用が可能になる。
* テーマ対応の柔軟性
*: ダークモード/ライトモードの切り替えが容易になる。
*: 複数のテーマやブランディングへの対応が可能になる。
*: カラーパレットやデザイントークンの一元管理できる。
* 保守性の向上
*: スタイルの変更が1箇所で完結し、影響範囲を制御可能になる。
*: デザインの修正や更新が効率的になる。
*: 品質管理とテストが容易になる。
<br>
 [プロジェクトのトップディレクトリ]
  ├── Styles/
  │   ├── ButtonStyles.axaml     # ボタンスタイル
  │   ├── TextBoxStyles.axaml    # テキストボックススタイル
  │   ├── Colors.axaml           # カラーテーマ
  │   └── Dimensions.axaml       # サイズ定義
  ├── Controls/
  │   └── CustomButton.axaml     # カスタムコントロール
  └── Views/
      └── MainWindow.axaml       # メインウインドウ
<br>
このような構造化により、大規模なプロジェクトでも効率的な開発とメンテナンスが可能となり、チーム開発での生産性が向上する。<br>
また、デザインシステムの構築と進化にも柔軟に対応できる。<br>
<br><br>

== リソースディクショナリとして定義 ==
 <syntaxhighlight lang="xml">
 <!-- /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>
 </syntaxhighlight>
<br><br>

== App.axamlでスタイル定義を読み込む ==
 <syntaxhighlight lang="xml">
 <Application xmlns="https://github.com/avaloniaui"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Application.Styles>
       <FluentTheme />
 
       <!-- スタイルの読み込み -->
       <StyleInclude Source="/Styles/ButtonStyles.axaml"/>
    </Application.Styles>
 </Application>
 </syntaxhighlight>
<br><br>

== スタイル定義の使用 ==
例えば、MainWindow.axamlファイルでカスタムスタイル定義 (以下の例ではボタン) を使用する。<br>
<br>
 <syntaxhighlight lang="xml">
 <Button Classes="modern"
         Name="BtnStart" 
         Width="200" 
         Height="50"
         Click="btnStart_Click">
    Start
 </Button>
 </syntaxhighlight>
<br>
<center>
{| class="wikitable" | style="background-color:#fefefe;"
! style="background-color:#66CCFF;" | 属性名
! style="background-color:#66CCFF;" | 説明
! style="background-color:#66CCFF;" | 備考
|-
| style="text-align: center;" | Classes="<スタイルクラス名>"<br>Classes="<スタイルクラス名 1> <スタイルクラス名 2>"  
| スタイルクラスの指定
| ResourceDictionaryで定義されたスタイルクラス名を適用する。<br>複数のクラスを空白区切りで指定可能 (例: Classes="modern primary")
|-
| style="text-align: center;" | Name="<コントロールの識別子>"
| コントロールの一意な識別子
| コードビハインドからコントロールを参照する場合は定義する。<br>XAMLとコードの橋渡しとなる重要な属性である。
|-
| style="text-align: center;" | Width="<数値>"<br>Width="Auto"
| ボタンの幅をピクセル単位で指定する。
| 固定値での指定、あるいは、他の単位 (Width="Auto") や相対値も使用できる。
|-
| style="text-align: center;" | Height="<数値>"<br>Height="Auto"
| ボタンの高さをピクセル単位で指定する。
| 固定値での指定、あるいは、他の単位 (Width="Auto") や相対値も使用できる。
|-
| style="text-align: center;" | Click="<イベントハンドラメソッド名>"
| コントロールのイベントハンドラメソッド名を指定する。
| 例えば、ボタンの場合は、クリックイベントハンドラメソッド名を指定する。<br>ただし、コードビハインド (.cs) ファイルに定義が必要となる。
|-
| style="text-align: center;" | コンテンツ名 (キャプション名)
| コントロールに表示されるテキストを指定する。
| 開始タグと終了タグの間に配置する。<br>他のコントロールや画像等も配置可能である。
|}
</center>
<br>
その他、指定可能なプロパティを下表に示す。<br>
<center>
{| class="wikitable" | style="background-color:#fefefe; width: 50%;"
! style="background-color:#66CCFF;" | プロパティ名
! style="background-color:#66CCFF;" | 説明
! style="background-color:#66CCFF;" | 備考
|-
| style="text-align: center;" | IsEnabled
| ボタンの有効 / 無効状態
| true / falseで指定する。<br>falseの場合、ボタンは押下不可でグレーアウト表示される。
|-
| style="text-align: center;" | Background
| 背景色
| Color型での指定が可能である。<br><br>ブラシ (SolidColorBrush等) での指定も可能。<br>また、透明度 (Alpha) の指定も可能。
|-
| style="text-align: center;" | Foreground
| 文字色
| Backgroundと同様、Color型やブラシでの指定が可能である。<br>ボタン内のテキストやアイコンの色に適用する。
|-
| style="text-align: center;" | Padding
| 内部の余白
| 4辺個別に指定が可能である。(左,上,右,下)<br>一括指定も可能 (例 : Padding="10")<br><br>単位はピクセルであることに注意する。
|-
| style="text-align: center;" | Margin
| 外部の余白
| Paddingと同様に4辺個別に指定が可能である。<br>コントロール間の間隔を調整する場合に使用する。<br><br>単位はピクセルであることに注意する。
|-
| style="text-align: center;" | HorizontalAlignment
| 水平方向の配置
| 親コンテナ内での配置位置を指定する。<br>Left, Center, Right, Stretchから選択可能である。
|-
| style="text-align: center;" | VerticalAlignment
| 垂直方向の配置
| 親コンテナ内での配置位置を指定する。<br>Top, Center, Bottom, Stretchから選択可能である。
|}
</center>
<br><br>


{{#seo:
|title={{PAGENAME}} : Exploring Electronics and SUSE Linux | MochiuWiki
|keywords=MochiuWiki,Mochiu,Wiki,Mochiu Wiki,Electric Circuit,Electric,pcb,Mathematics,AVR,TI,STMicro,AVR,ATmega,MSP430,STM,Arduino,Xilinx,FPGA,Verilog,HDL,PinePhone,Pine Phone,Raspberry,Raspberry Pi,C,C++,C#,Qt,Qml,MFC,Shell,Bash,Zsh,Fish,SUSE,SLE,Suse Enterprise,Suse Linux,openSUSE,open SUSE,Leap,Linux,uCLnux,Podman,電気回路,電子回路,基板,プリント基板
|description={{PAGENAME}} - 電子回路とSUSE Linuxに関する情報 | This page is {{PAGENAME}} in our wiki about electronic circuits and SUSE Linux
|image=/resources/assets/MochiuLogo_Single_Blue.png
}}

__FORCETOC__
[[カテゴリ:C_Sharp]]