サンプルファイル 1944.02 KB

 NetAdvantage SilverlightのxamWebTileViewコントロールはSilverlight 3の機能を活かし、今までにないリッチなデータ表現を可能にするレイアウトコントロールです。今回はMicrosoft Expression Blend 3のサンプルデータ作成機能を用いて、リッチなナビゲーションを構築します。

1 2 3 4 →

はじめに

 NetAdvantage SilverlightのxamWebTileViewコントロールはSilverlight 3の機能を活かし、今までにないリッチなデータ表現を可能にするレイアウトコントロールです。今回はMicrosoft Expression Blend 3のサンプルデータ作成機能を用いて、リッチなナビゲーションを構築します。

対象読者

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

必要環境

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

 サンプルはExpression Blend 3、Silverlight 3にて作成しています。また、Windows 7 RTM版において動作を検証しています。

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

 あらかじめSilverlight 3ランタイムならびにSilverlight 3ソフトウェア開発キットがインストールされていることを確認してください。それぞれのインストーラーはmsdnより入手可能です。ソリューションをVisual Studio 2008またはExpression Blend 3で開き実行します。

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

 はじめてNetAdvantage Silverlightを使用する場合は、事前にソフトウェアをインストールする必要があります。インフラジスティックス社のWebページからインストーラをダウンロードしてください。[NetAdvantage for Web Client 2009 Vol. 1 Full - Silverlight Only]をクリックするとダウンロードが開始されます(サイトへの登録が必要です)。

 この製品は有償ですが、20日間すべての機能を使用できるトライアル版としてインストール可能です。また、NetAdvantage ASP.NETも併せてダウンロードする場合は[NetAdvantage for Web Client 2009 Vol. 1 Full]を選択します。

NetAdvantage Silverlightとは

 2009年に日本初のSilverlight 3対応コンポーネントとして発売が開始され、原稿執筆時点での日本語版最新バージョンは2009 Volume1となります。収録されているコントロールの特徴として、高機能、高パフォーマンスを実現したデータグリッド、ツリー、チャート、そして今回紹介するタイルビューコントロールを備え、Silverlight 3での業務用コントロール開発を促進します。コントロールの一覧ならびに概要は次のとおりです。

キャプション
コントロール名概要
xamWebChart基本的なチャートコントロール
xamWebDialogWindowSilverlightでWindowsライクなダイアログを実現するコントロール
xamWebEditorsマスク設定可能な編集コントロール
xamWebGrid高機能・高パフォーマンなデータグリッド
xamWebMenuメニューコントロール
xamWebOutlookBarMicrosoft OutlookライクなUIを実現するナビゲーションコントロール
xamWebTagCloudタグクラウドを実現するコントロール
xamWebTileViewタイル表示を行うコントロール
xamWebTreeツリーコントロール
xamWebSpellCheckerスペルチェックを行うことができるコントロール
Infragistics Excel EngineMicrosoft Excelの入出力を行うことができるライブラリー

 また、このスイートを使用したサンプルについてはオンラインサンプルページで確認することができます。さらに、Silverlight 3では標準で提供されていないコマンド機能についてもインフラジスティックス独自の実装を行い、Silverlightコマンディングフレームワークとして提供しています。詳細はヘルプページを参照してください。

xamWebTileViewコントロール

 通常データグリッドやリストではバインドしたデータを「行」として表示しますが、このコントロールは1レコードを、「タイル」として表示し、複数のタイルを並べて表示することができるコントロールです。

図1 - xamWebTileView一覧表示
図1 - xamWebTileView一覧表示

 表示されたタイル一覧を選択すると選択されたレコードの詳細情報を表示することが可能です。その際、その他のレコードは縮小表示されます。

図2 - レコード選択時の表示
図2 - レコード選択時の表示

 この表現をコントロールが提供します。また、表示の際の他レコードの位置やアニメーション効果のカスタマイズを極力コード記述せず実現することができます。


1 2 3 4
→
INDEX
Expression Blend 3を使ってSilverlight 3でリッチなレイアウトを持ったアプリケーションを作成しよう
Page1
はじめに
対象読者
必要環境
プログラム実行時の注意環境
コンポーネントのインストール
NetAdvantage Silverlightとは
Expression Blend 3を起動し、Silverlight 3アプリケーションを作成
イメージ画像をプロジェクトに追加し、サンプルデータを追加
xamWebTileViewをページに追加し、データをバインド
xamWebTileViewのスタイリング・テンプレート作成
その他の設定をカスタマイズ
まとめ
プロフィール

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

趣味は散歩。山手線一周が現在のところ最長記録だが最近はさぼり気味。


記事へのコメント・トラックバック機能は2011年6月に廃止させていただきました。記事に対する反響はTwitterやFacebook、ソーシャルブックマークサービスのコメントなどでぜひお寄せください。

スポンサーサイト