Avalonia UI - Avalonia XML
概要
Avalonia UIのXMLマークアップ言語は、ユーザインターフェイスを宣言的に定義するための強力なツールである。
このマークアップ言語はXAMLに似ているが、Avaloniaに特化した機能と構文を持つ。
Avalonia XMLの基本構造は、ルート要素から始まり、<Window>や<UserControl>等のコントロールが使用される。
これらの要素内に、他のUIコンポーネントやレイアウトコントロールをネストして配置する。
以下の例では、ウインドウ内にStackPanelコントロールを配置して、その中にTextBlockコントロールとButtonコントロールを追加している。
<Window xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="My Avalonia App" Height="300" Width="400">
<StackPanel>
<TextBlock Text="Welcome to Avalonia!"/>
<Button Content="Click me"/>
</StackPanel>
</Window>
Avalonia XMLでは、コントロールのプロパティを属性として設定できる。
また、より複雑なプロパティの場合は、プロパティ要素構文を使用することもできる。
スタイリングとテーマ設定も、XMLマークアップ内で直接行うことができる。
Styles要素を使用してスタイルを定義して、特定のコントロールやクラスに適用することができる。
バインディングは、Avalonia XMLの重要な機能の1つである。
データコンテキストを設定して、{Binding}構文を使用してプロパティをバインドすることにより、View ModelとUIを連携させることができる。
コントロールテンプレートを使用する場合、既存のコントロールの外観や動作をカスタマイズすることができる。
これにより、アプリケーション全体で一貫したデザインを維持しつつ、独自のルックアンドフィールを定義することも可能である。
Avalonia XMLは、リソースディクショナリもサポートしており、色、ブラシ、スタイル等のリソースを1箇所で定義して、アプリケーション全体で再利用することができる。
Avalonia XMLはカスタムコントロールの定義およびユーザコントロールの定義もサポートしている。
これにより、再利用可能なUIコンポーネントを定義して、アプリケーション全体で使用することができる。
名前空間宣言
Avalonia XMLファイルの最上部で名前空間を宣言する。
これにより、使用する要素やプロパティの出処を指定する。
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
要素構文
XMLの基本ルールに従い、要素は開始タグと終了タグで囲まれる。
<ElementName>内容</ElementName>
自己終了要素も使用可能である。
<ElementName />
属性構文
要素のプロパティは属性として設定できる。
<ElementName Property1="Value1" Property2="Value2" />
プロパティ要素構文
複雑なプロパティ値の場合、プロパティ要素構文を使用する。
<ElementName>
<ElementName.PropertyName>
複雑な値
</ElementName.PropertyName>
</ElementName>
マークアップ拡張
特殊な値や動的な値を設定する場合に使用する。(中括弧で囲む)
Property="{MarkupExtension}"
主な種類を以下に示す。
- バインディング
- データソースとUIをつなぐ。
- 例:
Text="{Binding Name}"
- スタティックリソース
- 定義済みリソースを参照する。
- 例:
Background="{StaticResource PrimaryBrush}"
- テンプレートバインディング
- テンプレート内で親要素にバインドする。
- 例:
Content="{TemplateBinding Content}"
イベントハンドラ
コードビハインドのバインド
イベントをコードビハインドのメソッドにバインドする。
<!-- 基本的な構文 -->
<コントロール名 イベント名="コードビハインドで定義されたメソッド名"/>
<!-- ボタンのクリックイベントをバインドする場合 -->
<!-- OnButtonClickedというメソッドがコードビハインドに存在する必要がある -->
<Button Click="OnButtonClicked">Click me</Button>
コードビハインドでの対応するメソッドは、以下に示すように定義する。
イベントハンドラメソッドは、2つのパラメータを受け取る。
- sender
- イベントを発生させたオブジェクト
- e
- イベント固有の追加情報を含むイベント引数
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void OnButtonClicked(object sender, RoutedEventArgs e)
{
// イベントハンドラのロジックをここに記述
}
}
※注意
- メソッド名の一致
- Avalonia XMLで指定したメソッド名とコードビハインドのメソッド名が完全に一致している必要がある。
- アクセス修飾子
- イベントハンドラメソッドは、
privateまたはprotectedとして定義する。
- イベントハンドラメソッドは、
- 部分クラス
- コードビハインドクラスは
partialとして定義することにより、XMLファイルと関連付けられる。
- コードビハインドクラスは
- 名前空間
- XMLファイルとコードビハインドファイルが同じ名前空間にあることを確認する。
コマンドバインディング
直接イベントハンドラをバインドする代わりに、コマンドを使用することもできる。
<Button Command="{Binding MyCommand}">Execute Command</Button>
イベント引数の変換
x:Argumentsを使用して、イベント引数を変換または追加することができる。
<Button Click="OnButtonClicked">
i:Interaction.Behaviors>
<ia:EventTriggerBehavior EventName="Click">
<ia:InvokeCommandAction Command="{Binding MyCommand}">
<ia:InvokeCommandAction.CommandParameter>
<x:Arguments>
<x:String>Custom Parameter</x:String>
</x:Arguments>
</ia:InvokeCommandAction.CommandParameter>
</ia:InvokeCommandAction>
</ia:EventTriggerBehavior>
</i:Interaction.Behaviors>
</Button>
コレクション構文
要素のコレクションプロパティを設定する場合に使用する。
<ElementName>
<ElementName.CollectionProperty>
<Item1 />
<Item2 />
</ElementName.CollectionProperty>
</ElementName>
コメント
通常のXML形式でコメントを記述できる。
<!-- これはコメントです -->
条件付きコンパイル
XAML内で条件付きコンパイルを使用できる。
<ElementName x:if="条件">
条件が真の場合のみ含まれる内容
</ElementName>