Blend でオブジェクトをレイアウト コンテナーに編成する

イメージ、ボタン、ビデオなどのオブジェクトをどこに表示させたいか想像してください。 縦か横の単一行の行列、または固定位置に表示させたいのではないでしょうか。

ページをどのように表示するかについて考える機会が得られたら、レイアウト パネルを選択します。 オブジェクトを追加するための何かが必要になるため、すべてのページはあるものから開始します。 これは既定ではグリッドですが、変更しても構いません。

レイアウト パネルでは、ページ上にオブジェクトを配置できますが、それ以上のことができます。 さまざまな画面サイズと解像度で設計するのに役立ちます。 ユーザーが自分のアプリを実行する際、デバイスの実際の画面と一致させるためにレイアウト パネル内のすべてのものがサイズ変更されます。 もちろん、レイアウトのサイズ変更をしたくない場合は、レイアウトの一部または全体の動作をオーバーライドできます。 これを制御するには、高さと幅のプロパティを使用します。

このページでは、レイアウト パネルとコントロールについて説明した後、パネルとコントロールの使用を開始する助けとなる短いビデオに移ります。 ビデオを提案したい場合、またはページのコンテンツの整理に役立つすばらしいビデオをご存知の場合は、私たちと共有してください。 「コンテンツの進化にご協力ください!」を参照してください。

レイアウト パネル

いずれかのレイアウト パネルを選択して、ページを開始します。 ページは、複数にすることができます。 たとえば、グリッド レイアウト パネルで開始してから StackPanel をグリッド内の領域に追加することがあります。そうすることで、その要素内でコントロールを縦方向に配置できます。

次のレイアウト パネルは最もよく使用されますが、他にもレイアウト パネルがあります。 すべてのレイアウト コントロールは [アセット] パネルにあります。

• グリッド

• UniformGrid

• Canvas

• StackPanel

• WrapPanel

• DockPanel

グリッド

行と列にオブジェクトを配置します。

短いビデオを見る: グリッドの使用

UniformGrid

オブジェクトを等しい、統一されたグリッド領域に配置します。 このパネルは、イメージの一覧を配置するのに適しています。

(WPF プロジェクトでのみ使用可能)

短いビデオを見る: UniformGrid での作業

Canvas

任意の方法でオブジェクトを配置します。 ユーザーがアプリを実行しているとき、これらの要素は画面上の固定位置にあります。

短いビデオを見る: キャンバスでの作業

StackPanel

横方向または縦方向の単一行にオブジェクトを配置します。

短いビデオを見る: StackPanel と WrapPanel での作業

WrapPanel

左から右へ順番にオブジェクトを配置します。 パネルの右端に余地がない場合、コンテンツを次の行に折り返します。同様に左から右、上から下へ実行します。 上から下、左から右へオブジェクトが流れるよう、[折り返し] パネルの向きを縦方向にすることもできます。

(WPF プロジェクトでのみ使用可能)

短いビデオを見る: StackPanel と WrapPanel での作業

DockPanel

オブジェクトをパネルの 1 辺に沿うように (ドッキングして) 整列します。

(WPF プロジェクトでのみ使用可能)

短いビデを見る: WPF - DockPanel

レイアウト コントロール

オブジェクトをレイアウト コントロールに追加することもできます。 レイアウト パネルほど機能が豊富ではありませんが、特定のシナリオで役立つことがあります。

次のレイアウト コントロールは最もよく使用されますが、他にもレイアウト コントロールがあります。 すべてのレイアウト コントロールは [アセット] パネルにあります。

• 境界線

• Popup

• ScrollViewer

• UniformGrid

• ViewBox

境界線

罫線、背景、またはその両方をオブジェクトの周りに作成します。 境界線に対して追加できるオブジェクトは 1 つのみです。 複数のオブジェクトに境界線や背景を適用する場合は、レイアウト パネルを境界線に追加します。 次に、オブジェクトをそのパネルまたはコントロールに追加します。

短いビデを見る: 境界線での作業

Popup

ウィンドウで情報またはオプションをユーザーに表示します。 ポップアップに対して追加できるオブジェクトは 1 つのみです。 既定では、ポップアップにはグリッドが含まれていますが、これは変更することができます。

ScrollViewer

ページまたはページの領域を下にスクロールできるようになります。 ScrollViewer に追加できるオブジェクトは 1 つのみであるため、グリッド や StackPanel などのレイアウト パネルを追加することには大きな意味があります。

Viewbox

ズーム コントロールのようにオブジェクトを拡大または縮小します。 ViewBox に対して追加できるオブジェクトは 1 つのみです。 複数のオブジェクトにその効果を適用する場合は、レイアウト パネルを ViewBox に追加してから、コントロールをそのレイアウト パネルに追加します。

(WPF プロジェクトでのみ使用可能)

コンテンツの進化にご協力ください。

オブジェクトの Blend への配置に役立つビデオや記事が見つかった場合は、私たちと共有してください。 コンテンツを確認後、他のユーザーがお客様の発見の恩恵を受けられるように、当社がリンクを追加する可能性があります。

お客様から新しいビデオを提案される場合は、お客様からお話を伺いたいと思います。 他のユーザーからも同様の依頼を受けている場合は、時間と優先順位が許すときに新しいビデオを作成します。

お客様よりお客様の業務をよく知っている人はいません。 そのため、どのリソースがお客様のページでオブジェクトを整理する際に役立ったか、また、当社または当社のコミュニティの誰かによる説明が不十分なのはどの領域かについて教えてください。そうすることで、お客様に役立つコンテンツを進化させることができます。

ご提案はこちらで共有してください。