WindowsのGUIプログラミングしてみたので、そのメモです。
試したのは.NETで動作するWPF(Windows Presentation Foundation)で、コードはC#です。
最近ではクロスプラットフォーム対応のものなど新しい技術も多いですが、手軽に始めれそうだったのでWPFを選んでみました。
WPFアプリを作る
Microsoftのチュートリアルに従って作ります。
作るアプリの概要は以下のとおりです。
- 画面上にテキスト、ラジオボタン、四角のボタンを配置。
- ラジオボタンを選択した後、四角のボタンを押すと、それに応じたメッセージが出る。
環境の準備
Visual Studio 2022のインストーラをこちらからダウンロードしてインストールします。
ワークロードの画面で「.NETデスクトップ開発」にチェックして追加します。
Visual Studio 2022をインストール済みの場合、メニューの「ツール」-「ツールと機能を取得」からワークロードの画面を開いて「.NETデスクトップ開発」を追加します。
プロジェクトの作成
Visual Studio 2022 を起動し、「新しいプロジェクトの作成」を選択します。
テンプレートから「WPFアプリケーション」の「C#」のものを選択します。
テンプレートの検索窓に「WPF」と入力すると見つけやすいです。
「プロジェクト名」を設定します。ここでは「HelloWpfApp1」とします。
必要に応じて「場所」を変更します。
次の画面で「フレームワーク」を選択します。既定のまま「.NET 8.0(長期的なサポート)」としました。
以上で空のプロジェクトができます。
XAMLとコードビハインド
右のソリューションエクスプローラーのウィンドウを見ると、いくつかのファイルができていることが分かりますが、その中のMainWindow.xamlとMainWindow.xaml.csが左のウィンドウに表示された状態です。
(このウィンドウは、メニューの「表示」-「デザイナー」、または、右クリックメニューの「デザイナーの表示」で表示できます)
MainWindow.xamlのウィンドウの上側がデザインビューで、GUIの見た目が分かります。下側がXAMLビューで、そのGUIに対応するXAMLのコードが表示されます。XAMLは、HTML等のようにUIを記述する言語です。
MainWindow.xaml.csは、MainWindow.xamlに対応するイベント処理などを記述したC#のコード(コードビハインド)です。MainWindowという名前のクラスが定義されていることが分かります。
テキストを追加する
画面にテキスト(文字)を表示するために、TextBlockコントロールを追加します。
TextBlockコントロールは、ユーザが直接編集できない固定のテキストを表示するためのものです。Microsoft公式の説明は以下にあります。
ツールボックスのウィンドウで「コモンWPFコントロール」の中にある「TextBlock」を選択し、それをMainWindow.xamlの画面(デザインビュー)上にドラッグ＆ドロップで配置します。
次に、テキストの位置を調整し、テキストの内容を表示したい文字に変更します。
以下の例では、「Select a message option and then choose the Display button.」というテキストとしています。
XAMLビューでXAMLコードの内容を確認すると、以下の通りTextBlockが追加されていることが分かります。
<Grid>
<TextBlock HorizontalAlignment="Left" Margin="110,60,0,0" TextWrapping="Wrap" VerticalAlignment="Top"><Run Language="ja-jp" Text="Select a message option and then choose the Display button."/></TextBlock>
</Grid>ここではイベント処理などの機能は必要ないため、コードビハインドの記述は不要です。
テキストの追加は以上です。
ラジオボタンを追加する
次にRadioButtonコントロールを使って、ラジオボタンを設置します。
ラジオボタンはいずれか一つだけ選択可能な選択肢のボタンです。Microsoft公式の説明は以下にあります。
ツールボックスのウィンドウで「コモンWPFコントロール」の中にある「RadioButton」を選択し、それをMainWindow.xamlの画面(デザインビュー)上にドラッグ＆ドロップで配置します。
ボタンの位置を調整し、ボタンに表示するテキストを変更します。
以下の例では、ラジオボタンを2つ配置し、それぞれ「Hello」「Goodbye」というテキストとしています。
次に、「Hello」ボタンを選択し、プロパティ画面で「IsChecked」にチェックを入れます。これにより、2つのボタンのうち「Hello」ボタンがデフォルトで選択された状態になります。さらに、プロパティ画面で名前を「<名前なし>」から「HelloButton」に変更します。これで、C#のコード(コードビハインド)で「HelloButton」という名前で参照できるようになります。
同様に、「Goodbye」ボタンにも「GoodbyeButton」という名前を設定します。
XAMLビューでXAMLコードの内容を確認すると、以下のようにRadioButtonが追加されていることがわかります。Content属性には「Hello」「Goodbye」というテキストが設定されており、x:Name属性でそれぞれの名前が指定されています。また、「Hello」ボタンのIsChecked属性がTrueに設定されています。
<Grid>
<TextBlock HorizontalAlignment="Left" Margin="110,60,0,0" TextWrapping="Wrap" VerticalAlignment="Top"><Run Language="ja-jp" Text="Select a message option and then choose the Display button."/></TextBlock>
<RadioButton x:Name="HelloButton" Content="Hello" HorizontalAlignment="Left" Margin="110,135,0,0" VerticalAlignment="Top" IsChecked="True"/>
<RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="229,135,0,0" VerticalAlignment="Top"/>
</Grid>ラジオボタンもイベント処理などの機能は必要ないため、コードビハインドの記述は不要です。
ラジオボタンは以上です。
四角のボタンを追加する
次にButtonコントロールを使って、四角のボタンを設置します。
Microsoft公式の説明は以下にあります。
ツールボックスのウィンドウで「コモンWPFコントロール」の中にある「Button」を選択し、それをMainWindow.xamlの画面(デザインビュー)上にドラッグ＆ドロップで配置します。
ボタンの位置を調整し、ボタンに表示するテキストを変更します。
以下の例では「Display」というテキストとしています。
XAMLビューでXAMLコードの内容を確認すると、以下の通りButtonが追加されていることが分かります。
<Grid>
<TextBlock HorizontalAlignment="Left" Margin="110,60,0,0" TextWrapping="Wrap" VerticalAlignment="Top"><Run Language="ja-jp" Text="Select a message option and then choose the Display button."/></TextBlock>
<RadioButton x:Name="HelloButton" Content="Hello" HorizontalAlignment="Left" Margin="110,135,0,0" VerticalAlignment="Top" IsChecked="True"/>
<RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="229,135,0,0" VerticalAlignment="Top"/>
<Button Content="Display" HorizontalAlignment="Left" Margin="180,176,0,0" VerticalAlignment="Top"/>
</Grid>空のイベントハンドラの追加
「Display」ボタンにイベントハンドラを追加します。
「Display」ボタンを選択してダブルクリックすると、MainWindow.xaml.cs が開き、Clickイベントハンドラのコードが自動で生成されます。
コードは以下のとおりで、関数の中身はまだ空っぽです。
private void Button_Click(object sender, RoutedEventArgs e)
{
}XAMLビューでXAMLコードの内容を確認すると、ButtonにClick属性が追加されていることが分かります。Click属性の”Button_Click”は、上記のClickイベントハンドラの関数名です。
<Button Content="Display" HorizontalAlignment="Left" Margin="180,176,0,0" VerticalAlignment="Top" Click="Button_Click"/>なお、Clickイベント以外のイベントハンドラを追加したい場合、「Display」ボタンを選択してプロパティ画面を開き、右上にあるカミナリのマークのボタンをクリックします。
イベント一覧が表示されるので、追加したいイベントの横の空欄にイベントハンドラの名前を入力すると、イベントハンドラのコードが自動で生成されます。
イベントハンドラにコードを追加
「Display」ボタンがクリックされたときにメッセージボックスを表示するようにするため、Clickイベントハンドラにコードを追加します。MessageBoxクラスを使用します。以下が追加したコードの例です。
private void Button_Click(object sender, RoutedEventArgs e)
{
if (HelloButton.IsChecked == true)
{
MessageBox.Show("Hello.");
}
else if (GoodbyeButton.IsChecked == true)
{
MessageBox.Show("Goodbye.");
}
}HelloButton と GoodbyeButton は、RadioButtonクラスのインスタンスです。こちらで追加したラジオボタンに対応します。
IsCheckedプロパティがtrueなら、ラジオボタンが選択されている状態です。
どちらが選択されているかによって、”Hello.”または”Goodbye.”のメッセージを表示します。
実行結果
メニューの「デバッグ」-「デバッグなしで開始」（またはCtrl＋F5）で実行した結果は以下のとおりです。
