C#でwpfを使ったプログラミングを始めるには？マークアップ言語の設定方法を紹介！

システム
エンジニア

wpfとはどのような技術ですか？

プロジェクト
マネージャー

wpfとはアプリケーションのユーザーインターフェースを作る際に必要なフレームワークのことです。C#でもサポートされていますので解説しますね。

C#でwpfを使ったプログラミングを始めるには

C#などの.NET系言語の開発でGUIを作る場合、多くの方がWinFormsを採用しているでしょう。しかし、C#言語の場合、wpfという方法でもGUIが作れます。

この記事では、「wpf」という言葉は聞いたことがあっても、どのような技術かは分からないという方に向けた内容をご紹介します。

普段WinFormsで実装しているC#をお使いの方は、wpfの特徴と見比べてみてください。

WPFとは?

「WPF」は、Windows Presentation Foundationの略で、Microsoftが開発したユーザーインターフェースサブシステムのことを指します。

アプリケーションのユーザーインターフェースを作る上で必要となるフレームワークで、C#でもサポートされています。

wpfの主な特徴はプログラミングモデルにありますが、ユーザーインターフェース部とロジック部を分けて開発するモデルを採用しています。

wpfのプログラミングモデルについて

先に触れたように、wpfのプログラミングモデルは、ユーザーインターフェース部とロジック部を分けて考えるという概念を採用していますが、ここではその概念について詳しく説明します。

概念を簡単にご説明しますと、アプリケーションの外観はマークアップ言語を用いて作り、動作はC#などの言語を使って開発するイメージです。ユーザーインターフェース部と動作部をデータバインディングさせて連結します。

なお、マークアップ言語やデータバインディングについては後ほど解説します。

ユーザーインターフェースとロジックを分けるメリットは?

ユーザーインターフェース部と動作部を分けることには、3つのメリットがあります。

1つ目は、開発者のアサインの分離です。ユーザーインターフェース部と動作部でそれぞれの開発者をアサインできるため、効率よく開発できます。

2つ目は、ユーザーインターフェース部を実装しつつ、別の人が動作部を設計できる点です。そして3つ目は、アプリケーションの多言語化が可能になることです。

wpfを使ったプロジェクトの起動方法とファイルについて

wpfについて詳しく説明する前に、プロジェクトの起動方法についてご説明します。

Visual Studioを起動したら、スタートウィンドウで「新しいプロジェクトの作成」を選びます。ここでは、新しいプロジェクトとして「Visual C#」のカテゴリから「WPFアプリ」を選択しましょう。

名前や場所を設定し、OKボタンを押すとプロジェクトが作成されます。ソリューションエクスプローラーを見るとファイルがあります。

なお、Microsoft公式ドキュメントでは画像付きで作成方法が記載されていますので、参考にしてください。

XAMLファイルについて

ここでは、作成したプロジェクト内のファイルについて説明します。

ソリューションエクスプローラーを見ると、「MainWindow.xaml」というファイルがあります。これがユーザーインターフェース部となるファイルです。

このファイルひとつでXAML記述とデザイン配置が可能です。Visual Studio画面の中でデザイナーとXAML記述内容を見ることができます。

使用する場合はファイル名をリネームしてください。

ロジックファイルについて

次に、C#を使って動作部を記述するファイルについて説明します。

動作部には、コントロールやフォームなどの各イベントの処理や、それに付随するロジックを実装します。

動作となるロジックを記述する場合は、「MainWindow.xmal.cs」のファイルを使います。ソリューションエクスプローラーの「MainWindow.xmal」ファイル上で右クリック→コードの表示を押すことで表示されます。

マークアップ言語の設定方法

wpfでは外観をマークアップ言語で実装しますが、その際に使われているのがXAMLです。

XAMLは、XMLをベースに拡張したマークアップ言語です。XAMLを用いれば、コントロールの生成ができるうえ、ウィンドウサイズに合わせた描画や図形の描画なども可能になります。

例として、XAMLを用いてボタンを生成してみましょう。

<Button Name=”Button1″>ボタン1</Button>

これで、「ボタン1というテキストで、button1という名前のボタン」が作られます。

XAMLやHTMLを理解していないとwpfは難しい?

先の例ではXAMLでHTMLを使ってコントロールを生成しましたが、XAMLやHTMLを理解していないとwpfで開発することは難しいのでしょうか。

結論から言うと、「できないこともない」です。

コントロールの配置は、WinForms同様にツールボックスから選択してドラッグ&ドロップで貼り付けることができます。

ただし、詳細なカスタマイズをする場合はHTMLの知識が必要ですので、少しずつ覚えて行きましょう。

動作部の設定方法

次に動作部の実装を、C#を使って行いましょう。

今回は、ボタンを押した時に「こんにちは」というメッセージボックスを出力するプログラムを作ります。

ロジックの構成としては、ボタンがクリックされた時のイベントを1つと、メッセージを受け渡すクラスを1つ作ります。

機能単位でファイルを分けて実装することが標準的ですが、今回は「MainWindow.xaml.cs」ファイル1つに2つのクラスを配置します。

メッセージクラスの作成方法

「MainWindow.xaml.cs」ファイルを開き、まずはC#でメッセージクラスを作ります。

MessageDataクラスのMsgメソッドが呼び出されると、「こんにちは」と返されるように実装しました。

ボタンのクリックイベントの作成方法

メッセージクラスの作成が完了したら、次にボタンのクリックイベントについて実装しましょう。

MainWindowクラス内に以下のように記述します。

ボタンがクリックされた時にメッセージクラスからMsgメソッドの値を取得し、それをボタンのContentに設定しました。

ここまでできたら、アプリケーションを実行してみましょう。ボタンをクリックすると、ボタンには常に「こんにちは」と表示されます。

データバインディングの設定方法

ここからは、データバインディングについて説明します。

データバインディングとは、データと対象となるオブジェクトを紐づける仕組みを指します。

例えば、テキストボックスとデータをバインドすることでデータを値としてセットしたり、逆に値をデータベースへ格納したりすることが可能になります。

WinFormsでは、値のセットや取得の際に、その箇所にロジックを記述する必要がありましたが、データバインディングでは、その都度書く必要がなくなります。

データとコントロールをバインドさせるには?

次に、データとコントロールをバインドさせる方法について説明します。ここでは例として、テキストボックスにデータバインディングしてみましょう。

MainWindowコンストラクタ内にデータとして扱うためのオブジェクトを定義します。

これで、前章で作成したメッセージクラスをデータとして扱えるようにオブジェクト化できました。ただし、この部分を記述しなければデータバインドされませんので、覚えておきましょう。

コントロールへバインドする

次に、コントロールへデータをバインドしてみましょう。「MainWindow.xaml」を開いて、ツールボックスからテキストボックスを選択し、デザイナーに配置します。

そのあと、XAMLでTextBoxのText要素に対して以下のように追加してください。

< TextBox Text="{Binding Path=Msg}" / >

この記述をすることによって、メッセージクラスのMsgメソッドの内容をバインドできます。

ここまで実装できたら一度保存し、アプリケーションを実行してみましょう。起動するとテキストボックスに「こんにちは」と表示されます。

システム
エンジニア

なるほど。HTMLを理解すればより効果的に使用できるのですね。

プロジェクト
マネージャー

そうなんです。これを機にHTMLの理解を深めると良いでしょう。

まとめ

これまでC#でwpfの実装手法について紹介しました。

wpfを使うメリットは、ユーザーインターフェース部と動作部を分離させて工程を組めたり、実装者をアサインしたりできる点です。

WinFormsと異なる点は、XAMLを使ってコントロールを形成するところです。また、データバインディングによってコントロールとデータを紐づけできるため、効率よく開発が進められます。

さらに、HTMLを学ぶ良い機会にもなります。

データバインディングのロジック部分は理解するまで時間を要しますが、この記事を参考に実装してみてください。