MochiuWiki : SUSE, EC, PCB

「Avalonia UI - スタイル定義」の版間の差分

📢 Webサイト閉鎖と移転のお知らせ
このWebサイトは2026年9月に閉鎖いたします。
新しい記事は移転先で追加しております。（旧サイトでは記事を追加しておりません）

ビジュアルウィキテキスト
ページの作成:「== 概要 == コントロールのスタイルおよびテンプレートを別ファイルとして定義して再利用する<u>"スタイルの外部化"</u>を行う。<br> <br> スタイルの外部化を行うことにより、以下に示すようなメリットがある。<br> * 開発効率の向上 *: デザイナーと開発者の分業が容易になり、並行作業が可能になる。 *: コンポーネントの部品化による再利用性の向上…」
 
 
(同じ利用者による、間の4版が非表示)
40行目: 40行目:
<br><br>
<br><br>


== リソースディクショナリとして定義 ==
== スタイル定義ファイルの作成 ==
リソースディクショナリとして定義する。<br>
<br>
スタイル定義ファイルは.axamlまたは.axaml.csとして作成する。<br>
<br>
==== リソースディクショナリの基本構造 ====
<center>
{| class="wikitable" | style="background-color:#fefefe;"
! style="background-color:#66CCFF;" | タグ / 属性
! style="background-color:#66CCFF;" | 説明
! style="background-color:#66CCFF;" | 備考
|-
| style="text-align: center;" | ResourceDictionary
| スタイルやリソースを定義するためのルート要素
| アプリケーション全体で使用可能なリソースを格納する。<br>複数のリソースディクショナリを結合可能にする。
|-
| style="text-align: center;" | xmlns="https://github.com/avaloniaui"
| Avalonia UIの名前空間を定義する。
| Avalonia UIの基本コントロールと機能へのアクセスを提供する。
|-
| style="text-align: center;" | xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
| XAMLの基本名前空間を定義する。
| XAML言語の基本機能へのアクセスを提供する。
|}
</center>
<br>
==== スタイル定義の構造 ====
<center>
{| class="wikitable" | style="background-color:#fefefe;"
! style="background-color:#66CCFF;" | タグ / 属性
! style="background-color:#66CCFF;" | 説明
! style="background-color:#66CCFF;" | 使用例
|-
| style="text-align: center;" | Style Selector="<コントロール名>.<クラスセレクタ名>"
| スタイルを適用するターゲットを指定する。
| 例えば、<code>Style Selector="Button.modern"</code>は、modernクラスが指定されたボタンを選択する。<br>CSSセレクタに似た構文である。
|-
| style="text-align: center;" | Setter
| プロパティの値を設定する。
|
* Property
*: プロパティ名
* Value
*: プロパティの値
|-
| style="text-align: center;" | Transitions
| アニメーション遷移を定義する。
| 複数のトランジションをグループ化する。<br>プロパティ変更時の動的な変化を定義
|-
| style="text-align: center;" | TransformOperationsTransition
| 変形アニメーションを定義する。
|
例:
* Property="RenderTransform"
* Duration="0.2"
* Easing="CubicEaseOut"
|-
| style="text-align: center;" | BrushTransition
| 色の変化アニメーションを定義する。
|
例:
* Property="Background"
* Duration="0.2"
* Easing="CubicEaseOut"
|-
| style="text-align: center;" | Style Selector="^:pointerover"
| マウスホバー時のスタイルを定義する。
| <code>^</code>は、親セレクタを参照する。<br><code>:pointerover</code>は、マウスホバー状態を示す。
|-
| style="text-align: center;" | Style Selector="^:pressed"
| ボタン押下時のスタイルを定義する。
| <code>:pressed</code>は、ボタンが押下された状態を示す。
|}
</center>
<br>
==== Setterプロパティの詳細 ====
<center>
{| class="wikitable" | style="background-color:#fefefe;"
! style="background-color:#66CCFF;" | プロパティ
! style="background-color:#66CCFF;" | 設定値
! style="background-color:#66CCFF;" | 説明
|-
| style="text-align: center;" | Background
| カラー名または#xxxxxx<br>例1 : White<br>例2: #2196F3 (マテリアルデザインのブルー)
| 背景色
|-
| style="text-align: center;" | Foreground
| カラー名または#xxxxxx<br>例1 : White<br>例2: #2196F3 (マテリアルデザインのブルー)
| 文字色
|-
| style="text-align: center;" | CornerRadius
| 整数値
| 角の丸み (ピクセル単位)
|-
| style="text-align: center;" | Padding
| <整数値>,<整数値><br>例: 16,8　(左右16px, 上下8px)
| 内部余白
|-
| style="text-align: center;" | BorderThickness
| <整数値>
| 境界線の太さ
|-
| style="text-align: center;" | HorizontalContentAlignment
| Center
| 水平方向の配置
|-
| style="text-align: center;" | VerticalContentAlignment
| Center
| 垂直方向の配置
|-
| style="text-align: center;" | RenderTransform
| 例. 102%にする場合 : scale(1.02)<br>例. 98%にする場合 : scale(0.98)
| ホバー時の拡大率および縮小率
|}
</center>
<br>
==== 使用例 ====
  <syntaxhighlight lang="xml">
  <syntaxhighlight lang="xml">
  <!-- /Styles/ButtonStyles.axaml -->
  <!-- /Styles/ButtonStyles.axaml -->
  <ResourceDictionary xmlns="https://github.com/avaloniaui"
  <ResourceDictionary xmlns="https://github.com/avaloniaui"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
74行目: 191行目:
<br><br>
<br><br>


== App.axamlでスタイル定義を読み込む ==
== スタイル定義の読み込み ==
App.axamlでスタイルを読み込むことにより、アプリケーション全体で使用可能になる。<br>
複数のStyleIncludeを定義することにより、複数のスタイルファイルを読み込むことが可能となる。<br>
<br>
<u>※注意</u><br>
<u>読み込み順序において、後に読み込まれたスタイルが優先される。</u><br>
<u>リソースディクショナリとして定義されたスタイルを読み込む。</u><br>
<br>
  <syntaxhighlight lang="xml">
  <syntaxhighlight lang="xml">
  <Application xmlns="https://github.com/avaloniaui"
  <Application xmlns="https://github.com/avaloniaui"
83行目: 207行目:
       <!-- スタイルの読み込み -->
       <!-- スタイルの読み込み -->
       <StyleInclude Source="/Styles/ButtonStyles.axaml"/>
       <StyleInclude Source="/Styles/ButtonStyles.axaml"/>
      <StyleInclude Source="/Styles/TextBoxStyles.axaml"/>
      <StyleInclude Source="/Styles/Colors.axaml"/>
     </Application.Styles>
     </Application.Styles>
  </Application>
  </Application>
</syntaxhighlight>
<br>
<center>
{| class="wikitable"
! タグ / 属性名
! 説明
! 備考
|-
| StyleInclude
| スタイルを読み込むためのタグ
| Avalonia UIの組み込み要素である。<br>外部スタイルファイルを参照する時に使用する。
|-
| Source
| スタイルファイルのパスを指定する。<br>これは、プロジェクトルートからの相対パスである。
| 先頭の"/"はプロジェクトルートを示す。<br>これは、ビルド時に自動的に解決される。
|-
| /xxx/yyy.axaml<br><br>例: /Styles/ButtonStyles.axaml
| スタイルファイルのパス
| xxxディレクトリのyyy.axamlを参照する。<br>axaml拡張子は、Avalonia XAMLファイルを示す。<br><br>これは、プロジェクトのトップディレクトリからのパスである。
|}
</center>
<br>
その他、指定可能なプロパティを下表に示す。<br>
<center>
{| class="wikitable" | style="background-color:#fefefe;"
! style="background-color:#66CCFF;" | タグ / 属性名
! style="background-color:#66CCFF;" | 説明
! style="background-color:#66CCFF;" | 使用例
|-
| Mode
| スタイルの読み込みモードを指定する。
|
* <code>Mode="Append"</code>
*: 既存のスタイルに追加 (デフォルト)
* <code>Mode="Replace"</code>
*: 既存のスタイルを置き換え
<br>
<u>※注意</u><br><u>Mode属性 (特に、Replace) は慎重に使用する必要がある。</u>
|-
| ResourceType
| リソースの型を明示的に指定する。
| <code>ResourceType="{x:Type local:CustomStyles}"</code>
<br>
<u>※注意</u><br><u>ResourceTypeは必要な場合のみ指定する。</u>
|-
| DynamicResource
| 動的リソース参照を指定する。
| <code>DynamicResource="CustomThemeStyles"</code>
<br>
<u>※注意</u><br><u>DynamicResourceを使用する場合は、パフォーマンスへの影響を考慮する必要がある。</u>
|-
| IsEnabled
| スタイルの有効 / 無効を制御する。
| <code>IsEnabled="{Binding IsCustomStyleEnabled}"</code>
<br>
<u>※注意</u><br>IsEnabled属性をバインディングで制御する場合は、適切なデータコンテキストが必要となる。<br>
|-
| x:Key
| スタイルのキーを指定する。
| <code>x:Key="CustomButtonStyle"</code>
|-
| x:Shared
| リソースの共有状態を指定する。
| <code>x:Shared="False"</code>
|}
</center>
<br>
<syntaxhighlight lang="xml">
<!-- 基本的な使用例 -->
<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"/>
  </syntaxhighlight>
  </syntaxhighlight>
<br><br>
<br><br>
「http://mochiuwiki.e2.valueserver.jp/index.php?title=Avalonia_UI_-_スタイル定義」から取得