やまだたつやのBlog

NetAdvantage Silverlight for Line Of Businessリリース直前連載の３回目は、新しいコンテナー コントロールであるxamTileViewをご紹介します。

※USサイトのサンプルブラウザーは既にオンラインで公開しています。実際に動作を確認したいときは併せてご覧下さい。

このxamTileView（ザムタイルビュー）の主な機能は以下の通りです。

• コンテンツをタイル状に整列するコンテナー
• コンテンツを各タイルペインに自動配置
• 最大化・最小化・標準の３つの状態を切り替え可能
• ビルトインのイージングパターンの指定によって状態切り替え時のアニメーションを選択可能
• ページごとのタイル数や最大化状態の同時表示数などをプロパティ設定可能
• データーバインディング
• 各タイルペインのコンテンツはItemsSourceを用いたデータバインドによって自動生成可能
• 各状態ごとにヘッダ－・コンテンツのデータ・テンプレートを適
• ドラッグアンドドロップ
• タイルペインの位置をドラッグ＆ドロップ操作で変更可能
• ページング
• ページングを併用してデータ行数が多いときでも適切にナビゲーション

例として、サンプルブラウザーの中にある、顧客管理アプリケーションへの適用例をみてみましょう。

まず標準のビューですが、ここではバインドした顧客情報がタイル状に並べられています。各コンテンツには顧客の顔写真がテンプレートとして割り当てられています。

ここから一つのタイルを最大化すると、アニメーションを伴い選択した顧客の情報の詳細が表示されます。

もちろん最大状態では、DataTemplateをもとにより多くの情報を自由に表現できます。この例ではチャートを併用していますね。

もうひとつ、機能サンプルの中のアニメーションサンプルでは、ビルトインで用意されているアニメーション・パターンの動作を確認できます。イージングで選択可能な数種類のパターンと、アニメーション時間を変更すると、簡単にさまざまな動きを設定できます。もちろん、自作のStoryboardを割り当ててさらに楽しい画面効果を設定することも可能です。

タイルを導入することで、一般的な一覧および詳細ビューの表示切り替えをより直感的にサポートすることができます。またシンプルな操作が実現できるため、タッチパネル向けのインターフェースとも言えると思います。タイルの位置をユーザーが自由に変更できる点を活用して、情報の並列だけではなく機能を選択するためのカスタマイズ可能なインターフェースとしても面白いかもしれません。

このように、Silverlightアプリケーションにタイル・ビューを導入することで、ユーザーが見たい情報を効率的に選択・表示を行うためのUXを提供するとともに、Silverlightならではの動きのあるナビゲーション効果も簡単に導入できます。

ぜひサンプルで動作を体験し、新たなUXのアイデアにつなげてください！！

来週はその他の面白いコントロールと、NetAdvantage Silverlight が提供するフレームワーク機能の紹介をしたいと思います。

の全ての投稿を閲覧する