SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Infragistics NetAdvantageチュートリアル(AD)

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一覧表示
図1 xamTilesControl一覧表示

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

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

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

次のページ
Expression Blendを起動し、WPFアプリケーションを作成

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
Infragistics NetAdvantageチュートリアル連載記事一覧

もっと読む

この記事の著者

インフラジスティックス・ジャパン株式会社 池原 大然(イケハラ ダイゼン)

国内ベンチャー企業にて.NETエンジニアとして開発に従事、2007年インフラジスティックス・ジャパンに入社。現在デベロッパー エバンジェリストとして、.NETやWPF/Silverlight製品や技術の啓蒙活動を行う。Microsoft MVP for Client App Dev 2010/04 ...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/5056 2010/03/26 17:20

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング