■概要
画像を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」横のテキストボックスをダブルクリックします。
メッセージボックスを表示する処理を記述します。
private void Button_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("押された！", "タイトル",
MessageBoxButton.OK, MessageBoxImage.Information);
}
■Gridの行高さ調整
適当に設定していたGridの行高さを調整します。
ドキュメントアウトラインでGridを選択し、デザイナでGridの下の行の左端あたりにマウスポインタを移動します。
ドロップダウンを開いて「Auto」を選択します。
Grid行の中の要素（ボタン）に合わせて自動調整されます。
■ボタン間隔調整
ボタンがぴったりくっついているので間隔を調整します。
以下をUserControlの開始タグとGridの開始タグの間に記述します。
<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の中で呼び出します。
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にフォームを閉じる処理を設定します。
using System.Windows.Forms;
namespace WindowsFormsApp1
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
var child = elementHost1.Child as Form1Child;
child.CloseAction = () => Close();
}
}
}