前回は実際にVisual StudioでHello Worldと表示させるWPFアプリケーションを作成し、WPFのコントロールの中でもイメージが付きやすいかつ、Hello Worldアプリケーションをよりアプリケーションっぽいものにするために使えそうなものをいくつかピックアップして紹介しました。

今回はそれらを活用してよりWPFアプリケーション開発の学習に取り組んでみたいと思います。

アプリケーションの開発無計画に進めていくのはあまり効率的とは言えませんし、少し怖いですね。

今回のようなかなり小規模なアプリケーションであれば困るような事態になることはなさそうですが、実際のアプリケーションを開発していく場合は規模も大きくなりますし、人数も増える可能性があります。

ですので、まずはどのようなアプリケーションにしていくかを簡単に決めてから進めていきます。


現状ではアプリケーションを起動した段階で既に「Hello World!!」とテキストが表示されていますが、これをユーザーの操作に対する処理として行いたいですね。

ここはButtonを配置して、そのButtonが押されたらテキスト表示を行うという形にしてみましょう。

また、Hello Worldと言っていますが、日本語でも挨拶が時間帯によって変わるように、英語でも変化するはずです。ComboBoxを使って大まかな時間指定ができるような機能も欲しいですね。


今回また新しくソリューションを作成しましょう。

前回のものと同じ手順でプロジェクトを作成します。

プロジェクト名は、今回は「HelloWorld!!」で作ります。

前回はHello World!!のテキストをTextBoxで作りましたので、もう一度同じようにTextBoxを配置します。

配置が完了したらXAMLビューにTextBoxのマークアップが追加されますので、その中の「”Text=”」という部分を探して中身をHello World!!に書き換えてみましょう。

デザインビュー側のTextに表示される文字が変わったら完了です。


今回は少しレイアウトも変えてみましょう。デザインビューでTextBoxをクリックすると画面右側にプロパティが表示されます。

その中に「テキスト」の設定項目がありますので、そこから文字を中央ぞろえにしましょう。

文字サイズも少し大きくしてみるのもありです。

これでButtonの配置は完了です。

ですがこのままでは何も処理を行うことが出来ません。

今回は配置したButtonを押すとTextBoxのテキスト「Hello World!!」を表示させるという処理を行いたいので、TextBoxの文字を動的に変更できるように処理を作る必要があります。

先ほどはTextBoxのTextを直接Hello World!!に変更しましたが、ここを一度「Sleeping…」に変更しましょう。変更したら、XAMLビューのTextBoxのマークアップの末尾に以下のコードを追記しましょう。


「x:Name=”text_hello”」


これで「text_hello」という名前の変数が使えるようになりました。

「x:Name」は、C#のコードからこのTextBoxを識別するためのものです。

今度はボタン側の処理を作っていきます。

デザインビューに配置したButtonのダブルクリックすると、MainWindow.xaml.csに「Button_Click」という処理が追加されていると思います。


ここにButtonを押した際に行いたい処理を記述することで、実際にButtonが動作を行えるようになります。

今回はこのButtonを押すとTextBoxのTextを「Hello World!!」に変えたいので、その処理を作っていきます。


「Button_Click」の中身に以下のコードを書いてみましょう。

private void Button_Click(object sender, RoutedEventArgs e)
        {
            string s_text;  // 文字列型を格納する変数
            s_text = "Hello World!!";   // "Hello World!!"という文字列を変数に格納する
            text_hello.Text = s_text;   // "text_hello"という名前のTextBoxのTextに
                                                     // "Hello World!!"の文字列を格納した変数の中身を代入
        }

ここまで完成したら、早速デバッグしてみましょう。

前回と同様、画面上部にあるデバッグ開始のボタンを押してデバッグを実行しましょう。


起動した際の画面はこのような状態です。

ここでButtonを押すと、TextBoxのテキストが「Hello World!!」に変わる想定です。早速、Buttonを押してみましょう。


想定通りの動作をしました。TextBoxの文字が「Sleeping...」から「Hello World!!」に変わりました。

もう一度動作を見たい場合は、TextBoxで作ったコントロールなのでテキストの変更が可能ですので、何か適当なテキストを入力してみて、またButtonを押下することで動作するはずです。

今回は前回作ったHello Worldアプリケーションをさらにアプリケーションっぽく作り変えてみました。

画面上に配置されたボタンをクリックすると、テキストボックスの文字列が変わるアプリケーションを作ることで、ユーザー側の操作とアプリケーションの挙動を連動させることができました。


アプリケーションではこういったユーザーの操作を処理の発火点にしたり、処理の際に必要なデータをユーザーに入力してもらうといった、ユーザーとアプリケーションで相互にやり取りのようなものをしながら処理を進めていくモノが多く存在します。

今回はかなり単純なものでしたが、次回は複数のコントロール部品を絡めた処理を作って、よりアプリケーションっぽいものを目指してみたいと考えています。


引き続きHello Worldアプリケーションの話にはなってしまいますが、よろしくお願いします