WPF

世界一分かりやすいC#.NETによるWPF入門第一回(WPFとはなにか)

猫画像

皆さんこんにちは。

今回からは僕自身の備忘録も兼ねて、本格的なプログラミングの記事を書いていきたいと思います。

今まで入門者向けの記事を書いてきましたが、これから書いていくWPFの記事は、完全なプログラミング初心者向けではありません。

intって何?ビルドって何?という人までは対象にしていません。

しかしC#の経験がほんの少しあるくらいの人であれば問題なく読めるように丁寧に記事を書いていきたいと思っています。

そのため完全にプログラミング入門者の方は、少し勉強して事前知識を得てから読みに来ていただけたらと思います。

なお、開発環境にはVisualStudio2017Communityを使用します。

開発環境の導入自体は難しくない上、ネット上にいくらでも転がっているため、

導入方法などは各自インターネットで調べてください。

第一回ではWPFに関する簡単な解説をしていきたいと思います。

とはいえ、僕自身WPFの経験は浅く、WPFの全てを理解しているわけではないので、全てが完全に正確な表現ではないかもしれません。

あらかじめご了承ください。

逆を言えば、正確な定義を知らなくとも、プログラミングの開発には支障がないということですね。

細かいことを気にしだしたらキリがありません。

WPFとはなんなのか

WPFというのは、Windows Presentation Foundationの略で、マイクロソフトによると、UIフレームワークのことのようです。

UIというのは、ユーザインタフェースのことですね。

いちいち説明したらキリがないのですが、もしかしたら初心者の人も呼んでいるかもしれないので簡単に説明すると、

インタフェースというのは「境界面」みたいなもので、

ユーザーである今この記事を読んでいる「あなた」と、アプリケーションソフトウェアとの

境界面を意味します。

その中でも、画面上でアプリケーションをユーザーが操作できるようなものはGUI(グラフィカルユーザインタフェース)と呼ばれます。

ほとんどのソフトウェアはボタンがあったり、チェックボックスがあったり、GUIを持ったアプリケーションといえます。

WindowsやMacなどのユーザーの方は、普段から日常的にGUIを触っていると言えますね。

スマホなどもそうです。

あなたが今開いているこのブログも色んなボタンがありますよね。これがGUIです。

対して、CUIというものがあって、LinuxOSなどを触ったことのある人は分かると思いますが、

Windowsなどと違って、文字だけの画面で、文字で全ての操作をするパソコンの世界があるのです。

以下はWindowsのコマンドプロンプトの写真ですが、これがCUIのアプリケーションの例ですね。

コマンドプロンプト

Windowsではだいたいが画面を触って操作できるアプリケーションで構成されていて、

ほとんどがGUIのアプリケーションなのですが、

LinuxなどはCUIの世界で、基本的には文字だけで操作する世界なのです。

そして、フレームワークというのは、日本語にすると枠組みということで、

アプリケーションを開発する道具のことですね。

僕自身も正確な定義は知りませんが、たいていは単なるライブラリ群であったりします。

WPFはUIフレームワークなので、GUIを簡単に作れる枠組みとでも言えば良いでしょうか。

WPFはXAML(ザムル)というXML形式のコードで画面を簡単に作ることができるのです。

このXAMLコードというのが秀逸で、WPFでは有名なデザインパターンであるMVCパターンのうちMVVMパターンを採用していて、ビューとモデルを分離します。

ビュー部分はXAMLコードで書いて、モデル部分はC#コードで記述します。

デザイナーとプログラマーの分業を意識して開発されたフレームワークのようですね。

ビュー部分はVisualStudioではXAMLエディタというツールを使って開発ができるため、直感的に画面を作ることができます。

C#.NETの様々なプロジェクト形式

C#.NETでは、いくつかのプロジェクトの形式があって、古い順に、WindowsForms、WPF、UWPなどがあります。

UWPが最も新しいものですね。

WPFもUWPもどちらもXAMLを使用する点は同じです。

WindowsFormsはXAMLを使用せず、全てC#コードで記述します。

WPFやUWPはC#コード+XAMLコードという感じでプログラムを作っていきます。

UWPが最新ではあるのですが、フリーランスエンジニアの僕の感覚だと、

C#のデスクトップアプリの開発案件は未だにWindowsFormsやWPFの案件がほとんどな気がしていて、

WindowsFormsやWPFはまだまだ現役だと思います。

また、UWPはユニバーサルな開発ができるように作られたフレームワークであるのに、

WindowsPhoneが失敗に終わってしまい、現在はデスクトップアプリ開発にしか利用されていないようで、

そこまで移行するメリットを感じないというのもあります。

また、XAMLコードや.NETフレームワークの部分は共通だと思うので、新しい技術が出てきたからといって勉強したことは無駄にはなりません。

WPFは速度が遅いと言われていて、大規模開発となると問題もあるのですが、UIがWindowsFormsに比べモダンであり、素晴らしいフレームワークだと思います。

そこで今回はWPFをピックアップしました。早速なにか動くものを作っていきましょう。

WPFでHelloWorldを作る

まず第一回ではお馴染みということで、WPFでHelloWorldを作ってみましょう。

VisualStudio2017Communityを起動します。

wpf画像

「新規作成」→「プロジェクト」を選択します。

wpf画像

「Windowsデスクトップ」→「WPFアプリ」を選択し、名前およびソリューション名を「WpfApp」、場所は自分で分かる場所に適当に設定し、右下の「OK」を押します。

wpf画像

以下のような画面が表示されたと思います。

左側にあるツールボックスのうち、「コモンWPFコントロール」→「Button」を選択した状態で、真ん中にあるウィンドウにButtonをドラッグ&ドロップします。

wpf画像

すると以下のように画面にButtonが張り付いて、XAMLエディタ上に黄色いマーカーでXAMLコードが追加されているのが分かると思います。

分かりやすいようにボタンは大きくしてあります。

wpf画像

この状態で、画面上のボタンにカーソルを合わせ、ダブルクリックします。

すると、今度はC#コードのエディタに画面遷移します。

そして、黄色いマーカーがついている部分がボタンをダブルクリックして追加されたコードです。

C#経験者の方は分かるかと思いますが、これがイベントハンドラと呼ばれるものですね。

wpf画像

ここに、以下のような呪文を書き込みます。

「MessageBox.Show(“Hello World”);」

wpf画像

上にあるメニューバーから「ビルド」→「ソリューションのビルド」を選択して実行すると、ビルドが実行されます。

次に、同様にメニューバーから「デバッグ」→「デバッグの開始」を押すと、以下のようなウィンドウが現れるはずです。

wpf画像

ボタンをクリックしてみましょう。

wpf画像

「Hello World」のメッセージボックスが現れましたね。

まとめ

いかがでしたでしょうか。

WPFでHello Worldを出力してみました。

反響が少しでもあれば、次回からは本格的に各種のコントロールの使い方や、

WPFならではの機能を紹介していきたいと思います。

楽しみにしていてください。

WPFの書籍の紹介

ここではWPFの書籍を紹介していきたいと思います。

WPFの本は少ないのですが、以下はおそらく最も有名なWPFの書籍です。

WPFを勉強するならこの本が良いと思います。