ユニバーサルアプリで RelativePanel の利用を紹介します。
Windows ユニバーサルアプリのプロジェクトを作成し、ページを作成します。
ソリューションエクスプローラでページのファイルを選択し、ページの編集画面(下図)を表示します。
ウィンドウ左側のツールパレットから、RelativePanelを選択し、ページにドラッグ＆ドロップします。
ページデザイナにRelativePanelが配置されます。
パネルの位置をわかりやすくするため、[プロパティ]ウィンドウの"Background"プロパティを選択し、カラーを設定します。今回は灰色を指定しました。
パネルをページ全体に広げます。パネルの上下左右の鎖のアイコンをクリックし、アライメントを設定します。
ツールパレットからButtonコントロールを選択し、RelativePanel 内にドロップし、RelativePanel内にButtonコントロールを配置します。
ツールパレットからTextBlockコントロールを選択し、RelativePanel 内にドロップし、RelativePanel内にTextBloxkコントロールを配置します。
同様の手順で、ツールパレットからBorderコントロールを選択し、RelativePanel内に配置します。
RelativePanel内に配置されたコントロールには、プロパティウィンドウに、RelativePanel関係のプロパティの項目が表示されます。
先ほど配置した[Border]コントロールを選択します。プロパティウィンドウで[AlighBottomWithPanel] [AlighLeftWithPanel] [AlighRightWithPanel]のチェックボックスにチェックをつけます。この設定により、Borderコントロールの左右と下がRelativePanelの左右、下端と連動します。
RelativePanelセクションのBelowを設定します。Belowプロパティの右側の□アイコンをクリックします。下図のポップアップメニューが表示されます。メニューの[データバインドの作成...]をクリックします。
[[Border].Below のデータ バインディングを作成]ダイアログボックスが表示されます。
ウィンドウ上部の[バインドの種類]コンボボックスから"ElementName"を選択します。下図の画面が表示されます。
[要素名]のツリービューにページに配置したコントロールの一覧が表示されます。
[button]の要素をクリックして選択します。[パス]は[Button]の項目を選択します。選択後[OK]ボタンをクリックし、ダイアログボックスを閉じます。
[Below]プロパティにButtonコントロールが設定されました。この設定により、Borderコントロールは、Buttonコントロールの下に配置される動作になります。
動作をわかりやすくルするため、BorderコントロールのBackgroundプロパティを設定します。背景色を薄い黄色に設定します。
Borderコントロールのカラーが薄い黄色になりました。
BorderコントロールのWidthプロパティに値が入力されています。RelativePanelプロパティで値を設定したため、この値は削除します。Widthプロパティの右側の[自動に設定]ボタンをクリックします。
Heightプロパティも同様に自動に設定します。
Width,Heightプロパティを設定すると、BorderコントロールがRelativePanelいっぱいに広がります。かつ、Buttonコントロールの下部に配置されます。
プロジェクトを実行します。下図のウィンドウが表示されます。
ウィンドウサイズを変更します。RelativePanelのサイズがウィンドウサイズに追従して広がり、BorderコントロールのサイズもRelativePanel内いっぱいに広がります。
ウィンドウサイズを変更すると、内部のコントロールもリサイズされます。
RelativePanelを利用して、コントロールの配置ができました。
