Avalonia UI - Button

Buttonコントロール

Buttonコントロールとは

ボタンはカーソルポインタの操作に反応するコントロールである。
カーソルポインタが下にある時、ボタンが押下された状態で視覚的なフィードバックを表示する。

カーソルポインタが下がってから離すまでのシーケンスはクリックと解釈され、この動作は設定可能である。

ボタンは、コードビハインドでClickイベントを発生させることができる。

また、commandプロパティにICommandインターフェースのインスタンスをバインドすることもできる。
バインドされたコマンドは、ボタンがクリックされるたびに実行される。

※注意
ユーザによってボタンが押下されたかどうかを判断する場合は、PointerPressedイベントではなく、常にClickイベントを使用すること。
Clickイベントは、ボタンが押下されたことを示すボタン固有の高レベルのイベントである。
PointerPressedイベントは低レベルの入力イベントであり、Clickイベントを発生させるためにButtonコントロールが内部的に処理する必要があるものである。

ButtonコントロールはPointerPressedイベントを処理するため (IsHandledプロパティがtrueになる)、他のコントロールのようにアプリケーションがこのイベントを受け取ることはない。

Buttonコントロールに関する完全なAPIドキュメントは、Avalonia UIの公式ドキュメントを参照すること。

イベント

Avalonia UIにおけるイベントは、ユーザインタラクションやコントロール固有のアクションに応答する方法を提供する。

以下の例では、Buttonコントロールにおいて、ClickイベントにonBtnClickedイベントハンドラを追加している。

イベントをサブスクライブするには、コントロールで処理したいイベントを特定する。
Avalonia UIの多くのコントロールは、ClickイベントやSelectionChangedイベント等の様々なイベントを公開している。
XAMLでコントロールの場所を特定して、イベントの名前とイベントハンドラメソッドの名前を示す値を持つ属性を追加することにより、イベントをサブスクライブする。

 <!-- MainWindow.axaml -->
 
 <Window xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         x:Class="AvaloniaApplication1.Views.MainWindow">
   <StackPanel Margin="20">
     <Button Name="myButton" Content="Click Me" Click="onBtnClicked" />
     <Button Click="onBtnClicked2">Click Me 2!</Button>
     <TextBlock Margin="0 10" x:Name="message">Ready...</TextBlock>
   </StackPanel>
 </Window>

イベントハンドラを実装するには、イベントがトリガーされた時に実行されるイベントハンドラをコードビハインドに記述する。

 // MainWindow.axaml.cs
 
 public partial class MainWindow : Window
 {
    public MainWindow()
    {
       InitializeComponent();
    }
 
    private void onBtnClicked(object sender, RoutedEventArgs e)
    {
       message.Text = "Button clicked!";
    }
 }

プロパティ

Buttonコントロールのプロパティにおいて、使用される頻度の高いプロパティを以下に示す。

• ClickModeプロパティ

  ボタンが押下された時、どのように反応するかを記述する。

• Commandプロパティ

  ボタンが押下された時、呼び出されるICommandインターフェースのインスタンス。

コマンドの使用

Avalonia UIのコマンドは、ユーザアクションを実装ロジックから切り離し、ユーザインタラクションを処理するための高レベルなアプローチを提供する。
イベントがUIコントロールのコードビハインドで定義されるのに対して、コマンドは、通常、データコンテキストのプロパティまたはメソッドにバインドされる。

※注意
コマンドは、Commandプロパティを提供する全てのコントロールで使用できる。
コマンドは、通常、コントロールの主なインタラクション方法 (例: ボタンのクリックが発生した場合等) にトリガーされる。

コマンドを使用する最も簡単な方法は、オブジェクトのデータコンテキストにあるメソッドにバインドすることである。

1. まず、ビューモデルにメソッドを追加する。

   コマンドを処理するメソッドをビューモデルに定義する。

2. 次に、メソッドをバインドする。

   メソッドとそれをトリガーするコントロールを関連付ける。

 public class MainWindowViewModel
 {
    public bool HandleButtonClick()
    {
       // ボタンクリック時のイベントハンドラの処理
    }
 }

 <Button Content="Click Me" Command="{Binding HandleButtonClick}" />

カスタムコントロール

Avalonia UIにおいて、Buttonコントロールを拡張する場合は、カスタムコントロールを作成することが一般的なアプローチである。
これにより、標準のButtonコントロールの機能に加えて、独自のプロパティ、メソッド、イベントを追加することができる。

以下の例では、カスタムButtonクラス (ExtendedButtonクラス) にCustomBackgroundプロパティを追加して、それをテンプレートで使用している。
また、必要に応じて、他のプロパティおよびロジックを追加してカスタマイズを行うことができる。

Avalonia UIでは、コントロールを拡張してソフトウェアのニーズに合わせたカスタマイズを行うことができる。

カスタムButtonクラスの作成

まず、Buttonクラスを継承する新しいクラスを作成する。
このクラスでは、新しいプロパティ、メソッドを追加して、Buttonコントロールの機能を拡張する。

 // ExtendedButton.cs
 
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Media;
 
 namespace <任意の名前空間名>
 {
    public class <カスタムButtonのクラス名> : Button
    {
       public static readonly StyledProperty<Brush> CustomBackgroundProperty = AvaloniaProperty.Register<ExtendedButton, Brush>(nameof(CustomBackground));
 
       public Brush CustomBackground
       {
          get => GetValue(CustomBackgroundProperty);
          set => SetValue(CustomBackgroundProperty, value);
       }
 
       // カスタムロジックやプロパティを追加
       // ...略
    }
 }

スタイルとテンプレートの定義

次に、カスタムButtonクラスの外観を定義するため、スタイルとテンプレートを定義する。
これは、Avaloniaのリソース辞書ファイル (例えば、Themesフォルダ内のGeneric.xaml) で行うことができる。

 <!-- ExtendedButton.xaml -->
 
 <Style xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:<任意の名前空間名>"
        TargetType="local:<カスタムButtonのクラス名>">
    <Setter Property="Template">
       <ControlTemplate TargetType="local:<カスタムButtonのクラス名>">
          <Border Background="{TemplateBinding CustomBackground}">
             <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
          </Border>
       </ControlTemplate>
    </Setter>
 </Style>

カスタムButtonクラスの使用

上記の手順により、カスタムButtonクラスをXAMLおよびコードビハインドで使用することができる。

 <!-- MainWindow.axaml -->
 
 <Window xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:local="clr-namespace:<任意の名前空間名>"
         x:Class="<アプリケーションの名前空間名>.MainWindow">
         Title="<アプリケーションのタイトル>" Height="600" Width="1024">
    <StackPanel>
       <local:<カスタムButtonのクラス名> CustomBackground="SkyBlue" Content="Custom Button" />
    </StackPanel>
 </Window>