Windows
C#
GUI
初心者
入門

Windows GUIプログラミング入門1 メッセージボックス表示


■はじめに

Windows環境でC#を使って簡単なGUIアプリケーションを作っていきます。

理屈は最小限に、こうやればできる的な流れで行きたいと思っています。


■対象読者

WindowsのC# GUIアプリケーションを作ったことがない、

けれども何らかのプログラミング言語はそこそこ読み書きできる人。


■GUIデスクトップアプリ、主な選択肢


◇Windowsフォームアプリケーション

古い。

wbg1-01.png


◇WPF(Windows Presentation Foundation)アプリケーション

Windowsフォームの次世代。今から始めるならこれ。

Windows 10だけで動けばいいならUWPという選択肢もあり。

wbg1-02.png


◇UWP(Universal Windows Platform)アプリケーション

一番新しいやつ。Windows 10シリーズで動くアプリが作れる。

ただし、Windows 7や8.1では動かない。

デスクトップアプリのプラットフォームとしてはまだ発展途上。

セキュリティを強化した分、色々と面倒くさい。

ちょっとしたツールを作って一部の人に配布、というような用途には向かない。


◇どれにする?

対応OSの幅広さ・将来性・自由度の高さのバランスからWPFを選択します。

※この連載では、C#を使ったWindowsデスクトップアプリ開発の入門を書いていきます。

WPFで開発しますが、Windowsフォームと同じくらいの難易度で取り組めるよう、開発手法や取り扱うトピックを調整しています。

そのため、「WPFを極めたい」「WPFらしいプログラムを書けるようになりたい」という人には向きません。


■開発環境を整える

個人利用では無償のVisual Studio Community 2015を使います。

(連載の9回目からはVisual Studio Community 2017を使用しています)

持っていない場合はこちらからダウンロードしましょう。

Visual Studio 2015のサポートOSはWindows 7~です。

この記事ではWindows 10を使っています。


■さっそく作る

Visual Studioを起動したら、新しいプロジェクトを作成します。

テンプレートの「Visual C#」 - 「Windows」 - 「WPFアプリケーション」を選択してください。

wbg1-03.png

「名前」欄はプロジェクトの名前です。

1プロジェクトが1実行プログラム(やライブラリ)と考えてよいです。

ソリューションというのはプロジェクトをまとめる単位です。

規模が大きいものになると1つのソリューションの中に複数のプロジェクトが入っていたりします。

新規プロジェクト画面でOKを押すとこんな画面になります。

wbg1-04.png

左のツールボックスからButtonを右の画面デザイナにドラッグ&ドロップします。

(お使いの環境でツールボックスが無い場合、メニューの「表示」 - 「ツールボックス」で表示されます。)

そうすると画面デザイナ上にボタンが配置され、下のエディタ部分にButtonのタグが自動的に作成されます。

wbg1-05.png

このXMLっぽいものはXAML(ザムル)という言語で書かれています。

画面デザイナでボタンの角のをマウスでドラッグしてボタンサイズを大きくしましょう。

wbg1-06.png

今度は画面右下のプロパティページでボタンのテキストを変更します。

ボタンのテキストはContentプロパティが該当します。

wbg1-07.png

Content押してくださいと入力してEnterしたらXAMLと画面デザイナに反映されました。

wbg1-08.png

XAMLで Content="Button"Button 部分を直接編集してもよいです。

慣れてくるとXAMLを直接編集した方が効率よく開発できます。

今度はボタンの文字の大きさを変えてみます。

プロパティの「テキスト」カテゴリでフォントサイズを変えます。

wbg1-09.png

大きくなりました。今度もきちんと反映されていますね。

wbg1-10.png

次はボタンを押したら何か処理をさせましょう。

画面デザイナでボタンをダブルクリックしてください。

wbg1-11a.png

エディタ画面に飛んでボタンクリック時の処理を書く場所(イベントハンドラ)が作成されました。

このC#のソースファイルはコードビハインド(分離コード)と言って、画面定義のXAMLと対になっています。

wbg1-11b.png

ソリューションエクスプローラーでMainWindow.xamlの横の三角をクリックすると、

wbg1-13.png

MainWindow.xaml.csが出てきます。これがコードビハインドです。

wbg1-14.png

XAMLに戻ってボタンの定義を見てみるとクリックイベントが作成されています。

wbg1-12.png

コードビハインドのbutton_Clickイベントの中にメッセージボックスを表示するコードを書きます。

MessageBox.Show("こんにちは");

途中まで入力すれば入力候補が表示されます。

wbg1-15.png

wbg1-16.png


■動かしてみる

ツールバーの「開始」ボタンを押します。

編集内容が保存・ビルドされてエラーが無ければプログラムが起動します。

wbg1-17.png

※起動時にこんなのが出て邪魔な場合は、この記事 を参照

wbg1-20.png

起動しました。ボタンを押してみます。

wbg1-18.png

メッセージが出ました。

wbg1-19.png

おしまい


< 前の記事   次の記事 >



■Windows GUIプログラミング入門 連載一覧