Avalonia UI - Button

概要

Buttonコントロールとは

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

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

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

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

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

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

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

属性

Name

ButtonコントロールのName属性は、UIコントロールに一意の識別子を割り当てるために使用される重要な属性である。
Name属性は、UIコントロールをソースコードで制御または特定する場合に有効な設定である。

※注意

• Name属性の値は、そのスコープ内で一意である必要がある。
• 大文字小文字は区別される。
• 名前には空白や特殊文字を含めることはできない。
• パフォーマンスの観点から、必要なコントロールにのみName属性を設定することが推奨される。

• コードビハインドからのアクセス

  Name属性の主な目的は、コードビハインド (C#コード) からUIコントロールに直接アクセスできるようにすることである。

  Name属性で指定した名前を使用して、コードからボタンのプロパティを変更、あるいは、メソッドを呼び出すことができる。

  
  

  以下の例では、ボタンのName属性にmyButtonという名前を指定している。

   public void SomeMethod()
   {
       myButton.Content = "New Text";
       myButton.IsEnabled = false;
   }
  

  
  

• イベントハンドリング

  イベントハンドラにおいて、センダーオブジェクトを特定のコントロールにキャストする場合にも役立つ。

   private void onBtnClicked(object sender, RoutedEventArgs e)
   {
      if (sender is Button clickedButton && clickedButton.Name == "myButton")
      {  // myButtonをクリックし時の特定の処理
      }
   }
  

  
  

• スタイルやテンプレートでのターゲット指定

  特定の名前を持つコントロールにスタイルやテンプレートを適用する場合にも使用できる。

   <Style Selector="Button#myButton">
     <Setter Property="Background" Value="Red"/>
   </Style>
  

  
  

• アニメーションのターゲット指定

  アニメーションを特定のコントロールに適用する場合にも利用できる。

   <Storyboard>
     <DoubleAnimation Storyboard.TargetName="myButton"
                      Storyboard.TargetProperty="Opacity"
                      From="1" To="0" Duration="0:0:1"/>
   </Storyboard>
  

  
  

• データバインディング

  他のコントロールやビューモデルとのデータバインディングで参照として使用することができる。

   <TextBlock Text="{Binding ElementName=myButton, Path=Content}"/>
  

  
  

• テスト自動化

  自動化テストツールでUIコントロールを特定する場合にも使用されることがある。

イベント

ボタンイベントとは

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

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

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

ボタンイベントの種類

Avalonia UIのButtonコントロールには、以下に示すようなイベントがある。
これらのイベントは、ユーザインタラクションや状態の変化に応じて発生する。

• Clickイベント

  ボタンがクリックされた時に発生する。

  
  

• PointerPressedイベント

  マウスボタンが押下された時、または、触覚入力デバイスがボタンに接触した時に発生する。

  
  

• PointerReleasedイベント

  マウスボタンが離された時、または、触覚入力デバイスがボタンから離れた時に発生する。

  
  

• PointerEnterイベント

  ポインタ (マウスカーソル等) がボタンの領域に入った時に発生する。

  
  

• PointerLeaveイベント

  ポインタがボタンの領域から出た時に発生する。

  
  

• PointerMovedイベント

  ポインタがボタンの上で移動した時に発生する。

  
  

• Tappedイベント

  ボタンがタップされた時に発生する。

  主に、タッチスクリーンデバイスで使用する。

  
  

• DoubleTappedイベント

  ボタンが素早く2回タップされた時に発生する。

  
  

• RightTappedイベント

  ボタンが右クリックされた時に発生する。

  
  

• GotFocusイベント

  ボタンがフォーカスを取得した時に発生する。

  
  

• LostFocusイベント

  ボタンがフォーカスを失った時に発生する。

  
  

• ContextRequestedイベント

  コンテキストメニューが要求された時に発生する。(一般的には、右クリック)

※注意

• メソッド名の一致

  Avalonia XMLで指定したメソッド名とコードビハインドのメソッド名が完全に一致している必要がある。

• アクセス修飾子

  イベントハンドラメソッドは、private または protected として定義する。

• 部分クラス

  コードビハインドクラスは partial として定義することにより、XMLファイルと関連付けられる。

• 名前空間

  XMLファイルとコードビハインドファイルが同じ名前空間にあることを確認する。

以下の例では、1つのボタンコントロールに複数のイベントを使用している。

 <!-- Avalonia XML -->
 
 <Button Click="OnButtonClicked"
    PointerEnter="OnPointerEnter"
    PointerLeave="OnPointerLeave"
    Tapped="OnTapped">
    Click me
 </Button>

 // コードビハインドのイベントハンドラを定義
 // イベントをコードビハインドのメソッドにバインドする
 
 // イベントハンドラメソッドは、2つのパラメータを受け取る
 // sender : イベントを発生させたオブジェクト
 // e      : イベント固有の追加情報を含むイベント引数
 
 public void OnButtonClicked(object sender, RoutedEventArgs e)
 {  // クリックイベントの処理
 }
 
 public void OnPointerEnter(object sender, PointerEventArgs e)
 {  // ポインタがボタンに入った時の処理
 }
 
 public void OnPointerLeave(object sender, PointerEventArgs e)
 {  // ポインタがボタンから出た時の処理
 }
 
 public void OnTapped(object sender, TappedEventArgs e)
 {  // タップイベントの処理
 }

使用例

 <!-- 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>