Visual Studio 2010とWPFでデータをタイル表示するアプリケーションを作成しよう

xamTilesControlによるデータのタイル表示

　Visual Studio 2010 RCとExpression Blend 4 Beta、コンポーネントスイートの「NetAdvantage WPF 2010 Volume1」を用いて、リッチなレイアウトを持つWPFアプリケーションを作成する方法を紹介します。

はじめに

　以前の記事においてSilverlight 3でリッチなレイアウト持つアプリケーションを作成しましたが、2010年3月23日にリリースされたインフラジスティックス社のNetAdvantage WPF 2010 Volume1で同様の機能を持つxamTilesControlが追加されました。今回は同じサンプルデータをこの新コントロールを用いて表現するアプリケーションを構築します。

対象読者

　Visual Basic 2008以降またはVisual C# 2008以降、Expression Blend、XAMLを使ってプログラミングをしたことのある人

必要環境

　Visual Basic 2008以降あるいはVisual C# 2008以降、Expression Blend 3以降でプログラムが作れる環境。

　今回のサンプルは原稿執筆時の最新バージョンであるVisual Studio 2010 RC（英語版）、Expression Blend 4 Beta（英語版）、.NET Framework 3.5で作成しています。また、Windows 7 Enterprise（32ビット）で動作検証しています。

プログラム実行時の注意環境

　あらかじめ.NET Framework 3.5 SP1以降のランタイムがインストールされていることを確認してください。Visual Studio 2008環境でも動作するよう今回のソリューションではターゲットバージョンを.NET Framework 3.5に設定しています。Visual Studuio 2010 RCのインストーラーおよびExpression Blend 4 Betaのインストーラーは、それぞれマイクロソフトのWebページから入手可能です。

コンポーネントのインストール

　初めてNetAdvantage WPFを使用する場合は、事前にソフトウェアをインストールする必要があります。インフラジスティックス社のWebページからインストーラーをダウンロードしてください。［NetAdvantage for WinClient 2010 Vol. 1 Full］をクリックするとダウンロードが開始されます（サイトへの登録が必要になります）。この製品は有償ですが、20日間全ての機能を使用できるトライアル版としてインストール可能です。このパッケージにはNetAdvantage WPFの他にWindows Forms用のNetAdvantage Windows Formsも含まれています。

NetAdvantage WPFの概要

　「NetAdvantage WPF」は世界初のWPFコントロールスイートとして2007年に発売が開始されました。原稿執筆時点での日本語版最新バージョンは2010 Volume1で、Visual Studio 2008、Visual Studio 2010に対応しています。Visual Studio 2010への対応状況の詳細はインフラジスティックス社のWebページで確認してください。

　収録されているコントロールはデータグリッド、データカード、タイル、カルーセル、チャート、リボン、ドックマネージャー、Outlookバー、カレンダー、各種エディタを取りそろえ、商用のWPF業務用アプリケーション開発を促進します。このスイートを使用したサンプルも同社のWebページで確認することができます。

xamTilesControlコントロール

　「xamTilesControl」コントロールはバインドされたデータのレコードを「タイル」として表現し、上下左右に並べて表示できるコントロールです。

図1　xamTilesControl一覧表示

　表示された一覧から特定のタイルを選択すると、選択されたレコードの詳細情報を表示できます。その際、他のレコードは最小化されます。最小化されたタイルも一部を展開することで、ある程度の情報を表示することが可能です。

図2　選択時はタイルを最大し、最小化されたタイルも展開することができる

　最大化、最小化時のトランジション（状態遷移時の視覚効果）、一覧表示をコントロールが提供します。また、表示の際の他レコードの位置やアニメーション効果のカスタマイズを極力コード記述せず実現することができます。