WPF 入門:ボタンの使い方【初心者講座】

WPFでアプリケーションを作る上で、頻繁に使用する「ボタン」について
ウィンドウに表示する方法から、クリックイベントの記述方法まで記載します。

ボタンの設置方法

プロジェクトを新規作成したら、自動で生成されるMainWindow.xamlを編集していきます。
ソリューションエクスプローラーの「MainWindow.xaml」をダブルクリックして、エディターに表示させます。
ツールボックスを展開して、「Button」をウィンドウの中にドラッグ&ドロップで配置します。

WPFでボタンの追加

ウィンドウにボタンが追加されます。
ウィンドウの中にButtonを配置すると、画面下のXAMLにも同時にコードが追加されます。

WPFでボタンの追加を完了
<Button Content="Button" HorizontalAlignment="Left" Margin="58,42,0,0" VerticalAlignment="Top" Width="75"/>

配置したボタンはドラッグ&ドロップで表示位置を自由に移動することができます。

ボタンのテキストを変更する方法

ボタンを配置した初期状態のテキストは「Button」になっています。
ここでは、このボタンテキストを任意のテキストに変更する方法を記載します。
ボタンのテキストを変更するには、主に以下の方法で行います。

  • Buttonプロパティから変更する方法
  • XAMLコードから編集する方法

Buttonプロパティから変更する方法

「デザイン」ペインでボタンをクリックして選択状態にします。
ボタンを選択状態にすると、「プロパティ」ペインでボタンの各種設定情報を編集できるようになります。

WPFでボタンを選択状態にする

「プロパティ」ペーン内の「共通」を展開します。
その中の「Content」に任意のテキストを変更することで、ボタンのテキストを変更できます。

WPFでボタンのContentを編集する

XAMLコードから編集する方法

「XAML」ペインで Buttonタグ部分を見てください。

WPFのButtonタグ
<Button Content="Button" HorizontalAlignment="Left" Margin="58,42,0,0" VerticalAlignment="Top" Width="75"/>

上記の 「Content=”Button”」を「Content=”テスト2”」 のように変更することで、ボタンテキストを変更できます。

<Button Content="テスト2" HorizontalAlignment="Left" Margin="58,42,0,0" VerticalAlignment="Top" Width="75"/>
WPFのButtonタグのContentを編集する

ボタンイベントの追加方法

ここまでの方法で、ボタンをウィンドウ上に配置して、ボタンをクリックしても何も起こりません。

ボタンをクリックしても何も起こらない

これはボタンを押した時に、どういった処理をするかイベントを設定していないからです。
ここでは、ボタンをクリックした時に発生するクリックイベントの追加方法を記載します。

クリックイベントの追加は主に以下の方法で行います。

  • Buttonプロパティから追加する方法
  • XAMLコードから追加する方法

Buttonプロパティから追加する方法

「デザイン」ペインでボタンをクリックして選択状態にします。
プロパティ内の雷マークをクリックします。

ボタンのイベントハンドラーを表示する

雷マークをクリックすると、選択要素の「プロパティ設定」が「イベントハンドラーの一覧」に切り替わります。
次に、イベントハンドラーの一覧から「Click」の設定欄をダブルクリックします。

ボタンのClickイベントをダブルクリック

イベントハンドラーの「Click」の設定欄をダブルクリックすると、以下のように「Click」の設定欄に自動で「Button_Click」の関数名が入力され、「MainWindow.xaml.cs」には「ButtonClick」関数が追加されます。

Clickイベントの関数名が自動で設定される
Button_Click関数が自動で追加される

XAMLコードから追加する方法

「XAML」ペインで Buttonタグ部分に「Click=」をキー入力します。
すると、以下のように「新しいイベントハンドラー」と選択項目が表示されます

ボタンのクリックイベントを新しいイベントハンドラーを選択して追加する

表示された「新しいイベントハンドラー」をダブルクリックすると、Click=”Button_Click” が自動で入力され、プロパティから追加した時と同様に「MainWindow.xaml.cs」に「ButtonClick」関数が追加されます。

XAMLに自動でクリックイベントの関数名が追加される
Button_Click関数が自動で追加される

クリックイベントの編集

ここまでで、クリックイベントを設定しましたが、このままではボタンをクリックしても、まだ何も起こりません。
クリックイベントの処理内容を記述してあげないと、何も起こらないのです。

ここでは、ボタンを押した時にメッセージボックスを表示するよう実装したいと思います。
MainWindow.xaml.csに追加された、Button_Click関数内に処理を記述します。

クリックイベントの処理記述場所

Button_Click関数を以下の処理を記述します。

private void Button_Click(object sender, RoutedEventArgs e)
{
    MessageBox.Show("ボタンがクリックされました。");
}

実行して、ボタンをクリックすると以下のようになります。

ボタンクリック処理のサンプル画面

ソースコード MainWindow.xaml

<Window x:Class="TestWpf03.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:TestWpf03"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Button Content="テスト2" HorizontalAlignment="Left" Margin="58,42,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click"/>
    </Grid>
</Window>

ソースコード MainWindow.xaml.cs

using System.Windows;

namespace TestWpf03
{
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("ボタンがクリックされました。");
        }
    }
}


Button クラスの詳細については以下をご参照ください。

Button クラス (System.Windows.Controls)
Click イベントに反応する Windows ボタン コントロールを表します。Represents a Windows button control, which reacts to the Click event.

コメント

タイトルとURLをコピーしました