13,005
回編集
「Avalonia UI - スタイル定義」の版間の差分
ナビゲーションに移動
検索に移動
→App.axamlでスタイル定義を読み込む
(ページの作成:「== 概要 == コントロールのスタイルおよびテンプレートを別ファイルとして定義して再利用する<u>"スタイルの外部化"</u>を行う。<br> <br> スタイルの外部化を行うことにより、以下に示すようなメリットがある。<br> * 開発効率の向上 *: デザイナーと開発者の分業が容易になり、並行作業が可能になる。 *: コンポーネントの部品化による再利用性の向上…」) |
|||
| 75行目: | 75行目: | ||
== App.axamlでスタイル定義を読み込む == | == 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行目: | 90行目: | ||
<!-- スタイルの読み込み --> | <!-- スタイルの読み込み --> | ||
<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> | |||
<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> | ||