13,005
回編集
(→プロパティ) |
編集の要約なし |
||
2行目: | 2行目: | ||
<br><br> | <br><br> | ||
==== Buttonコントロールとは ==== | ==== Buttonコントロールとは ==== | ||
ボタンはカーソルポインタの操作に反応するコントロールである。<br> | ボタンはカーソルポインタの操作に反応するコントロールである。<br> | ||
22行目: | 21行目: | ||
<br> | <br> | ||
Buttonコントロールに関する完全なAPIドキュメントは、[https://reference.avaloniaui.net/api/Avalonia.Controls/Button/ Avalonia UIの公式ドキュメント]を参照すること。<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> | <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><br> | |||
== イベント == | |||
==== ボタンイベントとは ==== | |||
Avalonia UIにおけるイベントは、ユーザインタラクションやコントロール固有のアクションに応答する方法を提供する。<br> | Avalonia UIにおけるイベントは、ユーザインタラクションやコントロール固有のアクションに応答する方法を提供する。<br> | ||
<br> | <br> | ||
31行目: | 95行目: | ||
Avalonia UIの多くのコントロールは、ClickイベントやSelectionChangedイベント等の様々なイベントを公開している。<br> | Avalonia UIの多くのコントロールは、ClickイベントやSelectionChangedイベント等の様々なイベントを公開している。<br> | ||
XAMLでコントロールの場所を特定して、イベントの名前とイベントハンドラメソッドの名前を示す値を持つ属性を追加することにより、イベントをサブスクライブする。<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"> | <syntaxhighlight lang="xml"> | ||
<!-- MainWindow. | <!-- MainWindow.axamlファイル --> | ||
<Window xmlns="https://github.com/avaloniaui" | <Window xmlns="https://github.com/avaloniaui" | ||
62行目: | 217行目: | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
<br> | <br><br> | ||
== プロパティ == | |||
Buttonコントロールのプロパティにおいて、使用される頻度の高いプロパティを以下に示す。<br> | Buttonコントロールのプロパティにおいて、使用される頻度の高いプロパティを以下に示す。<br> | ||
<br> | <br> | ||
70行目: | 226行目: | ||
* <code>Command</code>プロパティ | * <code>Command</code>プロパティ | ||
*: ボタンが押下された時、呼び出される<code>ICommand</code>インターフェースのインスタンス。 | *: ボタンが押下された時、呼び出される<code>ICommand</code>インターフェースのインスタンス。 | ||
<br> | <br><br> | ||
== コマンドの使用 == | |||
Avalonia UIのコマンドは、ユーザアクションを実装ロジックから切り離し、ユーザインタラクションを処理するための高レベルなアプローチを提供する。<br> | Avalonia UIのコマンドは、ユーザアクションを実装ロジックから切り離し、ユーザインタラクションを処理するための高レベルなアプローチを提供する。<br> | ||
イベントがUIコントロールのコードビハインドで定義されるのに対して、コマンドは、通常、データコンテキストのプロパティまたはメソッドにバインドされる。<br> | イベントがUIコントロールのコードビハインドで定義されるのに対して、コマンドは、通常、データコンテキストのプロパティまたはメソッドにバインドされる。<br> |