Studioのデザイン画面に表示する方法を説明する。前回までで紹介したデータ・バインドの方法では、実際にどのような表示になるかは実行してみないと分からない。Studioのデザイン画面で表示を確かめることはできないだろうか?そこで本稿では、XAMLコードだけでデータ・ソースのインスタンスを生成し、それをデータ・コンテキストに設定してデザイン画面に表示する方法を説明する。8版)」からダウンロードできる。8アプリで共通である。2012)が必要である。これらを準備するには、第1回のTIPSを参考にしてほしい。8.0(無償)が必要となる。8]」)では、コードビハインドのコードでデータ・ソースをデータ・コンテキストに設定していた。2012のデザイン画面ではコードビハインドのコードは実行されない。そのため、デザイン画面の表示には反映されず、実際にはどのような表示になるか分からなかったのである。XAMLのコードだけでデータ・ソースのインスタンスを生成してデータ・コンテキストに設定できれば、デザイン画面の表示にも反映されるだろう。それは、以下のようにすれば実現できる。XAMLのコードだけでデータ・ソースのインスタンスを生成しなければならない。8]」で紹介している。そのときは、バリュー・コンバータのインスタンスを定義するためにページの<Resources>要素内に記述した。同様にしてデータ・ソースのインスタンスも定義できるのだ。前回でリファクタリングしたClockクラスのインスタンスを定義するには、ページの<Resources>要素内に次のように記述する。次のコードの太字の部分がClockクラスのインスタンスの定義だ。8用のMainPage画面に定義したClockクラスのインスタンス(XAML)ClockクラスのインスタンスをClockInstanceという名前で定義している(分かりやすいようにクラス名とインスタンスの名前を変えている)。8用のXAMLコードは次のようになる。8用のアプリでは、ページの開始タグに名前空間の定義も追加する。ここでは「MetroTips034」という名前空間名になっているが、適宜変更してほしい。リソース定義がない場合は上記の定義を新たに記述しよう。続いて、上で定義したインスタンスをコントロールのデータ・コンテキストに設定する。これには、コントロールのDataContextプロパティを使う。TextBlockコントロールでは次のようにXAMLコードを記述する。/>TextBlockコントロールのデータ・コンテキストに上で定義したClockInstanceインスタンスを設定した(XAML)これで、ページの<Resources>要素内で定義したClockクラスのインスタンスがTextBlockコントロールのデータ・コンテキストに設定され、TextBlockコントロールのTextプロパティはそのインスタンスのNowTimeプロパティとバインドされる。以上はXAMLコードだけで記述されているので、次の画像のようにデザイン画面でも表示される。これで実際の画面表示がどうなるかをデザイン時に確認できるようになる。8)この画像では分からないが、デザイン画面でも時刻は変わっていく。●データ・コンテキストをまとめて設定するには?以上で実際の表示がどうなるかをデザイン時に確認できるようになったが、コントロールごとにデータ・コンテキストを記述するのは面倒だ。実は、データ・コンテキストは親のコントロールのものを引き継ぐという特徴がある*1ので、各コントロールの親コントロールにデータ・コンテキストの設定を1回記述するだけで、全ての子コントロールでこの設定が使われるようになるのだ。次のようにTextBlockコントロールの親に当たるStackPanelコントロールのデータ・コンテキストを設定すると、子に当たるTextBlockコントロールとEllipseコントロールにも同じデータ・コンテキストが引き継がれる。Context(=データの文脈)」と呼ばれるのであろう。/></StackPanel></StackPanel>データ・コンテキストを親に当たるStackPanelコントロールだけに設定した(XAML)これで、子に当たる全てのコントロールのデータ・コンテキストにClockクラスのインスタンスが設定される。8]」を参照してほしい。ページそのものにデータ・コンテキストを設定してもよいだろう。ページの開始タグ内に記述してもうまくいかない。次のようにして、ページの<Resources>要素の直後に*2ページの<DataContext>要素を追加する。8用XAML)ページの開始タグ内に「DataContext="......"」という指定が自動生成されている場合は、あらかじめ削除しておくこと。実際には、ページの<Resources>要素の直後でなくても、ページの最初の子要素のレベル(=ページの<Resources>要素と同レベル)であれば、どこに記述してもよい。ClockInstance}"」を削除しても、時間が表示されるはずだ。時間が表示されないときには、デザイン画面を一度閉じてから、再度オープンしてみよう。●デザイン時と実行時でデータ・コンテキストを使い分けるには?デザイン画面でデータをバインドする基本は以上であるが、3点ほど補足しておく。1点目は「デザイン時属性」(または「設計時属性」)だ。デザイン時と実行時で、データ・コンテキストに設定するインスタンスを使い分けたい場合がある。Clockクラスのようなシンプルなものでは必要ないだろうが、例えばデータベースのサービスからデータを取得するようなデータ・ソースの場合は、デザイン時にはダミーのデータを表示させ、実行時には取得してきたデータを表示させるようにしたいだろう。このようなときに使うのがデザイン時属性だ。デザイン時属性は「d:」プレフィックスを付けて表される。デザイン時属性は実行時には無視される。デザイン時属性がないときには、「d:」プレフィックスを持たない同名の属性がデザイン時/実行時の両者で使われる。そこで、例えば先ほどのページのデータ・コンテキストを、次のようにデザイン時属性に置き換えると、実行時には表示されなくなる。ClockInstance}"/></d:Page.DataContext>ページのデータ・コンテキストをデザイン時属性に置き換えた(XAML)こうすると、デザイン時にはClockクラスのプロパティが表示されるが、実行時には表示されなくなる。phone:PhoneApplicationPage.DataContext」とはならない)。コードビハインドのコードで、実行時に表示させるデータをページのデータ・コンテキストに設定する。8の場合は、Windows.Ui.Xaml.Controls.PageクラスあるいはMicrosoft.Phone.Controls.PhoneApplicationPageクラスにLoadStateメソッドがなくこれをオーバーライドできないので、コンストラクタに以下のコードを記述する)。Sub世界標準時を表すGmtClockクラスのインスタンスをページのデータ・コンテキストに実行時に設定するコード(上:C#、下:VB)これはWindowsストア・アプリの場合。8では、コンストラクタの末尾に記述する。これで、デザイン時にはClockクラスのプロパティが、実行時にはGmtClockクラスのプロパティが表示される。実際の開発では上記のように、デザイン時のデータ・コンテキストはXAMLコードで、実行時のそれはコードビハインドで設定することが多い。次に示すように、XAMLコードで両方とも設定可能だ。この場合、デザイン時には通常のDataContext属性をデザイン時属性で上書きすることになる。8用XAML)こうすると、デザイン時にはClockクラスのプロパティが表示され、実行時にはGmtClockクラスのプロパティが表示される。8では、「Page.Resources」タグが「phone:ApplicationPageResources」タグに、「Page.DataContext」タグが「phone:PhoneApplicationPage.DataContext」タグになる(「d:Page.DataContext」は共通)。●部分的に異なるデータ・コンテキストを設定するには?2点目は、部分的に異なるデータ・コンテキストを設定する方法だ。ページのデータ・コンテキストはページ内の全てのコントロールに適用されるのだが、一部のコントロールに別のデータ・コンテキストを設定することもできる。その場合は、その別に設定をしたコントロールの子に当たるコントロールにも、そのデータ・コンテキストが適用される。8]」で紹介した画面を改修したものだ。GmtClockクラスのインスタンスをデータ・コンテキストに設定したStackPanelコントロールとその子に当たるコントロールはGmtClockクラスを使い、それ以外のコントロールではページのデータ・コンテキストに設定されたClockクラスを使うようになっている。8用XAML)「StackPanelTime2」という名前のStackPanelとその子に当たるコントロールには、GmtClockInstanceがデータ・コンテキストに設定される。それ以外のコントロールには、Page.DataContextで設定したClockInstanceがデータ・コンテキストに設定される。8では、「Page.Resources」タグを「phone:PhoneApplicationPage.Resources」タグに、「Page.DataContext」タグを「phone:PhoneApplicationPage.DataContext」タグに、それぞれ読み替えてほしい。このときのデザイン画面は次の画像のようになる。8)1つめの時刻にはページのデータ・コンテキストに設定したClockInstanceインスタンスのプロパティ(=日本標準時)、2つめにはStackPanelのデータ・コンテキストに設定したGmtClockInstanceインスタンスのプロパティ(=世界標準時)が表示されている。個別に設定を行う際にも実行時のデータ・コンテキストとデザイン時のデータ・コンテキストを別個に設定が可能だ。これについては公開するサンプルのMainPage.xamlファイルを参照してほしい。●デザイン時か実行時かを判別するには?最後に、データ・ソースのコードなどで、デザイン時と実行時でロジックを切り替えたいときがある。そのようなときに、どちらのモードで動作しているかを判別するためのプロパティが用意されている。System.ComponentModel名前空間のDesignerPropertiesクラスが公開しているIsInDesignToolプロパティ●まとめページの<Resources>要素にデータ・ソースのインスタンスを定義し、ページの<DataContext>要素にそのインスタンスをバインドすれば、ページ内の全てのコントロールのデータ・コンテキストにそれが設定される。必要ならば個別にデータ・コンテキストを設定することもできる。デザイン時と実行時でデータ・コンテキストを使い分けられるし、コード内でデザイン時と実行時の判別も可能だ。デザイン時のデータ・バインドの詳細については次のドキュメントを参照してほしい。8アプリ用の解説ページはまだ存在していないが、Silverlightでもほぼ同じである。メールマガジンをご購読ください。申し込みページへITmediaはアイティメディア株式会社の登録商標です。