468
568

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2017-01-25

■はじめに

Windows環境でC#を使って簡単なGUIアプリケーションを作っていきます。
理屈は最小限に、こうやればできる的な流れで行きたいと思っています。

■対象読者

WindowsのC# GUIアプリケーションを作ったことがない、
けれども何らかのプログラミング言語はそこそこ読み書きできる人。

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

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

古い。
大規模開発や複数人開発、現代のPC環境には不向き。
wbg1-01.png

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

Windowsフォームの次世代。
小さな使い捨てプログラムから大規模なものまで対応しやすい。
wbg1-02.png

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

一番新しいやつ。Windows 10シリーズで動くアプリが作れる。
ただし、Windows 7や8.1では動かない。
セキュリティを強化した分、色々と面倒くさい。
ちょっとしたツールを作って一部の人に配布、というような用途には向かない。
USBメモリ等に入れて、借り物PCの設定を変えない・ゴミを残さない使い方(いわゆるポータブル版)も駄目。
デスクトップアプリのプラットフォームとしては諦めたのか、UWPの機能を切り出してWPF等から使えるようにする流れに。

◇どれにする?

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

※この連載では、C#を使ったWindowsデスクトップアプリ開発の入門を書いていきます。
WPFで開発しますが、タイトルの通り、WPF入門ではありません。また、Windowsフォームを卒業したい人もスムーズに取り組めるよう、開発手法や取り扱うトピックを調整しています。

■開発環境を整える

個人利用では無償のVisual Studio Community 2015を使います。
(連載の9回目からはVisual Community 2017を、19回目からはVisual Studio Community 2019を使用しています)
持っていない場合はこちらからダウンロードしましょう。

Visual Studio 2015のサポートOSはWindows 7~です。
この記事ではWindows 10を使っています。

※Visual Studio 2017~はワークロードで「.NET デスクトップ開発」をインストールしてください。

■さっそく作る

Visual Studioを起動したら、新しいプロジェクトを作成します。
テンプレートの「Visual C#」 - 「Windows」 - 「WPFアプリケーション 1 2 3」を選択してください。

wbg1-03.png
「名前」欄はプロジェクトの名前です。
1プロジェクトが1実行プログラム(やライブラリ)と考えてよいです。
ソリューションというのはプロジェクトをまとめる単位です。
規模が大きいものになると1つのソリューションの中に複数のプロジェクトが入っていたりします。

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

左のツールボックスからButtonを右の画面デザイナにドラッグ&ドロップします。
(お使いの環境でツールボックスが無い場合、メニューの「表示」 - 「ツールボックス」で表示されます。)
そうすると画面デザイナ上にボタンが配置され、下のエディタ部分にButtonのタグが自動的に作成されます。
wbg1-05.png
このXML形式のものは**XAML(ザムル)**という言語で書かれていて、画面定義の実体です。
画面デザイナ上の変更はXAMLに反映されますし、XAMLを直接編集しても画面デザイナに反映されます。
XAMLのタグを見てみると、Windowの中にGrid、そしてGridの中にButtonがあることが階層構造で分かりやすく表現されています。
bg01_xaml_tree.png
画面デザイナを見なくても、XAMLだけで大体の画面イメージが分かります。3
複数人で開発していると、画面のどこをどのように修正したか差分をとって確認するものですが、画面定義がXAMLで書かれていることで、確認がとてもやりやすくなります。

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

次はプロパティウィンドウを使用します。
プロパティウィンドウが見つからない場合、メニューの「表示」 - 「プロパティ ウィンドウ」で表示されます。
お使いの環境によってはソリューションエクスプローラーのウィンドウと一つになっているかもしれません。
bg01_prop.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プログラミング入門 連載一覧

  1. Visual StudioのバージョンによってはWPFアプリ(.NET Framework)の他に、WPF App(.NET Core)またはWPF App(.NET)が表示されます。.NET Core(.NET)版の方が新しいですが、この連載で環境の明記が無い場合は.NET Framework版で作成しているため、.NET Framework版を選択することをお勧めします。

  2. こちらの記事で軽く.NET Core版のWPFを使ってみています。使用感は全く同じです。

  3. こちらも参考に:.NET Frameworkと.NET Core、どちらを選ぶか 2

468
568
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
468
568

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?