【WPF】Button（ボタン）の使い方を紹介！（Binding・Command）

当ページのリンクには広告が含まれています。

URLをコピーしました！

WPF の Button の使い方を知りたい。。。

パソコンやスマホで Web サイトやアプリを閲覧・操作する際に必ず存在するのが「ボタン」です。

この無くてはならないボタンを「C# の WPF でどうやって使うのか」をこの記事ではまとめています。

この記事に記載しているのは基礎的な内容を紹介しています。

ぜひ最後まで読んで参考にしてみてください。

あわせて読みたい

【C#】おすすめする入門書（参考書）５選を紹介！ C# とはマイクロソフトが開発したプログラミング言語であり、Windows向けのアプリケーション開発から、Android向けのアプリケーション開発、Web向けのアプリケーション…

オススメの参考書

C#の使い方が丁寧に解説しており、「基礎からしっかりと学びたい」という初心者の方にオススメの一冊です。サンプルコードも記載してあり、各章の最後に復習問題があるので理解度を確認しながら読み進めることができます。新しい C# のバージョンにも対応している書籍です。

基礎からしっかり学ぶC#の教科書第3版 C# 10対応

Amazon

楽天市場

Yahooショッピング

ポチップ

Button（ボタン）とは？

Button（ボタン）とは、アプリケーションの画面上に表示される四角形をしたスイッチのことです。

このスイッチを押すと、イベントが発生して何らかのアクションを起こすことができます。立体感のあるグラフィックで表現されており、ユーザーがボタンを押したことが直観的に分かるようなデザインになっています。

C# の WPF ではボタンは標準搭載されているコントロールです。

デザイナーのツールボックスから「Button」を選択することで簡単に画面へ追加することが可能です。

このボタンを使ったWPFのサンプルを具体的に確認してみましょう。

他の UI コントロールの使い方も知りたい方はこの記事をチェック！！

あわせて読みたい

【WPF】画面作成で使う「コントロール」一覧（種類別に紹介） C# の WPF には、UI 画面で使える多くの「コントロール」が予め用意されています。これらのコントロールは［ツールボックス］に登録されており、XAML ファイルを開いて…

Buttonの使い方を紹介

まずはアプリケーションの画面に「Button」を追加しましょう。

Buttonを追加する方法は２通りあります。

ツールボックスを展開してウィンドウの中にドラッグ＆ドロップして配置する。
XAMLコードに直接記述して配置する。

ここでは②の方法で追加をします。

Buttonを画面に表示する

ウィンドウにボタンを表示するには、＜Button/＞を XAML に記述します。

簡単な例をまず紹介します。

<Window
    x:Class="Sample.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"
    Title="MainWindow"
    Width="300"
    Height="100"
    mc:Ignorable="d">
    <DockPanel Margin="15">
        <Button Content="ボタン"/>
    </DockPanel>
</Window>

このコードを実行した画面は次の通りです。

ボタンのテキストを表示する場合は、Contentプロパティに表示したい文字列を入力します。

プロパティ名	内容
Content	ContentControl のコンテンツを取得または設定します。文字列以外にオブジェクトを設定することができます。

Contentプロパティにテキストを改行して表示する

XAML コードで改行を表示したい場合は、特殊文字列の「
」を使用します。

WPF は Windows フォームと同じように（改行をしたい所にカーソルを合わせて Enter キーを押す）改行することはできません。

Windows フォームを使っていた方は不便に感じるかもしれませんが、特殊文字列を使用して改行をしましょう。

<Window
    x:Class="Sample.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"
    Title="MainWindow"
    Width="300"
    Height="100"
    mc:Ignorable="d">
    <DockPanel Margin="15">
        <Button Content="ボタン
ここから改行をしています"/>
    </DockPanel>
</Window>

このコードを実行した画面は次の通りです。

Buttonに画像を表示する

ツールバーなどではボタンの幅を確保できないので、ボタンにアイコンを表示します。

ユーザーがそのアイコンを見ただけで、どんな機能があるのか予想ができるようにしています。

アイコンを表示するには、Button の子要素として Image クラスを記述することでアイコン（画像）付きのボタンが作成できます。

事前準備としてResourcesにボタンに表示する画像を登録しておきましょう。

<Window
    x:Class="Sample.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"
    Title="MainWindow"
    Width="300"
    Height="100"
    mc:Ignorable="d">
    <Grid Margin="15">
        <Button>
            <Image Source="Icons/Camera.png" />
        </Button>
    </Grid>
</Window>

このコードを実行した画面は次の通りです。

Buttonに画像と文字列を表示する

今度は画像のみではなく、画像と文字列を両方表示する方法です。

Button の Content エリアの中に、StackPanel を設置して、Image クラスと TextBlock クラスを子要素として追加してあげます。

ButtonのContentは１つしかオブジェクトを追加できません。そのためStackPanelにImageとTextBlockを追加して１つのオブジェクトにします。

<Window
    x:Class="Sample.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"
    Title="MainWindow"
    Width="300"
    Height="100"
    mc:Ignorable="d">
    <Grid Margin="15">
        <Button>
            <StackPanel Orientation="Horizontal">
                <Image Source="Icons/Camera.png" />
                <TextBlock
                    Margin="10,0,0,0"
                    VerticalAlignment="Center"
                    FontSize="16"
                    Text="撮影する" />
            </StackPanel>
        </Button>
    </Grid>
</Window>

このコードを実行した画面は次の通りです。

クリックイベントを設定する

ボタンをクリックしてイベントが発生するように設定をしましょう。上記で説明した設定では、クリックしても何も起きない状態です。

簡単なサンプルとして、ボタンをクリックしたらメッセージボックスが表示されるように実装をします。

Button タグの中に「Cllick」と入力して、新しいイベントハンドラーを作成します。

<Window
    x:Class="Sample.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"
    Title="MainWindow"
    Width="300"
    Height="100"
    mc:Ignorable="d">
    <Grid Margin="15">
        <Button Tag="撮影するボタン" Click="btn_Click">
            <StackPanel Orientation="Horizontal">
                <Image Source="Icons/Camera.png" />
                <TextBlock
                    Margin="10,0,0,0"
                    VerticalAlignment="Center"
                    FontSize="16"
                    Text="撮影する" />
            </StackPanel>
        </Button>
    </Grid>
</Window>

コードビハインド側には、ボタンのイベントである「btn_Click」が生成されているので、ここに処理を記述します。

どのボタンが押されたか（１つしかありませんが）をメッセージボックスに表示します。

using System.Windows;
using System.Windows.Controls;

namespace Sample
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void btn_Click(object sender, RoutedEventArgs e)
        {
            var button = sender as Button;
            MessageBox.Show($"{button.Tag}がクリックされました。");
        }
    }
}

このコードを実行した画面は次の通りです。

Commandで処理をする

WPF ではアプリケーションプログラムが頻繁に遭遇する一般的な処理をコマンドとして定義します。

コマンドは自分で定義するか、よく利用される処理はあらかじめ ApplicationCommands というクラスに定義されています。

ApplicationCommandsに登録されているCommandを使用するには条件があり、MenuItemやToolBarに配置されたボタンなどに限られます。

上記の条件を満たせば、「コピー」や「ペースト」、「貼り付け」などの機能が実行されます。

Command	内容
Copy	選択項目をクリップボードにコピーします。
Cut	選択範囲をクリップボードに切り取りします。
Paste	選択項目をクリップボードに貼り付けます。
Redo	最後の操作をやり直します。
Undo	最後の操作を元に戻します。
Open	ファイルを開きます。
Close	ファイルを閉じます。
Print	現在の項目を出力します。
Save	現在の項目を保存します。

代表的な Command が以下にになります。（参考：サイト）

<Window
    x:Class="Sample.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"
    Title="MainWindow"
    Width="300"
    Height="200"
    mc:Ignorable="d">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="3*" />
        </Grid.RowDefinitions>
        <ToolBar Grid.Row="0">
            <Button Command="ApplicationCommands.Copy" ToolTip="コピー">
                <Image Source="Icons/Copy.png" />
            </Button>
            <Separator/>
            <Button Command="ApplicationCommands.Paste" ToolTip="ペースト">
                <Image Source="Icons/Paste.png" />
            </Button>
        </ToolBar>
        <TextBox Grid.Row="1" FontSize="14" Margin="5" AcceptsReturn="True" TextWrapping="Wrap"/>
    </Grid>
</Window>

このコードを実行した画面は次の通りです。

このように ToolBar 内のボタンをクリックすると、コマンドの処理が実行されます。

また、独自コマンドを実装して処理を実行させたい場合については、別の記事で紹介していますので参考にしてみて下さい。

あわせて読みたい

【WPF】コマンドの使い方（ICommandインターフェース） Model-View-ViewModel（MVVM）は、UI（表示部分）と UI 以外のコード（実処理部分）を分離するための UI アーキテクチャデザインパターンです。 MVVM パターンによる疎…

ButtonのContentをバインドする

WPF では「MVVM」という概念の元にプロジェクトの開発を行います。

この MVVM とは、Model（データやそれを加工するロジックを行う部分）、View（データを適した形で表示して入力を受け付けるUIの部分）、ViewModel（ModelとViewの双方の受け渡しを行う部分）の３つに分けて設計と実装をするということです。

Model、View、ViewModelに役割分担することで、保守性や生産性がよくなるメリットがあります。

ここでは、Button の Content プロパティに Name プロパティをバインドします。

Name プロパティは ViewModel クラスに記述します。

Viewの記述

まずは、これまで紹介したサンプルと同じように XAML コードに Button タグを追加します。今までと異なる点は、Content プロパティに ViewModel の Name プロパティをバインドしている点です。

<Window
    x:Class="Sample.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"
    Title="MainWindow"
    Width="300"
    Height="180"
    mc:Ignorable="d">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="2*" />
        </Grid.RowDefinitions>
        <Button Content="{Binding Name}" Margin="5"/>
        <TextBox
            Grid.Row="1"
            Margin="5"
            AcceptsReturn="True"
            FontSize="14"
　　　　　　 Text="{Binding Name}"
            TextWrapping="Wrap" />
    </Grid>
</Window>

ViewModelの記述

続いて、プロジェクトに cs ファイルを新規作成して、ViewModel というクラスを作成します。

ViewModel から View へバインドで同期するには、ViewModel となるオブジェクトが INotifyPropertyChanged を実装してプロパティが変更通知を実装している必要があります。

ViewModel には INotifyPropertyChanged を継承して、インターフェースと変更通知の実装をしておきましょう。

using System.ComponentModel;
using System.Runtime.CompilerServices;

namespace Sample
{
    public class ViewModel : INotifyPropertyChanged
    {
        // INotifyPropertyChangedインターフェースの実装
        public event PropertyChangedEventHandler PropertyChanged;

        public void RaisePropertyChanged([CallerMemberName] string propertyName = null)
            => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));

        //名前プロパティ
        private string _Name;
        public string Message
        {
            get { return _Name; }
            set { if (_Name != value) { _Name = value; RaisePropertyChanged(); } }
        }
    }
}

Modelの記述

最後に View と ViewModel を同期させるために、Model（Window.xaml.cs）側で DataContext プロパティにViewModel のインスタンスをセットします。

using System.Windows;

namespace Sample
{
    public partial class MainWindow : Window
    {
        ViewModel viewModel = new ViewModel();

        public MainWindow()
        {
            InitializeComponent();

            //データコンテンツにViewModelを設定
            DataContext = viewModel;
        }
    }
}

View と Model の受け渡しをする ViewModel が機能していることを確認する為に、TextBox に入力した値が Button に表示されることをチェックします。

アプリケーションを起動して動作確認をしてみましょう。

Button はプロパティの値が変更された直後に変更されることはありません。

Button に対してアクション（クリックなど）を行った時にプロパティの値を取得して、ボタンに表示する文字列が更新されます。

これは TextBox にバインドされたプロパティの更新は、TextBox のフォーカスを失って初めて更新されるからです。（参考サイト：更新タイミングを制御する）

プロパティを更新するタイミングを変更すれば解決します。バインディングの Mode プロパティを「TwoWay」、 UpdateSourceTrigger プロパティを「PropertyChanged」に設定を変更します。

<Window
    x:Class="Sample.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"
    Title="MainWindow"
    Width="300"
    Height="180"
    mc:Ignorable="d">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="2*" />
        </Grid.RowDefinitions>
        <Button Margin="5" Content="{Binding Name}" />
        <TextBox
            Grid.Row="1"
            Margin="5"
            AcceptsReturn="True"
            FontSize="14"
            Text="{Binding Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
            TextWrapping="Wrap" />
    </Grid>
</Window>

修正したアプリケーションを起動して動作確認をしてみましょう。