<説明>生きていた証を鼓舞するように,枯れ木がその老いた身体をさらしている。春になれば,その老いた身体から,新しい生命の息吹が芽生えるだろう。続けて、コントロールを配置していきましょう。画面右のソリューションエクスプローラーから「MainPage.xaml」をダブルクリックすると、デザイン画面が表示されます。ここでデザイン画面が狭く表示されている場合は、デバイススケールの一覧から「23”Desktop(1920×1080)100%スケール」を選択してください。デザイン画面が広く表示されます(詳細は第2回の「コントロールの配置」の項を参照)。ツールボックスからデザイン画面上の任意の場所にFlipViewコントロールを1個配置します(図2)。画面左端の「ツールボックス」タブから「FlipView」をクリックしてデザイン画面上へドラッグ&ドロップし、プロパティのNameに「FlipView1」、レイアウトのWidthに「959」、Heightに「480」を指定してください(図3)。FlipViewのプロパティを設定するそしてFlipView内に「画像」と「説明」にあたる「テキスト」を表示させるために、MainPage.xamlをリスト2のように編集してImageコントロールとTextBlockをFlipViewに適用させます。</Grid></Page>Page.Resourcesプロパティ要素を記述するPage.Resourcesプロパティ要素内にKey名が「FlipViewTemplate」というDataTemplateを記述するDataTemplateの子要素としてStackPanelを記述し、Orientatonプロパティに「Horizontal」を指定して水平方向にオブジェクトを配置するStackPanel要素の子要素としてImageを記述し、Widthを「640」、Heightを「480」と指定する。Sourceプロパティには「画像名」をバインドしておく同様にTextBlockを配置して各プロパティを設定し、Textプロパティには「説明」をバインドしておく。ここで指定するバインド名はVBコードのクラス内で定義するプロパティ名になるKey名が「FlipViewPhoneTemplate」のDataTemplateを記述するDataTemplateの子要素としてStackPanelを記述し、Orientatonプロパティに「Vertical」を指定して垂直方向にオブジェクトを配置するStackPanel要素の子要素としてImageを記述し、Widthを「320」、Heightを「240」と指定する。Sourceプロパティには「画像名」をバインドしておく同様にTextBlockを配置して各プロパティを設定し、Textプロパティには「説明」をバインドしておく。ここで指定するバインド名もVBコードのクラス内で定義するプロパティ名になるNameが「FlipView1」というFlipViewコントロールを配置しておく。リスト2のデザイン画面は図4のようになります。続けて、リスト2をリスト3のように編集します。</Grid></Page>レイアウトの変更にはVisualStateManagerを使用する画面のサイズに応じてVisualStateを自動で切り替えるには、VisualStateに新しく「StateTriggers」というプロパティが追加されており、ここに「AdaptiveTrigger」を設定することで実現できるAdaptiveTriggerには「MinWindowWidth」と「MinWindowHeight」という2つのプロパティがあり、ここに設定した幅や高さよりも大きい時にそのVisualStateに遷移する。FlipViewTemplate}"を指定する。FlipViewPhoneTemplate}"を指定する。StaticResourceでリスト1の(6)で定義した「FlipPhoneViewTemplate」を参照させるリスト3のように編集すると、MainPage.xamlのデザイン画面は図5のようになります。リスト3のXAMLで変更されたデザイン画面、特にFlipViewに見かけ上の変化はないプログラムコードの記述(MainPage.xaml.vb)次に、ソリューションエクスプローラーから「MainPage.xaml」を展開し、「MainPage.xaml.vb」をダブルクリックしてデザイン画面にコードを表示してリスト4のように編集します。XML文書を扱うため、System.Xml.Linq名前空間をインポートしておきます。ImageInfoクラス内に、文字列型の「画像名」と「説明」プロパティを定義しておきます。名がリスト1の(4)と(8)の中でSourceやTextプロパティにバインドされています。「photo_etc.xml」ファイル読み込みます。ImageInfoクラス型の新しいリストであるmyImageInfoオブジェクトを作成します。以下の処理を行います。