MochiuWiki : SUSE, EC, PCB

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

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

← 古い編集
ビジュアルウィキテキスト
 
(同じ利用者による、間の3版が非表示)
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>
App.axamlでスタイルを読み込むことにより、アプリケーション全体で使用可能になる。<br>
複数のStyleIncludeを定義することにより、複数のスタイルファイルを読み込むことが可能となる。<br>
複数のStyleIncludeを定義することにより、複数のスタイルファイルを読み込むことが可能となる。<br>
116行目: 233行目:
</center>
</center>
<br>
<br>
その他、指定可能なプロパティを下表に示す。<br>
<center>
<center>
{| class="wikitable" | style="background-color:#fefefe;"
{| class="wikitable" | style="background-color:#fefefe;"
「http://mochiuwiki.e2.valueserver.jp/index.php?title=Avalonia_UI_-_スタイル定義」から取得