レイアウト管理の理解

Silverlight およびWPFは柔軟性のあるレイアウト管理システムをサポートしており、開発者とデザイナが簡単にUI上でコントロールの配置を調整することができます。このレイアウトシステムはコントロールを明示的に座標を使用して配置させる固定位置モデル、またブラウザがリサイズされた場合に自動的にレイアウトやコントロールのサイズや位置変更が行えるより動的な配置モデルの両方をサポートしています。

SilverlightおよびWPFを使用する開発者はレイアウトパネルを使用してその中に含まれるコントロールの位置やサイズを調整します。Silverlightのベータ1にあるビルドインのレイアウトパネルにはWPFでよく使用される3つのものが含まれています。 :

• Canvas
• StackPanel
• Grid

Canvas パネル

Canvasパネルは非常に基礎的なレイアウトパネルで、明示的な座標を使用してその中に含まれるコントロールの配置をサポートします。

"添付プロパティ"と呼ばれるXAML機能を使用してCavasに要素を配置します。これにより親CanvasコントロールのLeft、Top、Right、Bottom座標に相対したコントロールの位置を特定することができます。添付プロパティは親パネルがそこに含まれたコントロールのプロパティ一式を拡張することができるので便利です。”Top"と”Left"に対して添付プロパティを定義することによって、基本的にはCanvasはボタン（もしくはその他Canvasに追加されたUI要素）上の左と上の添付が定義できるようになります。その時ボタンクラスに実際にプロパティを追加したり、なんらかの形でボタンクラスを修正する必要はありません。

Canvasコンテナに2つのボタンを追加し、Canvasの左から50ピクセル、上からそれぞれ50ピクセル、150ピクセルのところに、XAMLを以下の様に使用して（Canvas.Left およびCanvas.Top属性は添付プロパティシンタックスの例です。）配置することができます。 :

そうすると、これは以下のようにボタンを描画します。 :

Canvasはそこに含まれているUI要素が静止している場合に便利なものではありますが、そこへ他のコントロールを追加したり、UIのリサイズや移動が必要な場合の処理には柔軟性に欠ける傾向にあります。この様なケースでは、自分で手動でコードを書いてCanvasの中を移動させるようにすることになります。（これは大変です。）このような動的なシナリオの場合のソリューションとして、StackPanelとGridの様に、一般的にはこれを行うビルドインのセマンティックを持つ代わりのレイアウトパネルを使います。

StackPanel

StackPanelコントロールはシンプルなレイアウトパネルで、その中にあるコントロールを行もしくは列レイアウトで配置することができます。StackPanelは通常ページ上のUIの小さなサブセクションを調整したい場合に使用されます。

例えば、XAMLのタグを以下の様に使用してページ上に３つのボタンを縦に配置するためにStackPanelを使用することができます。 :

そうすると実行時にStackPanelは以下の様に自動的にボタンコントロールを縦で配置してくれます。 :

また代替え的にStackPanelの"Orientation"プロパティを設定して縦にする代わりに"Horizontal"（デフォルト）に設定することができます。 :

これにより、StackPanelが自動的にボタンコントロールを以下の様に横並びに配置します。 :

Grid パネル

グリッドコントロールはレイアウトパネルで一番柔軟性があり、コントロールを複数行、複数列のレイアウトに配置できます。これは概念的にHTMLのTableタグに似ています。

HTMLのTableと違い、列と行要素内にコントロールを埋め込みません。その代り、<Grid>の直下に宣言されるグリッドの行と列を<Grid.RowDefinitions> と<Grid.ColumnDefinitions> プロパティを使用して特定します。その後、コントロール上のXAMLの"添付プロパティ"シンタックスを使用してそのグリッドの中でどのグリッドの行と列が紐づけられるのかを示します。

例えば、グリッドのレイアウトに3つの行と3つの列があると宣言し、その後以下の様にXAMLを使用してその中に4つのボタンを配置します。 :

そうすると、そのグリッドのレイアウトパネルはそのボタン要素をその様に配置します。 :

絶対サイズ（例： Height="60"）のサポートに加え、そのグリッドのRowDefinitionやColumnDefinitionコントロールは、AutoSizingモード（Height="Auto"）もサポートし、それはその中に含まれているコンテンツのサイズに基づいて、自動的にグリッドもしくは行のサイズを調整します。（またオプションとして最大最小のサイズ制約値を特定することもできます。これは非常に便利です。）

グリッドのRowDefinitionおよびColumnDefinitionでは"比例サイズ"と呼ばれる機能もサポートされており、それによりグリッドの行や列のサイズがそれぞれ対して相対的にスペースを調整することができます。（例えば：2番目の行を最初の率の2倍にすることができます。）

グリッドに相当な力と柔軟性が提供されていることがお分かりになると思います。そしてそれは恐らく最終的に一番良く使うレイアウトパネルコントロールになると思います。

Diggページを調整するためにレイアウトパネルを使用

Diggサンプル構築の最終目的はページが以下のようなものになることでした。 :

このレイアウトを作成するためには、その中に2つのRowDefinitionのあるルートのグリッドパネルをまず追加します。最初の行の高さを40ピクセルにし、2つ目は残りのスペースを使用（Height="*"）します。 :

ヒント：グリッドの"ShowGridLines"プロパティを"True"に設定しているところを上記でご覧頂けると思いますが、これによりテストでの実行時にグリッドの中で簡単に行や列の境界線を見ることができるようになります。 :

その後2つ目のグリッドパネルコントロールを、ルートグリッドパネルコンテナの最初の行の中の子コントロールとして埋め込み、それを一番上の行（ヘッダ）を調整するために使用します。その中に2つの列を作成します。1つがタイトル、1つが検索用テキストボックス、1つが検索ボタンです。 :

これが終わると、Digg検索ページの基本的なレイアウト配置ができます。 :

注：グリッドをネストする代わりに、3つの列と2つの行から成る1つのグリッドを持ち、グリッドのColSpan/RowSpan機能を使用して複数の列のコンテンツをマージすることができます。（HTMLの表での方法とほぼ同じです。）私はネストされたグリッドの方法を取りましたが、それはその方が単純に手順が追えると思ったためです。

これでレイアウト設定が完了したので、あとはそれにコントロールを追加していきます。

ヘッダ行には、ビルドインの<Border>コントロール（丸縁にするためにCornerRadiusを10に設定）を使用し、タイトルを作成するためにその中に文字を追加します。検索テキストボックス用に2つ目の列にビルドインの<WatermarkedTextBox>コントロールを使用します。そして、3つ目の列に検索<Button>を置きます。その後、検索結果を表示するために使用する2行目になんらかのプレースホルダー文字を置きます。

注：以下でスタイル情報（FontSize, Colors, Marginsなど）を直接コントロール上に埋め込んでいます。このチュートリアルの後の方で、どのようにStyleを使用してこれらの設定をファイル（CSS）として解凍・カプセル化し、アプリケーション内で再利用する方法をお見せいたします。

今アプリケーションを起動すると以下のようになります。 :

動的なアプリケーションのサイズ調整

上記のXAMLでお気づきになると思いますが、最上レベルのコントロールは現在固定の幅と高さに設定されています。 :

Silverlightアプリケーションをこのように設定すると、必ず固定サイズになります。ブラウザを拡大するとよくお分かりになると思います。 :

場合によっては、HTMLページの範囲内で埋め込まれたアプリケーションを固定サイズに制約すると便利ですが、このDigg検索アプリケーションは、ブラウザに応じて自動的に配置されサイズ調整されるようにしたいと思っています。まさにHTMLページがそうであるように。

これは実は簡単に実装することができます。ただ単にWidthとHeight属性をルートコントロールから削除するだけです。 :

このSilverlightアプリケーションは、そうすると埋め込まれているHTMLコンテナいっぱいに自動的に拡張（もしくは縮小）します。これは、このSilverlightアプリケーションをテストしているSilverlightTestPage.html ファイルがHTMLの<div>要素を幅および高さ100%でCSS設定したSilverlightコントロールをホストしているので、このDiggアプリケーションはブラウザ全体に拡大されます。 :

アプリケーションのヘッダ内のコンテンツが、ブラウザの幅に応じてどのように自動的にサイズ調整し配置されているかをご確認ください。 :

ブラウザを縮小した時、グリッドコンテナの列が固定幅なので、ウォーターマークのテキストボックスと検索ボタンが同じサイズのままです。グリッドの列の幅がWidth="*"に構成されているため、ブラウザを縮小した時、"Digg検索"タイトルが含まれた<Border>コントロールは自動的にサイズ調整します。 .

このレイアウト動作を可能にするコードは1行も書く必要はありません。グリッドのコンテナとレイアウトシステムが動的に全てのサイズ調整と配置を行ってくれます。

次のステップ

これでDiggアプリケーションの基本レイアウト構造が作成され、ヘッダが定義されました。

次のステップはアプリケーションの検索動作を実装し、エンドユーザがアプリケーションをトピックで検索した時にDigg.comから実際にコンテンツを取ってくるようにします。

これは次のチュートリアルで行いましょう。 : データの取得とDataGridへの紐付けにネットワークを使用