ユニバーサルアプリで RelativePanel を利用する - UWP

ユニバーサルアプリで 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を利用して、コントロールの配置ができました。