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コントロールを特定する場合にも使用されることがある。

Content

ボタン内に表示されるコンテンツを指定する。
テキスト、画像、その他のUIエレメントを含めることができる。

 <Button Content="Click me" />

Command

ボタンがクリックされた時に実行されるコマンドを指定する。
一般的に、ビューモデルと連携して使用する。

 <Button Command="{Binding MyCommand}" />

CommandParameter

Command属性で指定されたコマンドに渡されるパラメータを指定する。

 <Button Command="{Binding MyCommand}" CommandParameter="SomeValue" />

IsDefault

trueを指定する場合、このボタンがフォーム内のデフォルトボタンになる。
[Enter]キーを押下した時に自動的にクリックされる。

 <Button IsDefault="True" Content="OK" />

IsCancel

trueに指定する場合、このボタンがキャンセルボタンになる。
[Escape]キーを押下した時に自動的にクリックされる。

 <Button IsCancel="True" Content="Cancel" />

ClickMode

ボタンがクリックされたと見なされるタイミングを指定する。

以下に示すいずれかを選択することができる。

• Press (押下された時)
• Release (離された時)
• Hover (ホバー時)

 <Button ClickMode="Press" Content="Click Me" />

Background

ボタンの背景色を指定する。

 <Button Background="Blue" Content="Blue Button" />

Foreground

ボタンのテキスト色を指定する。

 <Button Foreground="White" Content="White Text" />

BorderBrush

ボタンの境界線の色を指定する。

 <Button BorderBrush="Red" Content="Red Border" />

BorderThickness

ボタンの境界線の太さを指定する。

 <Button BorderThickness="2" Content="Thick Border" />

CornerRadius

ボタンの角の丸みを指定する。

 <Button CornerRadius="10" Content="Rounded Corners" />

Padding

ボタンの内部余白を指定する。

 <Button Padding="10,5" Content="Padded Button" />

HorizontalContentAlignment

ボタン内のコンテンツの水平方向の配置を指定する。

 <Button HorizontalContentAlignment="Center" Content="Centered" />

VerticalContentAlignment

ボタン内のコンテンツの垂直方向の配置を指定する。

 <Button VerticalContentAlignment="Center" Content="Centered" />

FontFamily

ボタンのテキストのフォントファミリーを指定する。

 <Button FontFamily="Arial" Content="Arial Font" />

FontSize

ボタンのテキストのフォントサイズを指定する。

 <Button FontSize="16" Content="16pt Text" />

FontWeight

ボタンのテキストのフォントの太さを指定する。

 <Button FontWeight="Bold" Content="Bold Text" />

IsEnabled

ボタンの有効 / 無効状態を指定する。
falseに指定する場合、ボタンは非活性 (クリックが無効) となる。

 <Button IsEnabled="False" Content="Disabled Button" />

Opacity

ボタンの不透明度を0.0 (透明) から 1.0 (不透明) の間で指定する。

 <Button Opacity="0.5" Content="Semi-transparent" />

Tag

ボタンに関連付けられた任意のデータを格納するために使用する。

 <Button Tag="CustomData" Content="Tagged Button" />

使用例

以下の例では、緑色の背景に白いテキストを持つSubmitボタンを定義している。
ボタンは丸みを帯びており、太字のテキストを使用している。
また、ビューモデルのSubmitCommandにバインドされており、CanSubmitプロパティに基づいて有効 / 無効が切り替わる。

 <Button Content="Submit"
         Command="{Binding SubmitCommand}"
         IsEnabled="{Binding CanSubmit}"
         Background="Green"
         Foreground="White"
         Padding="10,5"
         CornerRadius="5"
         FontWeight="Bold">
 </Button>

イベント

ボタンイベントとは

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コントロールには多くのプロパティが存在する。

ボタンコントロールのプロパティを使用することにより、C#のコードからAvalonia UIのボタンの外観や動作を動的に操作することができる。
例えば、ユーザのアクションやアプリケーションの状態に応じてボタンの外観や機能を変更することができる。

視覚的な要素から機能的な面まで、幅広い調整が可能である。
特に重要なのは、Content、Command、IsEnabled、Background、Foregroundのプロパティである。
これらは頻繁に使用され、ボタンの基本的な外観と機能を定義するのに役立つ。

Buttonコントロールのプロパティ

プロパティ名	データ型	説明
Content	object	ボタン内に表示されるコンテンツを取得または設定する。 例: myButton.Content = "Click Me";
Command	ICommand	ボタンが押下された時に実行されるコマンドを取得または設定する。 ボタンが押下された時、呼び出されるICommandインターフェースのインスタンス。 例: myButton.Command = new RelayCommand(ExecuteMethod);
CommandParameter	object	コマンドに渡されるパラメータを取得または設定する。 例: myButton.CommandParameter = someObject;
IsDefault	bool	ボタンがデフォルトボタンであるかどうかを示す値を取得または設定する。 例: myButton.IsDefault = true;
IsCancel	bool	ボタンがキャンセルボタンであるかどうかを示す値を取得または設定する。 例: myButton.IsCancel = true;
ClickMode	ClickMode	ボタンが押下されたと見なされるタイミングを取得または設定する。 (ボタンが押下された時、どのように反応するかを記述する。) 例: myButton.ClickMode = ClickMode.Press;
IsPressed	bool	ボタンが現在押されているかどうかを示す値を取得する。 (読み取り専用) 例: bool isPressed = myButton.IsPressed;
Background	IBrush	ボタンの背景を取得または設定する。 例: myButton.Background = Brushes.Blue;
Foreground	IBrush	ボタンの前景 (主にテキスト) の色を取得または設定する。 例: myButton.Foreground = Brushes.White;
BorderBrush	IBrush	ボタンの境界線の色を取得または設定する。 例: myButton.BorderBrush = Brushes.Black;
BorderThickness	Thickness	ボタンの境界線の太さを取得または設定する。 例: myButton.BorderThickness = new Thickness(2);
CornerRadius	CornerRadius	ボタンの角の丸みを取得または設定する。 例: myButton.CornerRadius = new CornerRadius(5);
Padding	Thickness	ボタンの内部余白を取得または設定する。 例: myButton.Padding = new Thickness(5, 10);
HorizontalContentAlignment	HorizontalAlignment	ボタン内のコンテンツの水平方向の配置を取得または設定する。 例: myButton.HorizontalContentAlignment = HorizontalAlignment.Center;
VerticalContentAlignment	VerticalAlignment	ボタン内のコンテンツの垂直方向の配置を取得または設定する。 例: myButton.VerticalContentAlignment = VerticalAlignment.Center;
FontFamily	FontFamily	ボタンのテキストのフォントファミリーを取得または設定する。 例: myButton.FontFamily = new FontFamily("Arial");
FontSize	double	ボタンのテキストのフォントサイズを取得または設定する。 例: myButton.FontSize = 16;
FontWeight	FontWeight	ボタンのテキストのフォントの太さを取得または設定する。 例: myButton.FontWeight = FontWeight.Bold;
IsEnabled	bool	ボタンが有効かどうかを示す値を取得または設定する。 例: myButton.IsEnabled = false;
Opacity	double	ボタンの不透明度を取得または設定する。 例: myButton.Opacity = 0.5;
Tag	object	ボタンに関連付けられた任意のデータを取得または設定する。 例: myButton.Tag = someObject;

使用例

以下の例では、ボタンの外観を初期化して、クリックイベントを設定している。
ボタンが押下された時、そのコンテンツが変更されて無効化している。

 public class MainWindow : Window
 {
    private Button myButton;
 
    public MainWindow()
    {
       InitializeComponent();
       myButton = this.FindControl<Button>("MyButton");
 
       // ボタンのプロパティを設定
       myButton.Content      = "Click Me";
       myButton.Background   = Brushes.Blue;
       myButton.Foreground   = Brushes.White;
       myButton.FontSize     = 16;
       myButton.Padding      = new Thickness(10);
       myButton.CornerRadius = new CornerRadius(5);
 
       // クリックイベントを設定
       myButton.Click += MyButton_Click;
    }
 
    private void MyButton_Click(object sender, RoutedEventArgs e)
    {
       // ボタンがクリックされた時の処理
       myButton.Content = "Clicked!";
       myButton.IsEnabled = false;
    }
 }

コマンドの使用

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>