Avalonia UI - Button

概要

カスタムコントロール

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>