Button コントロールは、その名の通り、ボタンの機能を提供するためのコントロールです。
基本的なプロパティや、コードビハインドでクリックイベントを作成する方法、バインディングによってクリックイベントを処理する方法について説明をします。
表示するテキストを設定するには？
Button に表示するテキストを設定するには、以下に示す Content プロパティを使用するか、<Button> 〜 </Button> の間に表示するテキストを記述します。
| プロパティ | 説明 |
|---|---|
| Content | ボタンに表示するテキストを取得/設定する |
以下に例を示します。
1つは Content プロパティを使用し、もう１つは <Button> タグの間に表示テキストを設定しています。
<Button Content="ボタン1" Width="150" Height="30" FontSize="18"/> <Button Width="150" Height="30" FontSize="18">ボタン2</Button>
実行例
背景色を変更するには？
背景色を変更するには、以下の Background プロパティを使用します。
| プロパティ | 説明 |
|---|---|
| Background | 背景色を取得/設定する |
以下に背景色の変更例を示します。
<Button Content="Aqua" Background="Aqua" Width="150" Height="30" FontSize="18"/>
<Button Content="BlueViolet" Background="BlueViolet" Width="150" Height="30" FontSize="18"/>
<Button Content="グラデーション" Width="150" Height="30" FontSize="18">
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF4513EF" Offset="1"/>
<GradientStop Color="White" Offset="0"/>
</LinearGradientBrush>
</Button.Background>
</Button>
実行例
枠線の色を変更するには？
枠線の色を変更するには、以下の BorderBrush プロパティを使用します。
| プロパティ | 説明 |
|---|---|
| BorderBrush | 枠線の色を取得/設定する |
以下に枠線の色の変更例を示します。
<Button Content="Aqua" BorderBrush="Aqua" BorderThickness="2" Width="150" Height="30" FontSize="18"/>
<Button Content="BlueViolet" BorderBrush="BlueViolet" BorderThickness="2" Width="150" Height="30" FontSize="18"/>
<Button Content="グラデーション" BorderThickness="3" Width="150" Height="30" FontSize="18">
<Button.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF4513EF" Offset="1"/>
<GradientStop Color="#FFB2B7E1" Offset="0"/>
</LinearGradientBrush>
</Button.BorderBrush>
</Button>
実行例
枠線の幅を変更するには？
枠線の幅を変更するには、以下の BorderThickness プロパティを使用します。
| プロパティ | 説明 |
|---|---|
| BorderThickness | 枠線の幅を取得/設定する |
以下に枠線の幅を変更する例を示します。
<Button Content="線幅 = 1" BorderThickness="1" Width="150" Height="35" FontSize="18"/> <Button Content="線幅 = 2" BorderThickness="2" Width="150" Height="35" FontSize="18"/> <Button Content="線幅 = 5" BorderThickness="5" Width="150" Height="35" FontSize="18"/>
実行例
クリックイベントを発生させるには
クリックイベントを発生させるには、Click を使用します。
以下に XAML のコード例を示します。
<Button Content="ボタン" Click="Button1_Click" Width="150" Height="35" FontSize="18" />
以下にコードビハインドの例を示します。
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void Button1_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("Clicked");
}
}
この例を実行して Button をクリックすると「Clicked」というメッセージが表示されます。
実行例
コマンドバインディングでクリック処理をするには？
コードビハインドを使用せずに、コマンドバインディングで Button のクリック処理をする方法を説明します。
※バインディングについては、いずれ詳しく説明をする予定です。
Button コントロールには、以下に示す Command というプロパティが存在します。
| プロパティ | 説明 |
|---|---|
| Command | このボタンが押されたときに呼び出すコマンドを取得または設定します。 |
説明にもある通り、ボタンが押されたとき（つまりクリックしたとき）に呼び出すコマンドを設定するためのプロパティです。
この Command プロパティを使用することで、コードビハインドにクリックイベントの処理を書くことなく、クリックされた時の処理を行うことができるようになります。
クリックされた時のコマンド（Command）は、ICommand インターフェースを継承したクラスを作成する必要があり、利用手順は以下です。
ICommand を継承したクラスを作成する
新規で ICommand を継承したクラスを作成しましょう。ここでは CommandOkViewModel クラスの中に、ICommand を継承した OkCommand というクラスを作成します。
public class CommandOkViewModel
{
class OkCommand : ICommand
{
public bool CanExecute(object parameter) { return true; }
public event EventHandler CanExecuteChanged;
//======================================
// Button がクリックされたときに実行される処理
//======================================
public void Execute(object parameter)
{
MessageBox.Show("ボタンがクリックされました");
}
}
}
ICommand を継承したクラスは、以下の２つのメソッドと、１つのイベントを実装する必要があります。
| メソッド | 説明 |
|---|---|
| CanExecute(Object) | 現在の状態でコマンドが実行可能かどうかを決定します。 |
| Execute(Object) | コマンドが起動された際に実行する処理を定義します。 |
| イベント | 説明 |
|---|---|
| CanExecuteChanged | コマンドを実行するかどうかに影響するような変更があった場合に発生する。 |
CanExecute は、コマンドの実行を許可する場合には true を、許可しない場合には false を返すようにします。
Execute は、コマンドが実行された場合、今回の例では Button がクリックされたときに実行する処理を記述します。ここではメッセージ「ボタンがクリックされたました」を表示するようにしています。
上記で作成したクラス（コマンド）をプロパティとして公開する
先ほど、ICommand を継承したクラスを作成しましたので、今度はこのクラスをプロパティとして公開をします。
先ほどの、CommandOkViewModel にコードを追記します。
public class CommandOkViewModel
{
class OkCommand : ICommand
{
public bool CanExecute(object parameter) { return true; }
public event EventHandler CanExecuteChanged;
public void Execute(object parameter)
{
MessageBox.Show("ボタンがクリックされました");
}
}
// ===== ここから追記 =====
public ICommand OkCmd { get; private set; }
public CommandOkViewModel()
{
this.OkCmd = new OkCommand();
}
// ===== ここまで追記 =====
}
DataContext に作成したクラスのインスタンスを代入
先ほど作成したクラスのインスタンスを、コマンドをバインディングしたいクラスの DataContext に代入します。
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
// 作成したクラスのインスタンスを DataContext に代入
this.DataContext = new CommandOkViewModel();
}
}
公開したプロパティを <Button> などの Command プロパティにバインディングする
最後に、任意のコントロールの Command プロパティにバインディングします。
<Button Content="Button" Height="30" Margin="5" FontSize="18"
Command="{Binding OkCmd}"/>
実行例を以下に示します。
実行例
クリックのタイミングを変更するには？
WPF のボタンは、以下の ClickMode プロパティで、クリックのタイミングを変更することができます。
| プロパティ | 説明 |
|---|---|
| ClickMode | クリックのタイミングを変更する |
タイミングは以下の３種類があります。
| 値 | 説明 |
|---|---|
| Hover | マウスカーソルが Button の枠内に入ったときにクリックイベントが発生する |
| Press | マウスの左クリックを押し込んだときにクリックイベントが発生する |
| Release | マウスの左クリックを押し込んで離したときにクリックイベントが発生する |
以下に XAML の例を示します。
<Button Content="Hover" ClickMode="Hover" BorderThickness="5"
Width="150" Height="35"
FontSize="18" Click="Button1_Click"/>
<Button Content="Press" ClickMode="Press" BorderThickness="5"
Width="150" Height="35"
FontSize="18" Click="Button2_Click"/>
<Button Content="Release" ClickMode="Release" BorderThickness="5"
Width="150" Height="35"
FontSize="18" Click="Button3_Click"/>
それぞれの Button のクリックイベントのコードを以下に示します。
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void Button1_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("Hover");
}
private void Button2_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("Press");
}
private void Button3_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("Release");
}
}
実際に、Button の ClickMode を変更して、タイミングの違いを実感してください。
コメント