ユーザコントロールの理解

SilverlightおよびWPFの根本的な設計目標は、開発者が簡単にUI機能を再利用可能なコントロールにカプセル化できるようにすることです。開発者は新しい自作コントロールを既存のコントロールクラス（コントロールベースクラス、もしくはテキストボックスやボタンなどのコントロールなど）から派生させて実装することができます。 また、再利用可能なユーザコントロールを作ることも可能で、それによりXAMLタグファイルを使用してコントロールのUIを簡単に作成するようことができ、また簡単に実装することができます。

今回のDiggアプリケーションには、マスター・詳細シナリオを実装させて、そのアプリケーションで、エンドユーザはトピックを検索し、そのトピックに関する記事の一覧を紐付け、選択した記事の詳細を表示させることができるようにします。例えば、一覧にある以下の記事を選択します。 :

そうすると、その記事について、この詳細が表示されます。 :

ListBoxから記事を選択した時に表示を行う"StoryDetailsView"ユーザコントロールを構築することでこの詳細画面を実装していきます。

StoryDetailsViewユーザコントロールを作成

まずDiggSampleプロジェクトをVisual Studio上で右クリックし、"項目の追加"を選択します。これは新しい項目のダイアログをポップアップします。UserControl項目テンプレートを選択して、"StoryDetailsView"という名前を付けます。 :

DiggSampleプロジェクトにこの名前がついた新しいUserControlを新規で追加します。:

ユーザコントロールを使用して基本的なモーダルダイアログを構築

StoryDetailsViewコントロールを使用して、効果的に記事の詳細が含まれたダイアログを表示するようにします。記事の詳細がユーザコントロールで表示されるとき、ページ上では他のコンテンツの上に表示されるようにして、その詳細が閉じられるまでページに対して他の事ができないようにします。

このモーダルダイアログの様な動作を実装するにはいくつかの方法があります。この特別なシナリオに対して、まずStoryDetailsView.xaml ユーザコントロールを開いて、以下のXAMLコンテンツをそこへ追加します。 :

上記の最初の<Rectangle>コントロールはスクリーン上の利用可能な全てのスペースを使って拡大されるように構成されています。その背景色は幾分透明なグレーです。（透明度が.765に設定されているので、下にあるものが少し見ることができます）2番目の<Border>コントロールはこのRectangle コントロールの上の層に配置され、スクリーン上は固定された幅で表示されます。背景色は青で、閉じるボタンがあります。

有効になっている時、StoryDetailsView ユーザコントロールのUIは現在以下の様に表示されます。 :

ユーザコントロールのコードビハインドファイルで"CloseBtn_Click"イベントハンドラを実装することができます。押下された時、その閉じるボタンのイベントハンドラはユーザコントロールのVisiblitiyを"Collapsed"に設定します。それにより、スクリーンから非表示になり、以下のコンテンツにユーザは返されます。 :

StoryDetailsViewコントロールを表示

スクリーン上にStoryDetailsViewユーザコントロールを表示されるようにする簡単な方法はPage.xamlファイルの下にそれを単純に追加すると、デフォルトの設定をCollapsedにします。（つまり、アプリケーションが最初にロードされた時は非表示になります。） :

その後、Page.xamlのコードビハインドクラス内でListBoxコントロールから"SelectionChanged" イベントを処理することができます。 :

ユーザがその一覧から特定の記事を選択すると、ListBoxのSelectionChangedイベントハンドラを使用して、ShowDetailsView ユーザコントロールのVisibilityプロパティを"Visible"に設定することができます。 :

これはモーダルユーザコントロールダイアログを表示させます。"閉じる"ボタンをユーザがクリックすると、それは非表示になりユーザは他の記事を選択できるようになり、それを繰り返すことができます。

StoryDetailsViewユーザコントロールに記事データを引き渡し

最終的にはStoryDetailsViewユーザコントロールにエンドユーザがListBoxから選択した記事の詳細情報を表示させていきます。

ListBoxの"SelectionChanged"イベントハンドラ（ページのコードビハインドクラスにあります。）内で、DiggStoryデータオブジェクトへアクセスすることができ、ListBoxの"SelectedItem"プロパティにアクセスすることで、選択したListBoxとやり取りできます。

DiggStoryオブジェクトをStoryDetailsView ユーザコントロールに引き渡すための１つの方法として、ユーザコントロールが表示される直前に、ユーザコントロール上の"DataContext"プロパティを選択したDiggStory データオブジェクトに設定します。 :

その後、ユーザコントロール内にコードを書いて、手続き的にそのDataContextを使用して結果を表示します。または、その値をバインドするデータバインド式を使用することもできます。

例えば、StoryDetailsViewのXAMLを更新して、選択した記事のタイトルを以下の様なデータバインド式を使用して表示させることができます。 :

今、ユーザが一覧の記事をクリックすると :

ListBox イベントハンドラは選択されたものを処理し、ユーザコントロールのDataContextを選択されたDiggStoryオブジェクトに設定し、そのユーザコントロールを表示させます。 :

データバインド式が追加された現在のDiggStoryタイトルの表示をご覧ください。

ユーザコントロールのレイアウトの仕上げ

上記のサンプルでは、簡単なマスター・詳細ダイアログのワークフローを構成する基本的な方法をお見せしています。StoryDetailsView を完成させるために、さらにユーザコントロールにコントロールとデータバインド式を追加します。

以下のコンテンツを設定するためにその<Border>コントロールを更新することで、上記のようにStoryDetailsView ユーザコントロールを更新します。 :

この後コードを変更する必要はありません。それは、DataContextから値を引き出すようにデータバインドを使用しているので、さらにコードを書く必要がないのです。

次の手順

これで今回のDiggアプリケーションにコアな機能と対話的なワークフローが全て実装されました。

最後の手順で、アプリケーションのUIをさらに手を加えていきます。特にListBoxとボタンコントロールをもう少し洗練されカスタマイズされた見た目にしていきたいと思います。

これは次のチュートリアルで行いましょう。: コントロールのルックアンドフィールのカスタマイズにテンプレートを使用