[Windows Forms] ボタンに画像を2つ表示

■概要

画像を2つ設定したボタン

■環境

• Windows 10
• Visual Studio 2019 Community Version 16.9.2
• .NET Framework 4.7.2

■プロジェクトの作成

新しいプロジェクトを作成します。
検索条件で絞り込んでWindows フォーム アプリケーション(.NET Framework)を選択します。

プロジェクト名を入力し、フレームワークを選択します。
ここではプロジェクト名をWindowsFormsApp1、
フレームワークは4.5～4.8、ここでは.NET Framework 4.7.2にしました。

■画面コンテンツ枠の追加

プロジェクトを右クリックし、「追加」-「新しい項目」を選択します。

「WPF」-「ユーザーコントロール(WPF)」を選択し、名前にForm1Childと入力して追加します。

メニューの「ビルド」-「ソリューションのビルド」でビルドしておきます。

Form1を選択し、ツールボックスの「WPF相互運用機能」の「ElementHost」をForm1にドラッグ＆ドロップします。

「ホストするコンテンツの選択」のドロップダウンを開き、Form1Childを選択します。

「親コンテナーにドッキングする」を選択します。

■土台部分作成

デザイナの「Form1Child.xaml」のタブを選択し、メニューの「表示」-「その他のウィンドウ」-「ドキュメントアウトライン」を選択します。

ドキュメントアウトラインを使いやすい位置に配置します。

Gridを選択状態にし、デザイナの薄く赤線を引いた部分にマウスポインタを近づけると+マークが付きます。
そこでクリックするとGridを分割できます。

ツールボックスから「StackPanel」を行分割したGridの下の行にドラッグ＆ドロップします。

Gridの中にStackPanelが追加されました。

StackPanelは既定では中に配置したコントロールを縦並びに整列させます。
これを横並びに変更します。
StackPanelを選択し、プロパティウィンドウの「整列」-「Orientation」でHorizontalを選択します。

■ボタンの追加

ツールボックスから「Button」を画面のStackPanel上にドラッグ＆ドロップします。

続けて2つ、「Button」をStackPanel上にドラッグ＆ドロップします。

■画像リソースの読み込み

以下のファイルをダウンロードしてgreen.png, orange.pngという名前で保存します。

プロジェクトの「Properties」-「Resources.resx」をダブルクリックし、
「リソースの追加」の▼をクリックし、「既存のファイルの追加」を選択します。

green.pngとorange.pngを追加します。

「Resources」フォルダの「green.png」を選択し、
プロパティウィンドウの「ビルドアクション」でResourcesを選択します。

「orange.png」も同様に設定します。

メニューの「ビルド」-「ソリューションのビルド」でビルドしておきます。

■画像付きボタンの作成

◇部品配置

ツールボックスから「StackPanel」を1つめのボタン上にドラッグ＆ドロップします。

ボタンの中にStackPanelが入りました。

ドキュメントアウトライン上でStackPanelが選択状態になっていることを確認し、
プロパティウィンドウで「レイアウト」-「Orientation」を先程と同じHorizontalに設定します。

ツールボックスからドキュメントアウトラインの「Button」の中の「StackPanel」上に、
「Image」、「TextBlock」、「Image」の順にドラッグ＆ドロップします。

◇画像設定

ドキュメントアウトラインで1つめの「Image」を選択し、
プロパティウィンドウの「共通」-「Source」の▼を開き、「green.png」を選択します。

「Image」をプロパティウィンドウの「レイアウト」で「Width」と「Height」を20に設定します。

もう一つの「Image」も「orange.png」を読み込ませて同様に設定します。

◇余白調整、ボタンテキスト変更

ドキュメントアウトラインで「TextBlock」を選択し、
プロパティウィンドウの「レイアウト」-「Margin」で左右余白8を設定します。
「共通」-「Text」に押してくださいを入力します。

「レイアウト」-「VerticalAlignment」をCenterに設定します。

◇イベント追加

ドキュメントアウトラインで1つめのボタンを選択し、プロパティウィンドウで稲妻マークを選択し、イベント一覧を表示します。
「Click」横のテキストボックスをダブルクリックします。

メッセージボックスを表示する処理を記述します。

Form1Child.xaml.cs

private void Button_Click(object sender, RoutedEventArgs e)
{
    MessageBox.Show("押された！", "タイトル", 
        MessageBoxButton.OK, MessageBoxImage.Information);
}

■Gridの行高さ調整

適当に設定していたGridの行高さを調整します。
ドキュメントアウトラインでGridを選択し、デザイナでGridの下の行の左端あたりにマウスポインタを移動します。

ドロップダウンを開いて「Auto」を選択します。

Grid行の中の要素（ボタン）に合わせて自動調整されます。

■ボタン間隔調整

ボタンがぴったりくっついているので間隔を調整します。
以下をUserControlの開始タグとGridの開始タグの間に記述します。

Form1Child.xaml

<UserControl.Resources>
    <Style TargetType="Button">
        <Setter Property="Margin" Value="8" />
    </Style>
</UserControl.Resources>

これでこのUserControlの中にあるすべてのボタンの上下左右に余白8が設定されました。

ボタンの淵と中身の間隔「Padding」も設定してみます。

<Style TargetType="Button">
    <Setter Property="Margin" Value="8" />
    <Setter Property="Padding" Value="24,8" />
</Style>

ボタンの淵～中身の左右の間隔は24、上下間隔は8に設定しました。

■実行

■おまけ

閉じるボタンを実装します。
3つめのボタンのテキストを閉じるにし、ClickイベントにCloseButton_Clickを入力してEnterします。

プロパティCloseActionを追加し、CloseButton_Clickの中で呼び出します。

Form1Child.xaml.cs

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

namespace WindowsFormsApp1
{
    /// <summary>
    /// Form1Child.xaml の相互作用ロジック
    /// </summary>
    public partial class Form1Child : UserControl
    {
        public Action CloseAction { get; set; }

        public Form1Child()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("押された！", "タイトル", 
                MessageBoxButton.OK, MessageBoxImage.Information);
        }

        private void CloseButton_Click(object sender, RoutedEventArgs e)
        {
            CloseAction();
        }
    }
}

CloseActionにフォームを閉じる処理を設定します。

Form1.cs

using System.Windows.Forms;

namespace WindowsFormsApp1
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();

            var child = elementHost1.Child as Form1Child;
            child.CloseAction = () => Close();
        }
    }
}