Avalonia UI - Buttonのソースを表示

== 概要 ==
<br><br>

==== Buttonコントロールとは ====
ボタンはカーソルポインタの操作に反応するコントロールである。<br>
カーソルポインタが下にある時、ボタンが押下された状態で視覚的なフィードバックを表示する。<br>
<br>
カーソルポインタが下がってから離すまでのシーケンスはクリックと解釈され、この動作は設定可能である。<br>
<br>
ボタンは、コードビハインドでClickイベントを発生させることができる。<br>
<br>
また、<code>command</code>プロパティに<code>ICommand</code>インターフェースのインスタンスをバインドすることもできる。<br>
バインドされたコマンドは、ボタンがクリックされるたびに実行される。<br>
<br>
<u>※注意</u><br>
<u>ユーザによってボタンが押下されたかどうかを判断する場合は、<code>PointerPressed</code>イベントではなく、常に<code>Click</code>イベントを使用すること。</u><br>
<u><code>Click</code>イベントは、ボタンが押下されたことを示すボタン固有の高レベルのイベントである。</u><br>
<u><code>PointerPressed</code>イベントは低レベルの入力イベントであり、<code>Click</code>イベントを発生させるためにButtonコントロールが内部的に処理する必要があるものである。</u><br>
<br>
<u>Buttonコントロールは<code>PointerPressed</code>イベントを処理するため (<code>IsHandled</code>プロパティが<code>true</code>になる)、他のコントロールのようにアプリケーションがこのイベントを受け取ることはない。</u><br>
<br>
Buttonコントロールに関する完全なAPIドキュメントは、[https://reference.avaloniaui.net/api/Avalonia.Controls/Button/ Avalonia UIの公式ドキュメント]を参照すること。<br>
<br><br>

== 属性 ==
==== Name ====
Buttonコントロールの<code>Name</code>属性は、UIコントロールに一意の識別子を割り当てるために使用される重要な属性である。<br>
<code>Name</code>属性は、UIコントロールをソースコードで制御または特定する場合に有効な設定である。<br>
<br>
<u>※注意</u><br>
* Name属性の値は、そのスコープ内で一意である必要がある。
* 大文字小文字は区別される。
* 名前には空白や特殊文字を含めることはできない。
* パフォーマンスの観点から、必要なコントロールにのみName属性を設定することが推奨される。
<br>
* コードビハインドからのアクセス
*: Name属性の主な目的は、コードビハインド (C#コード) からUIコントロールに直接アクセスできるようにすることである。
*: Name属性で指定した名前を使用して、コードからボタンのプロパティを変更、あるいは、メソッドを呼び出すことができる。
*: <br>
*: 以下の例では、ボタンのName属性にmyButtonという名前を指定している。
*: <syntaxhighlight lang="c#">
 public void SomeMethod()
 {
     myButton.Content = "New Text";
     myButton.IsEnabled = false;
 }
 </syntaxhighlight>
*: <br>
* イベントハンドリング
*: イベントハンドラにおいて、センダーオブジェクトを特定のコントロールにキャストする場合にも役立つ。
*: <syntaxhighlight lang="c#">
 private void onBtnClicked(object sender, RoutedEventArgs e)
 {
    if (sender is Button clickedButton && clickedButton.Name == "myButton")
    {  // myButtonをクリックし時の特定の処理
    }
 }
 </syntaxhighlight>
*: <br>
* スタイルやテンプレートでのターゲット指定
*: 特定の名前を持つコントロールにスタイルやテンプレートを適用する場合にも使用できる。
*: <syntaxhighlight lang="xml">
 <Style Selector="Button#myButton">
   <Setter Property="Background" Value="Red"/>
 </Style>
 </syntaxhighlight>
*: <br>
* アニメーションのターゲット指定
*: アニメーションを特定のコントロールに適用する場合にも利用できる。
*: <syntaxhighlight lang="xml">
 <Storyboard>
   <DoubleAnimation Storyboard.TargetName="myButton"
                    Storyboard.TargetProperty="Opacity"
                    From="1" To="0" Duration="0:0:1"/>
 </Storyboard>
 </syntaxhighlight>
*: <br>
* データバインディング
*: 他のコントロールやビューモデルとのデータバインディングで参照として使用することができる。
*: <syntaxhighlight lang="xml">
 <TextBlock Text="{Binding ElementName=myButton, Path=Content}"/>
 </syntaxhighlight>
*: <br>
* テスト自動化
*: 自動化テストツールでUIコントロールを特定する場合にも使用されることがある。
<br>
==== Content ====
ボタン内に表示されるコンテンツを指定する。<br>
テキスト、画像、その他のUIエレメントを含めることができる。<br>
 <syntaxhighlight lang="xml">
 <Button Content="Click me" />
 </syntaxhighlight>
<br>
==== Command ====
ボタンがクリックされた時に実行されるコマンドを指定する。<br>
一般的に、ビューモデルと連携して使用する。<br>
 <syntaxhighlight lang="xml">
 <Button Command="{Binding MyCommand}" />
 </syntaxhighlight>
<br>
==== CommandParameter ====
Command属性で指定されたコマンドに渡されるパラメータを指定する。<br>
 <syntaxhighlight lang="xml">
 <Button Command="{Binding MyCommand}" CommandParameter="SomeValue" />
 </syntaxhighlight>
<br>
==== IsDefault ====
<code>true</code>を指定する場合、このボタンがフォーム内のデフォルトボタンになる。<br>
[Enter]キーを押下した時に自動的にクリックされる。<br>
 <syntaxhighlight lang="xml">
 <Button IsDefault="True" Content="OK" />
 </syntaxhighlight>
<br>
==== IsCancel ====
<code>true</code>に指定する場合、このボタンがキャンセルボタンになる。<br>
[Escape]キーを押下した時に自動的にクリックされる。<br>
 <syntaxhighlight lang="xml">
 <Button IsCancel="True" Content="Cancel" />
 </syntaxhighlight>
<br>
==== ClickMode ====
ボタンがクリックされたと見なされるタイミングを指定する。<br>
<br>
以下に示すいずれかを選択することができる。<br>
* Press (押下された時)
* Release (離された時)
* Hover (ホバー時)
<br>
 <syntaxhighlight lang="xml">
 <Button ClickMode="Press" Content="Click Me" />
 </syntaxhighlight>
<br>
==== Background ====
ボタンの背景色を指定する。<br>
 <syntaxhighlight lang="xml">
 <Button Background="Blue" Content="Blue Button" />
 </syntaxhighlight>
<br>
==== Foreground ====
ボタンのテキスト色を指定する。<br>
 <syntaxhighlight lang="xml">
 <Button Foreground="White" Content="White Text" />
 </syntaxhighlight>
<br>
==== BorderBrush ====
ボタンの境界線の色を指定する。<br>
 <syntaxhighlight lang="xml">
 <Button BorderBrush="Red" Content="Red Border" />
 </syntaxhighlight>
<br>
==== BorderThickness ====
ボタンの境界線の太さを指定する。<br>
 <syntaxhighlight lang="xml">
 <Button BorderThickness="2" Content="Thick Border" />
 </syntaxhighlight>
<br>
==== CornerRadius ====
ボタンの角の丸みを指定する。<br>
 <syntaxhighlight lang="xml">
 <Button CornerRadius="10" Content="Rounded Corners" />
 </syntaxhighlight>
<br>
==== Padding ====
ボタンの内部余白を指定する。<br>
 <syntaxhighlight lang="xml">
 <Button Padding="10,5" Content="Padded Button" />
 </syntaxhighlight>
<br>
==== HorizontalContentAlignment ====
ボタン内のコンテンツの水平方向の配置を指定する。<br>
 <syntaxhighlight lang="xml">
 <Button HorizontalContentAlignment="Center" Content="Centered" />
 </syntaxhighlight>
<br>
==== VerticalContentAlignment ====
ボタン内のコンテンツの垂直方向の配置を指定する。<br>
 <syntaxhighlight lang="xml">
 <Button VerticalContentAlignment="Center" Content="Centered" />
 </syntaxhighlight>
<br>
==== FontFamily ====
ボタンのテキストのフォントファミリーを指定する。<br>
 <syntaxhighlight lang="xml">
 <Button FontFamily="Arial" Content="Arial Font" />
 </syntaxhighlight>
<br>
==== FontSize ====
ボタンのテキストのフォントサイズを指定する。<br>
 <syntaxhighlight lang="xml">
 <Button FontSize="16" Content="16pt Text" />
 </syntaxhighlight>
<br>
==== FontWeight ====
ボタンのテキストのフォントの太さを指定する。<br>
 <syntaxhighlight lang="xml">
 <Button FontWeight="Bold" Content="Bold Text" />
 </syntaxhighlight>
<br>
==== IsEnabled ====
ボタンの有効 / 無効状態を指定する。<br>
<code>false</code>に指定する場合、ボタンは非活性 (クリックが無効) となる。<br>
 <syntaxhighlight lang="xml">
 <Button IsEnabled="False" Content="Disabled Button" />
 </syntaxhighlight>
<br>
==== Opacity ====
ボタンの不透明度を0.0 (透明) から 1.0 (不透明) の間で指定する。<br>
 <syntaxhighlight lang="xml">
 <Button Opacity="0.5" Content="Semi-transparent" />
 </syntaxhighlight>
<br>
==== Tag ====
ボタンに関連付けられた任意のデータを格納するために使用する。<br>
 <syntaxhighlight lang="xml">
 <Button Tag="CustomData" Content="Tagged Button" />
 </syntaxhighlight>
<br>
==== 使用例 ====
以下の例では、緑色の背景に白いテキストを持つSubmitボタンを定義している。<br>
ボタンは丸みを帯びており、太字のテキストを使用している。<br>
また、ビューモデルのSubmitCommandにバインドされており、CanSubmitプロパティに基づいて有効 / 無効が切り替わる。<br>
<br>
 <syntaxhighlight lang="xml">
 <Button Content="Submit"
         Command="{Binding SubmitCommand}"
         IsEnabled="{Binding CanSubmit}"
         Background="Green"
         Foreground="White"
         Padding="10,5"
         CornerRadius="5"
         FontWeight="Bold">
 </Button>
 </syntaxhighlight>
<br><br>

== イベント ==
==== ボタンイベントとは ====
Avalonia UIにおけるイベントは、ユーザインタラクションやコントロール固有のアクションに応答する方法を提供する。<br>
<br>
以下の例では、Buttonコントロールにおいて、ClickイベントにonBtnClickedイベントハンドラを追加している。<br>
<br>
イベントをサブスクライブするには、コントロールで処理したいイベントを特定する。<br>
Avalonia UIの多くのコントロールは、ClickイベントやSelectionChangedイベント等の様々なイベントを公開している。<br>
XAMLでコントロールの場所を特定して、イベントの名前とイベントハンドラメソッドの名前を示す値を持つ属性を追加することにより、イベントをサブスクライブする。<br>
<br>
==== ボタンイベントの種類 ====
Avalonia UIのButtonコントロールには、以下に示すようなイベントがある。<br>
これらのイベントは、ユーザインタラクションや状態の変化に応じて発生する。<br>
<br>
* Clickイベント
*: ボタンがクリックされた時に発生する。
*: <br>
* PointerPressedイベント
*: マウスボタンが押下された時、または、触覚入力デバイスがボタンに接触した時に発生する。
*: <br>
* PointerReleasedイベント
*: マウスボタンが離された時、または、触覚入力デバイスがボタンから離れた時に発生する。
*: <br>
* PointerEnterイベント
*: ポインタ (マウスカーソル等) がボタンの領域に入った時に発生する。
*: <br>
* PointerLeaveイベント
*: ポインタがボタンの領域から出た時に発生する。
*: <br>
* PointerMovedイベント
*: ポインタがボタンの上で移動した時に発生する。
*: <br>
* Tappedイベント
*: ボタンがタップされた時に発生する。
*: 主に、タッチスクリーンデバイスで使用する。
*: <br>
* DoubleTappedイベント
*: ボタンが素早く2回タップされた時に発生する。
*: <br>
* RightTappedイベント
*: ボタンが右クリックされた時に発生する。
*: <br>
* GotFocusイベント
*: ボタンがフォーカスを取得した時に発生する。
*: <br>
* LostFocusイベント
*: ボタンがフォーカスを失った時に発生する。
*: <br>
* ContextRequestedイベント
*: コンテキストメニューが要求された時に発生する。(一般的には、右クリック)
<br>
<u>※注意</u><br>
* メソッド名の一致
*: Avalonia XMLで指定したメソッド名とコードビハインドのメソッド名が完全に一致している必要がある。
* アクセス修飾子
*: イベントハンドラメソッドは、<code>private</code> または <code>protected</code> として定義する。
* 部分クラス
*: コードビハインドクラスは <code>partial</code> として定義することにより、XMLファイルと関連付けられる。
* 名前空間
*: XMLファイルとコードビハインドファイルが同じ名前空間にあることを確認する。
<br>
以下の例では、1つのボタンコントロールに複数のイベントを使用している。<br>
<br>
 <syntaxhighlight lang="xml">
 <!-- Avalonia XML -->
 
 <Button Click="OnButtonClicked"
    PointerEnter="OnPointerEnter"
    PointerLeave="OnPointerLeave"
    Tapped="OnTapped">
    Click me
 </Button>
 </syntaxhighlight>
<br>
 <syntaxhighlight lang="c#">
 // コードビハインドのイベントハンドラを定義
 // イベントをコードビハインドのメソッドにバインドする
 
 // イベントハンドラメソッドは、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)
 {  // タップイベントの処理
 }
 </syntaxhighlight>
<br>
==== 使用例 ====
 <syntaxhighlight lang="xml">
 <!-- 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>
 </syntaxhighlight>
<br>
イベントハンドラを実装するには、イベントがトリガーされた時に実行されるイベントハンドラをコードビハインドに記述する。<br>
 <syntaxhighlight lang="c#">
 // MainWindow.axaml.cs
 
 public partial class MainWindow : Window
 {
    public MainWindow()
    {
       InitializeComponent();
    }
 
    private void onBtnClicked(object sender, RoutedEventArgs e)
    {
       message.Text = "Button clicked!";
    }
 }
 </syntaxhighlight>
<br><br>

== プロパティ ==
Buttonコントロールには多くのプロパティが存在する。<br>
<br>
ボタンコントロールのプロパティを使用することにより、C#のコードからAvalonia UIのボタンの外観や動作を動的に操作することができる。<br>
例えば、ユーザのアクションやアプリケーションの状態に応じてボタンの外観や機能を変更することができる。<br>
<br>
視覚的な要素から機能的な面まで、幅広い調整が可能である。<br>
特に重要なのは、Content、Command、IsEnabled、Background、Foregroundのプロパティである。<br>
これらは頻繁に使用され、ボタンの基本的な外観と機能を定義するのに役立つ。<br>
<br>
<center>
{| class="wikitable" style="background-color:#fefefe;"
|+ Buttonコントロールのプロパティ
|-
! style="background-color:#00ffff;" | プロパティ名 
! style="background-color:#00ffff;" | データ型 
! style="background-color:#00ffff;" | 説明
|-
| Content || object || ボタン内に表示されるコンテンツを取得または設定する。<br><br>例: <code>myButton.Content = "Click Me";</code>
|-
| Command || ICommand || ボタンが押下された時に実行されるコマンドを取得または設定する。<br>ボタンが押下された時、呼び出される<code>ICommand</code>インターフェースのインスタンス。<br><br>例: <code>myButton.Command = new RelayCommand(ExecuteMethod);</code>
|-
| CommandParameter || object || コマンドに渡されるパラメータを取得または設定する。<br><br>例: <code>myButton.CommandParameter = someObject;</code>
|-
| IsDefault || bool || ボタンがデフォルトボタンであるかどうかを示す値を取得または設定する。<br><br>例: <code>myButton.IsDefault = true;</code>
|-
| IsCancel || bool || ボタンがキャンセルボタンであるかどうかを示す値を取得または設定する。<br><br>例: <code>myButton.IsCancel = true;</code>
|-
| ClickMode || ClickMode || ボタンが押下されたと見なされるタイミングを取得または設定する。<br>(ボタンが押下された時、どのように反応するかを記述する。)<br><br>例: <code>myButton.ClickMode = ClickMode.Press;</code>
|-
| IsPressed || bool || ボタンが現在押されているかどうかを示す値を取得する。<br>(読み取り専用)<br><br>例: <code>bool isPressed = myButton.IsPressed;</code>
|-
| Background || IBrush || ボタンの背景を取得または設定する。<br><br>例: <code>myButton.Background = Brushes.Blue;</code>
|-
| Foreground || IBrush || ボタンの前景 (主にテキスト) の色を取得または設定する。<br><br>例: <code>myButton.Foreground = Brushes.White;</code>
|-
| BorderBrush || IBrush || ボタンの境界線の色を取得または設定する。<br><br>例: <code>myButton.BorderBrush = Brushes.Black;</code>
|-
| BorderThickness || Thickness || ボタンの境界線の太さを取得または設定する。<br><br>例: <code>myButton.BorderThickness = new Thickness(2);</code>
|-
| CornerRadius || CornerRadius || ボタンの角の丸みを取得または設定する。<br><br>例: <code>myButton.CornerRadius = new CornerRadius(5);</code>
|-
| Padding || Thickness || ボタンの内部余白を取得または設定する。<br><br>例: <code>myButton.Padding = new Thickness(5, 10);</code>
|-
| HorizontalContentAlignment || HorizontalAlignment || ボタン内のコンテンツの水平方向の配置を取得または設定する。<br><br>例: <code>myButton.HorizontalContentAlignment = HorizontalAlignment.Center;</code>
|-
| VerticalContentAlignment || VerticalAlignment || ボタン内のコンテンツの垂直方向の配置を取得または設定する。<br><br>例: <code>myButton.VerticalContentAlignment = VerticalAlignment.Center;</code>
|-
| FontFamily || FontFamily || ボタンのテキストのフォントファミリーを取得または設定する。<br><br>例: <code>myButton.FontFamily = new FontFamily("Arial");</code>
|-
| FontSize || double || ボタンのテキストのフォントサイズを取得または設定する。<br><br>例: <code>myButton.FontSize = 16;</code>
|-
| FontWeight || FontWeight || ボタンのテキストのフォントの太さを取得または設定する。<br><br>例: <code>myButton.FontWeight = FontWeight.Bold;</code>
|-
| IsEnabled || bool || ボタンが有効かどうかを示す値を取得または設定する。<br><br>例: <code>myButton.IsEnabled = false;</code>
|-
| Opacity || double || ボタンの不透明度を取得または設定する。<br><br>例: <code>myButton.Opacity = 0.5;</code>
|-
| Tag || object || ボタンに関連付けられた任意のデータを取得または設定する。<br><br>例: <code>myButton.Tag = someObject;</code>
|}
</center>
<br>
==== 使用例 ====
以下の例では、ボタンの外観を初期化して、クリックイベントを設定している。<br>
ボタンが押下された時、そのコンテンツが変更されて無効化している。<br>
<br>
 <syntaxhighlight lang="c#">
 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;
    }
 }
 </syntaxhighlight>
<br><br>

== コマンドの使用 ==
Avalonia UIのコマンドは、ユーザアクションを実装ロジックから切り離し、ユーザインタラクションを処理するための高レベルなアプローチを提供する。<br>
イベントがUIコントロールのコードビハインドで定義されるのに対して、コマンドは、通常、データコンテキストのプロパティまたはメソッドにバインドされる。<br>
<br>
<u>※注意</u><br>
<u>コマンドは、Commandプロパティを提供する全てのコントロールで使用できる。</u><br>
<u>コマンドは、通常、コントロールの主なインタラクション方法 (例: ボタンのクリックが発生した場合等) にトリガーされる。</u><br>
<br>
コマンドを使用する最も簡単な方法は、オブジェクトのデータコンテキストにあるメソッドにバインドすることである。<br>
# まず、ビューモデルにメソッドを追加する。
#: コマンドを処理するメソッドをビューモデルに定義する。
# 次に、メソッドをバインドする。
#: メソッドとそれをトリガーするコントロールを関連付ける。
 <syntaxhighlight lang="c#>
 public class MainWindowViewModel
 {
    public bool HandleButtonClick()
    {
       // ボタンクリック時のイベントハンドラの処理
    }
 }
 </syntaxhighlight>
<br>
 <syntaxhighlight lang="xml">
 <Button Content="Click Me" Command="{Binding HandleButtonClick}" />
 </syntaxhighlight>
<br><br>

== カスタムコントロール ==
Avalonia UIにおいて、Buttonコントロールを拡張する場合は、カスタムコントロールを作成することが一般的なアプローチである。<br>
これにより、標準のButtonコントロールの機能に加えて、独自のプロパティ、メソッド、イベントを追加することができる。<br>
<br>
以下の例では、カスタムButtonクラス (ExtendedButtonクラス) にCustomBackgroundプロパティを追加して、それをテンプレートで使用している。<br>
また、必要に応じて、他のプロパティおよびロジックを追加してカスタマイズを行うことができる。<br>
<br>
Avalonia UIでは、コントロールを拡張してソフトウェアのニーズに合わせたカスタマイズを行うことができる。<br>
<br>
==== カスタムButtonクラスの作成 ====
まず、Buttonクラスを継承する新しいクラスを作成する。<br>
このクラスでは、新しいプロパティ、メソッドを追加して、Buttonコントロールの機能を拡張する。<br>
 <syntaxhighlight lang="c#">
 // 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);
       }
 
       // カスタムロジックやプロパティを追加
       // ...略
    }
 }
 </syntaxhighlight>
<br>
==== スタイルとテンプレートの定義 ====
次に、カスタムButtonクラスの外観を定義するため、スタイルとテンプレートを定義する。<br>
これは、Avaloniaのリソース辞書ファイル (例えば、Themesフォルダ内のGeneric.xaml) で行うことができる。<br>
 <syntaxhighlight lang="xml">
 <!-- 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>
 </syntaxhighlight>
<br>
==== カスタムButtonクラスの使用 ====
上記の手順により、カスタムButtonクラスをXAMLおよびコードビハインドで使用することができる。<br>
 <syntaxhighlight lang="xml">
 <!-- 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>
 </syntaxhighlight>
<br><br>


{{#seo:
|title={{PAGENAME}} : Exploring Electronics and SUSE Linux | MochiuWiki
|keywords=MochiuWiki,Mochiu,Wiki,Mochiu Wiki,Electric Circuit,Electric,pcb,Mathematics,AVR,TI,STMicro,AVR,ATmega,MSP430,STM,Arduino,Xilinx,FPGA,Verilog,HDL,PinePhone,Pine Phone,Raspberry,Raspberry Pi,C,C++,C#,Qt,Qml,MFC,Shell,Bash,Zsh,Fish,SUSE,SLE,Suse Enterprise,Suse Linux,openSUSE,open SUSE,Leap,Linux,uCLnux,電気回路,電子回路,基板,プリント基板
|description={{PAGENAME}} - 電子回路とSUSE Linuxに関する情報 | This page is {{PAGENAME}} in our wiki about electronic circuits and SUSE Linux
|image=/resources/assets/MochiuLogo_Single_Blue.png
}}

__FORCETOC__
[[カテゴリ:C_Sharp]]