VS 2005資料 【電脳梁山泊 烏賊塾】

-1-

■ 動的レイアウトの構築 ■

動的配置では、親要素を基準として配置方法と折り返し方法を指定する事に依って子要素を配置する。

亦、コンテンツが拡大された時にウィンドウやコントロールが自動的に拡張される様に設定する事も出

来る。詳細に付いては、「絶対配置と動的配置によるレイアウト」（ドキュメント内）を参照され度い。

WPF Designer for Visual Studio には、動的配置をサポートする Panelコントロールが数多く用意され

て居る。パネルコントロールを別のパネルコントロールの子コントロールとして追加する事に依り、複

数のパネルコントロールを組み合わせる事が出来る。以下のパネルコントロールを使用して、アプリケ

ーション内で要素を動的に配置する事が出来る。

・Grid

・DockPanel

・WrapPanel

・StackPanel

・UniformGrid

※ 可能な限り動的レイアウトを使用する事を推奨する。動的レイアウトは、最も柔軟性が高く、ロー

カリゼーション等のコンテンツの変更に適応出来、エンドユーザーのユーザー環境に対する制御レ

ベルも最も高く成る。絶対レイアウトの例に付いては、「チュートリアル : 絶対配置に基づくレイア

ウトの構築」を参照され度い。

此のチュートリアルでは次のタスクを行う。

・WPFアプリケーションを作成する。

・既定の Gridパネルコントロールを構成する。

・パネルにコントロールを追加する。

・レイアウトをテストする。

最終的なアプリケーションを次の図に示す。

WWPPFF チチュューートトリリアアルル

VS 2005資料 【電脳梁山泊 烏賊塾】

-2-

■ プロジェクトの作成

先ず、アプリケーションのプロジェクトを作成する。

プロジェクトを作成するには

１．Visual Basic又は Visual C#で DynamicLayoutと謂う名前の新しいWPF アプリケーションプロ

ジェクトを作成する。

※ 此のチュートリアルではコードは作成しない。プロジェクト用に選択した言語がアプリケーシ

ョンの分離コードページで使用される言語と成る。

WPF DesignerでMainWindow.xaml が開く。

２．デザインビューでウィンドウを選択する。詳細に付いては、「方法 : デザイン画面上で要素を選択

して移動する」を参照され度い。

３．[プロパティ] ウィンドウで、Windowに対して次のプロパティを設定する。

プロパティ 値

Width 400

Height 200

SizeToContent WidthAndHeight

４．[ファイル] メニューの [総てを保存] をクリックする。

■ 既定のグリッドパネルコントロールの構成

既定では、新しい WPF アプリケーションには Grid パネルが配置された Window が含まれて居る。此

の手順では、グリッドに 4 つの行と列を追加する。各列の幅を * に設定する事に依り、与えられた幅

を 4つの列として均等に分割する。3 つの行に付いては、コンテンツに合わせてサイズが調整される様

に、高さを Autoに設定する。1つの行では、残ったスペースを使用する様に高さを * に設定する。

パネルコントロールを追加するには

１．デザインビューでグリッドを選択する。

２．(省略可能) [プロパティ] ウィンドウで ShowGridLinesプロパティを見付け、其のチェックボック

スをオンにする。

アプリケーションを実行すると、ウィンドウにグリッド線が表示される。グリッド線はデバッグに

は役立つが、実行コードでは ShowGridLinesプロパティのチェックボックスをオフにする。

３．[プロパティ] ウィンドウで ColumnDefinitions プロパティを見付け、プロパティの値列の省略記

号ボタンをクリックする。

[コレクションエディター] ダイアログボックスが表示される。

VS 2005資料 【電脳梁山泊 烏賊塾】

-3-

① [追加] を 4回クリックして、4つの列を追加する。

② 最初の行のWidthプロパティを Autoに設定する。

③ 2 つ目の行のWidthプロパティを * に設定する。

④ 3 つ目の行のWidthプロパティを Autoに設定する。

⑤ 4 つ目の行のWidthプロパティを Autoに設定する。

⑥ [OK] をクリックして [コレクションエディター] を閉じ、WPF Designerに戻る。

グリッドには 4つの列が有るが、現在は 1つしか表示されて居ない。Widthプロパティを Auto

に設定した列は、コンテンツが含まれて居ない為、一時的に非表示と成って居る。此のチュー

トリアルでは、此の儘で問題無い。此れ以降、此の様な動作を回避するには、作業中はアスタ

リスク（ * ）に依るサイズ変更を使用し、作業の終了時に Autoに変更する。

４．[プロパティ] ウィンドウで RowDefinitions プロパティを見付け、プロパティの値列の省略記号ボ

タンをクリックする。

[コレクションエディター] ダイアログボックスが表示される。

① [追加] を 4回クリックして、4つの行を追加する。

② 最初の行のHeightプロパティを Autoに設定する。

③ 2 つ目の行のHeightプロパティを Autoに設定する。

④ 3 つ目の行のHeightプロパティを * に設定する。

⑤ 4 つ目の行のHeightプロパティを Autoに設定する。

⑥ [OK] をクリックして [コレクションエディター] を閉じ、WPF Designerに戻る。

グリッドには 4つの行が有るが、現在は 1つしか表示されて居ない。Heightプロパティを Auto

に設定した行は、コンテンツが含まれて居ない為、一時的に非表示と成って居る。此のチュー

トリアルでは、此の儘で問題無い。此れ以降、此の様な動作を回避するには、作業中はアスタ

リスク（ * ）に依るサイズ変更を使用し、作業の終了時に Autoに変更する。

５．[ファイル] メニューの [総てを保存] をクリックする。

■ パネルへのコントロールの追加

次に、パネルにコントロールを追加し、Gridの添付プロパティで有る Columnと Rowを使用してコン

トロールを動的に配置する。

VS 2005資料 【電脳梁山泊 烏賊塾】

-4-

パネルにコントロールを追加するには

１．[ツールボックス] の [共通] グループから Labelコントロールを Gridにドラッグする。

２．[プロパティ] ウィンドウで、Labelに対して次のプロパティを設定する。

プロパティ 値

Content 名前:

Grid.Column 0

Grid.ColumnSpan 1

Grid.Row 0

Grid.RowSpan 1

Width auto

Height 23

HorizontalAlignment Stretch

VerticalAlignment Top

Margin 20,20,10,10

３．[ツールボックス] の [共通] グループから Labelコントロールを Gridにドラッグする。

４．[プロパティ] ウィンドウで、Labelに対して次のプロパティを設定する。

プロパティ 値

Content Password:

Grid.Column 0

Grid.ColumnSpan 1

Grid.Row 1

Grid.RowSpan 1

Width auto

Height 23

HorizontalAlignment Stretch

VerticalAlignment Top

Margin 20,10,10,10

５．[ツールボックス] の [共通] グループから TextBoxコントロールを Gridにドラッグする。

６．[プロパティ] ウィンドウで、TextBoxに対して次のプロパティを設定する。

プロパティ 値

Grid.Column 1

Grid.ColumnSpan 3

Grid.Row 0

Grid.RowSpan 1

Width auto

Height auto

HorizontalAlignment Stretch

VerticalAlignment Stretch

Margin 10,20,20,10

VS 2005資料 【電脳梁山泊 烏賊塾】

-5-

７．[ツールボックス] の [共通] グループから TextBoxコントロールを Gridにドラッグする。

８．[プロパティ] ウィンドウで、TextBoxに対して次のプロパティを設定する。

プロパティ 値

Grid.Column 1

Grid.ColumnSpan 3

Grid.Row 1

Grid.RowSpan 1

Width auto

Height auto

HorizontalAlignment Stretch

VerticalAlignment Stretch

Margin 10,10,20,10

９．[ツールボックス] の [共通] グループから Buttonコントロールを Gridにドラッグする。

Ａ．[プロパティ] ウィンドウで、Buttonに対して次のプロパティを設定する。

プロパティ 値

Content [OK]

Grid.Column 2

Grid.ColumnSpan 1

Grid.Row 3

Grid.RowSpan 1

Width 75

Height 23

HorizontalAlignment Stretch

VerticalAlignment Stretch

Margin 10,10,6,20

Ｂ．[ツールボックス] の [共通] グループから Buttonコントロールを Gridにドラッグする。

Ｃ．[プロパティ] ウィンドウで、Buttonに対して次のプロパティを設定する。

プロパティ 値

Content [キャンセル]

Grid.Column 3

Grid.ColumnSpan 1

Grid.Row 3

Grid.RowSpan 1

Width 75

Height 23

HorizontalAlignment Stretch

VerticalAlignment Stretch

Margin 6,10,20,20

Ｄ．[ファイル] メニューの [総てを保存] をクリックする。

VS 2005資料 【電脳梁山泊 烏賊塾】

-6-

■ レイアウトのテスト

最後に、アプリケーションを実行し、ユーザーがウィンドウのサイズを変更した場合やコントロールの

コンテンツが拡大して入りきらなくなった場合にレイアウトが動的に変更される事を確認する。

レイアウトをテストするには

１．[デバッグ] メニューの [デバッグ開始] をクリックする。

アプリケーションが起動し、ウィンドウが表示される。

２．[名前] ボックスが一杯に成る迄、任意の文字を入力する。テキストボックスの右端に達すると、テ

キストのサイズに合わせてテキストボックスとウィンドウが拡張される。

３．ウィンドウを閉じる。

４．[デバッグ] メニューの [デバッグ開始] をクリックする。

アプリケーションが起動し、ウィンドウが表示される。

５．ウィンドウのサイズを垂直方向と水平方向に変更する。

拡大した領域を使用して各列が均等に拡張される。拡張された列のサイズに合わせてテキストボッ

クスが引き延ばされる。3 つの行の高さは変わらず、4 つ目の行丈が全体的な領域の拡大に合わせ

て拡張される。

６．ウィンドウを閉じる。

７．デザインビューで Nameラベルを選択する。

８．[プロパティ] ウィンドウで、Contentプロパティを「此処に氏名を入力して下さい」に変更する。

デザインビューで、テキストの長さに合わせてNameラベルが拡張される。

９．[デバッグ] メニューの [デバッグ開始] をクリックする。

アプリケーションが起動し、ウィンドウが表示される。ラベルコントロールに長いテキストが表示

される。

Ａ．ウィンドウを閉じる。

VS 2005資料 【電脳梁山泊 烏賊塾】

-7-

■ チュートリアルの完了

完成した MainWindow.xamlファイルを次に示す。

XAML

<Window x:Class="MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="MainWindow" Height="200" Width="400" SizeToContent="WidthAndHeight">

<Grid ShowGridLines="True">

<Grid.RowDefinitions>

<RowDefinition Height="Auto" />

<RowDefinition Height="Auto" />

<RowDefinition Height="*" />

<RowDefinition Height="Auto" />

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto" />

<ColumnDefinition Width="*" />

<ColumnDefinition Width="Auto" />

<ColumnDefinition Width="Auto" />

</Grid.ColumnDefinitions>

<Label Grid.Column="0" Grid.Row="0" Margin="20,20,10,10" Width="Auto" Height="23"

HorizontalAlignment="Stretch" VerticalAlignment="Top" Name="Label1">Name:

</Label>

<Label Grid.Column="0" Grid.Row="1" Margin="20,10,10,10" Width="Auto" Height="23"

HorizontalAlignment="Stretch" VerticalAlignment="Top" Name="Label2">Password:

</Label>

<TextBox Grid.Column="1" Grid.Row="0" Margin="10,20,20,10" Grid.ColumnSpan="3"

Height="Auto" VerticalAlignment="Stretch" Name="TextBox1" />

<TextBox Grid.Column="1" Grid.Row="1" Margin="10,10,20,10" Grid.ColumnSpan="3"

Name="TextBox2" />

<Button Grid.Column="2" Grid.Row="3" Margin="10,10,6,20" Width="75" Height="23"

HorizontalAlignment="Stretch" Name="Button1">OK</Button>

<Button Grid.Column="3" Grid.Row="3" Margin="6,10,20,20" Width="75" Height="23"

Name="Button2">Cancel</Button>

</Grid>

</Window>

http://msdn.microsoft.com/ja-jp/library/bb514519(v=vs.110).aspx

http://msdn.microsoft.com/ja-jp/library/ee649089(v=vs.110).aspx

VS 2005資料 【電脳梁山泊 烏賊塾】

-8-

■ 絶対配置と動的配置によるレイアウト ■

アプリケーションのウィンドウを作成する時には、ウィンドウ上でのコントロールのレイアウト方法を

決定する必要が有る。亦、ユーザーがウィンドウのサイズを変更した時にウィンドウ内のコントロール

が何の様に動作するかに付いても決定する必要が有る。此等は、絶対配置と動的配置に関する問題で有

る。

アプリケーションのウィンドウを作成する時には、ウィンドウのサイズとウィンドウ内のコントロール

のサイズを設定する。コンテンツの変化に応じたウィンドウとコントロールの動作方法を決定する必要

が有る。例えば、ウィンドウにラベルコントロールを追加する時には、ラベルのテキストが別の言語に

翻訳された場合にラベルが何の様に動作するかを指定出来る。此等は動的なサイズ変更に関する問題で

有る。

■ レイアウトの種類

WPF Designer for Visual Studio では、次の 3種類のレイアウトを作成出来る。

絶対レイアウト

子要素を配置するには、親要素を基準とする正確な位置を指定する。例えば、コントロールをパネ

ル上に配置する場合は、パネルを基準としてコントロールの左端と上端の座標を指定する。親要素

のサイズが変更されても子要素の位置は変わらない。詳細に付いては、「方法 : 絶対配置に基づく

レイアウトを構築する」または「チュートリアル : 絶対配置に基づくレイアウトの構築」を参照さ

れ度い。

動的

子要素を配置する時には、親要素を基準として配置方法と折り返し方法を指定する。例えば、コン

トロールをパネル上に配置し、水平方向に折り返す様に指定する事も出来る。親要素が縮小される

と、子要素は次の行に移動する。親要素が拡大されると、子要素は前の行に移動する。詳細に付い

ては、「方法 : 動的レイアウトを構築する」又は「チュートリアル : 動的レイアウトの構築」を参

照され度い。

データドリブン動的

コントロールをデータにバインドする。データが総て収まる様にコントロールのサイズが調整され、

データの形式に合わせて行と列のスタイルが設定される。

可能な限り動的レイアウトを使用する事を推奨する。動的レイアウトは、最も柔軟性が高く、エンドユ

ーザーも自らの環境を最も高いレベルで制御出来る。動的レイアウトでは、コンテンツがローカリゼー

ション等の変更に適応出来る。絶対レイアウトは、要素を正確な位置に配置し、其の位置が変化しない

事が必要な場合や、子要素がイメージやグラフィック等で、1つしかない場合而巳使用す可きで有る。

※ 絶対レイアウトと動的レイアウトを組み合わせる事が出来る。例えば、ウィンドウ全体を動的レイ

アウトとし、部分的に絶対配置を使用する事も出来る。

VS 2005資料 【電脳梁山泊 烏賊塾】

-9-

※ UseLayoutRoundingプロパティを設定して、Measure 及び Arrangeに依って渡される時に計算さ

れる整数以外のピクセル値が何時整数のピクセル値に丸められるかを指定する。此のプロパティは、

子コントロールに依って継承される。

パネル

WPF には、絶対配置と動的配置をサポートする Panel コントロールが数多く用意されて居る。パネル

コントロールを別のパネルコントロールの子コントロールとして追加する事に依り、複数のパネルコン

トロールを組み合わせる事が出来る。以下のパネルコントロールを使用して、アプリケーション内に要

素を配置する事が出来る。

Panel レイアウトの種類 説明

Grid 動的 子要素を列と行に配置できる領域を定義する。

DockPanel 動的 子要素を上端、下端、左端、又は、右端にドッキングし、垂

直方向に並べて配置出来る領域を定義する。

WrapPanel 動的 子要素を順に自動配置し、コンテンツを親コンテナーの端で

改行して次の行に送る。子要素の配列順は、向きが水平方向

と垂直方向の孰れに設定されて居るかに依って、上から下と

左から右の孰れかと成る。

StackPanel 動的 子要素を自動的に水平方向、又は、垂直方向の 1 つの行に配

置する。

UniformGrid 動的 子要素を自動的に行と列に配置する。行と列は等間隔に配置

される。セルに入り切らない要素は切り詰められる。

Canvas 絶対レイアウト 座標を使用して子要素を明示的に配置出来る領域を定義す

る。

コントロール

WPF には、データドリブン動的配置をサポートするコントロールが用意されて居る。其等のコントロ

ールはデータにバインド出来、データに合わせて自動的にサイズが調整される。以下のコントロールを

使用して、アプリケーションにデータを動的に表示出来る。

Control レイアウトの種類 説明

ListView データドリブン動的 データ項目の一覧を表示する。

GridView データドリブン動的 データ項目をリストビューコントロールの列に表示する。

■ 動的なサイズ変更

動的なサイズ変更を適用したコントロールは、コンテンツに合わせて自動的に伸縮する。例えば、或る

言語のテキストに合わせてラベルコントロールのサイズを設定し、其のテキストが別の言語に翻訳され

る場合は、翻訳されたテキストに合わせて自動的にサイズが変更される様にラベルを設定出来る。動的

配置は、コントロールのサイズが変化した時に自動的に位置を調整する事に依り、動的なサイズ変更に

対応する。

動的レイアウトの作成に役立つプロパティを次に示す。

VS 2005資料 【電脳梁山泊 烏賊塾】

-10-

プロパティ VALUES 対象 説明

Width double、Auto、* ウィンドウ、コント

ロール、グリッド列

柔軟性を最大限に高めるには、Auto

とスター (アスタリスク) に依るサ

イズ変更を使用する。詳細に付いて

は、次のセクションを参照され度い。

* はグリッド列に而巳適用される。

Height double、Auto、* ウィンドウ、コント

ロール、グリッド行

柔軟性を最大限に高めるには、Auto

とスター (アスタリスク) に依るサ

イズ変更を使用する。詳細に付いて

は、次のセクションを参照され度い。

* はグリッド列に而巳適用される。

MinWidth double ウィンドウ、コント

ロール、グリッド列

柔軟性を最大限に高めるには、0に設

定する。

MinHeight double ウィンドウ、コント

ロール、グリッド行

柔軟性を最大限に高めるには、0に設

定する。

MaxWidth double、Infinity ウィンドウ、コント

ロール、グリッド列

柔軟性を最大限に高めるには、

Infinityに設定する。

MaxHeight double、Infinity ウィンドウ、コント

ロール、グリッド行

柔軟性を最大限に高めるには、

Infinityに設定する。

ResizeMode

NoResize

CanMinimize

CanResize

CanResizeWithGrip

Windows

柔軟性を最大限に高めるには、

CanResizeに設定する。此れに依り、

ユーザーがウィンドウのサイズを変

更出来る。

SizeToContent

Manual

Width

Height

WidthAndHeight

Windows

柔軟性を最大限に高めるには、

WidthAndHeight に設定する。此れ

に依り、コンテンツが拡大された時

にウィンドウのサイズが自動的に調

整される。

■ 自動サイズ変更とスター（アスタリスク）に依るサイズ変更

自動サイズ変更では、コンテンツのサイズが変わっても、コンテンツ全体が表示される様にコントロー

ルのサイズが調整される。スター（アスタリスク）に依るサイズ変更では、使用可能なスペースをグリ

ッドの行と列の間で加重比率に基づいて配分出来る。XAML（Extensible Application Markup

Language）では、スター値は * （又は n* ）と表現される。例えば、4列のグリッドでは、列の幅を

次の様に設定出来る。

列 1 Auto コンテンツに合わせて列のサイズが調整される。

列 2 * Autoに設定された列が計算され、残った幅が列 2に割り当てられる。列 2の幅は列 4

の半分に成る。

列 3 Auto コンテンツに合わせて列のサイズが調整される。

列 4 2* Autoに設定された列が計算され、残った幅が列 2に割り当てられる。列 4の幅は列 2

の 2倍に成る。

詳細に付いては、「Star」を参照され度い。

VS 2005資料 【電脳梁山泊 烏賊塾】

-11-

Window.SizeToContentプロパティ （WPF）

ウィンドウのサイズがコンテンツのサイズに合わせて自動的に調整されるか何うかを示す値を取得・設

定する。

SizeToContent列挙体

メンバー名 説明

Manual ウィンドウのサイズがコンテンツのサイズに合わせて自動的に設定されない様

に指定する（既定値）。

代わりに、ウィンドウのサイズは、Width、Height、MaxWidth、MaxHeight、

MinWidth、MinHeight等のプロパティに依り決定される。

Width ウィンドウの幅がコンテンツの幅に合わせて自動的に設定される様に指定する

（但し、高さは設定されない）。

Height ウィンドウの高さがコンテンツの高さに合わせて自動的に設定される様に指定

する（但し、幅は設定されない）。

WidthAndHeight ウィンドウの幅と高さがコンテンツの幅と高さに合わせて自動的に設定される

様に指定する。

FrameworkElement.HorizontalAlignment プロパティ （WPF）

此の要素が親要素（パネルコントロールや項目コントロール等）の一部と成る場合に適用される水平方

向の配置の特性を取得・設定する。

HorizontalAlignment列挙体

メンバー名 説明

Left 親要素のレイアウトスロットの左側に配置される様に指定する。

Center 親要素のレイアウトスロットの中央に配置される様に指定する。

Right 親要素のレイアウトスロットの右側に配置される様に指定する。

Stretch 親要素のレイアウトスロット全体に引き伸ばして配置される様に指定する。

要素の HeightプロパティとWidthプロパティを明示的に設定すると、レイアウト時に此等の測定値が

優先されて、HorizontalAlignmentを Stretchに設定した場合の通常の効果が取り消される。

HorizontalAlignmentは、実際の依存関係プロパティのMicrosoft.NETプロパティアクセサーで有る。

此の特定の依存関係プロパティの見掛け上の既定値が、サブクラス化された要素（特に、コントロール）

内で異なる値に設定される事が良く有る。此れは、一般に、依存関係プロパティが特定のサブクラスに

再登録されて居るが、既定値を設定する為の異なるメタデータを持つ場合、又は、此の依存関係プロパ

ティ値を異なる値に設定する既定のスタイルが適用されて居る場合に発生する。例えば、Label は

FrameworkElement から直接 HorizontalAlignment を継承するが、Label コントロールの

HorizontalAlignment の見掛け上の既定値は Left で有る。此れは、スタイルのコントロールテンプレ

ート内で、此の値が Labelの既定のスタイルの範囲にリセットされた為で有る。

Canvas は絶対配置に基づいて居る。其の為、Canvas は、レイアウトを構成する際に

HorizontalAlignmentを使用しない。

Labelは、Labelや其の派生クラスに依って継承されると、此の依存関係プロパティの既定値を Leftに

再定義する。

VS 2005資料 【電脳梁山泊 烏賊塾】

-12-

FrameworkElement.VerticalAlignmentプロパティ （WPF）

此の要素が親要素（パネルコントロールや項目コントロール等）の一部と成る場合に適用される垂直方

向の配置の特性を取得・設定する。

VerticalAlignment列挙体

メンバー名 説明

Top 子要素を、親のレイアウトスロットの上端に揃えて配置する様に指定する。

Center 子要素を、親のレイアウトスロットの中央に揃えて配置する様に指定する。

Bottom 子要素を、親のレイアウトスロットの下端に揃えて配置する様に指定する。

Stretch 子要素を、親のレイアウトスロット全体に引き伸ばす様に指定する。

要素の HeightプロパティとWidthプロパティを明示的に設定すると、レイアウト時に此等の測定値が

優先されて、此のプロパティを Stretchに設定した場合の通常の効果が取り消される。

VerticalAlignmentは、実際の依存関係プロパティのMicrosoft.NETプロパティアクセサーで有る。此

の特定の依存関係プロパティの見掛け上の既定値が、派生した要素クラス（特に、コントロール）内で

異なる値に設定される事が良く有る。此れは、一般に、依存関係プロパティが特定の派生クラスに再登

録されて居るが、既定値を設定する為の異なるメタデータを持つ場合、又は、此の依存関係プロパティ

値を異なる値に設定する既定のスタイルが適用されて居る場合に発生する。例えば、ComboBoxItemは

FrameworkElement から直接 VerticalAlignment を継承するが、ComboBoxItem コントロールの

VerticalAlignment の見掛け上の既定値は Center で有る。此れは、スタイルのコントロールテンプレ

ート内で、此の値が ComboBoxItemの既定のスタイルの範囲にリセットされた為で有る。

Canvas は絶対配置に基づいて居る。其の為、Canvasは、レイアウトを構成する際に VerticalAlignment

を使用しない。

ComboBoxItem は、ComboBoxItem や其の派生クラスに依って継承されると、此のプロパティの既定

値を Centerに再定義する。

FrameworkElement.Marginプロパティ （WPF）

要素の外側の余白を取得・設定する。

此の余白は、此の要素と、レイアウトでユーザーインターフェイス（UI）が作成される時に隣接する他

の要素との間の領域で有る。共有要素はピア要素（共通の親コントロールのコレクションに含まれる他

の要素等）の場合も有れば、此の要素の親の場合も有る。

Margin は、余白を非対称に設定出来る様に、数値ではなく Thickness 構造体として設定される。

Thickness 構造体自体が文字列の型変換をサポートして居る為、XAML 属性構文でも非対称の Margin

を指定出来る。

ゼロ以外の余白は、要素レイアウトの ActualWidth と ActualHeightの外側の領域に適用される。

余白はレイアウトの兄弟要素の間で加算される。例えば、隣接する 2つの要素の隣接部の余白が孰れも

30に設定されて居た場合、其の要素間の領域は 60単位に成る。

通常、余白が設定されて居る要素では、割り当てられた四角形の領域が其の要素（余白+コンテンツ）

に対して小さ過ぎる場合でも、指定されて居るMarginのサイズは制限されない。代わりに要素のコン

テンツの領域が、レイアウトの計算時に制限される。コンテンツの制限が 0に達しない限り、余白が制

限される事は無い。

VS 2005資料 【電脳梁山泊 烏賊塾】

-13-

FrameworkElement.Width（Height）プロパティ （WPF）

要素の幅（高さ）の値（Doubleの値）を取得・設定する。

Double 0.0以上の Double型の値の文字列表現。

此の値は、device-independent unit (1/96th inch) 単位として解釈される。

文字列には、小数点を明示的に含める必要は無い（1.0は 1と表記しても良い）。

qualifiedDouble 上記の double 型の値に、単位宣言文字列 px、in、cm、pt の孰れかを後に続け

た物。

px（既定値）は device-independent units (1/96th inch per unit) で有る。

inはインチで有る（1in=96px）。

cmはセンチメートルで有る（1 cm=(96/2.54) px）。

ptはポイントで有る（1pt=(96/72) px）。

Auto 自動サイズ変更を有効にする。

此のプロパティは、幅情報（高さ情報）を指定する FrameworkElementの 3つの書き込み可能なプロ

パティの内の 1つで有る。他の 2つは、MinWidthとMaxWidth（MinHeightとMaxHeight）で有る。

此等の値の間に競合が発生した場合は、先ずMinWidth（MinHeight）、次にMaxWidth（MaxHeight）

を適用し、此の 2つが範囲内に有る時は、最後にWidth（Height）を適用して実際の幅を決定する。

此のプロパティの戻り値は、常に設定値と同じで有る。此れに対し、ActualWidth（ActualHeight）の

値は異なる場合が有る。先ず、何等かの理由で推奨サイズがレイアウトに依って拒否される場合が有る。

亦、レイアウトシステム其の物が、プロパティシステムに依るWidth（Height）の設定に対して非同期

で動作する為、特定のサイズ設定プロパティの変更が未だ処理されて居ない場合も有る。

Height プロパティは、此の要素が他の要素内の子要素で有る場合は、値を設定しても、実際には推奨

値にしか成らない。其の値は、レイアウトシステムや親要素の特定のレイアウトロジックに依って、強

制力の無い入力としてレイアウトプロセスで使用される。実際問題として、FrameworkElement は殆

ど常に他の要素の子要素に成って居る。此れは、Window で Height を設定する場合でも同じで有る

（Window 場合、其の値は、基に成るアプリケーションモデルで、アプリケーションをホストする Hwnd

を作成する基本的な描画の前提が確立される時に使用される）。

Double 型の値を受け入れる事が出来る丈で無く、此のプロパティは Double.NaN にする事も出来る。

コードで自動サイズ変更動作を指定する場合に此の値を使用する。XAMLでは、値を文字列 "Auto"（大

文字/小文字の区別無し）に設定して自動サイズ変更動作を有効にする。自動サイズ変更動作では、要素

の幅（高さ）は、利用可能な最大の幅（高さ）に成る。但し、特定のコントロールで既定のテーマスタ

イルに依って既定値が指定される場合も多く、其の場合は自動サイズ変更動作は（改めて有効にしない

限り）無効に成る。

Double 型の値に対する値の制約は、ValidateValueCallback 機構に依って適用される。無効な値を設

定しようとすると、実行時例外がスローされる。

検証チェックに加えて、レイアウトシステムに依って適用されるWidth（Height）には非決定性の上限

値が有る（此れは、Single.MaxValue より大きいが Double.MaxValue より小さい、非常に大きな値で

有る）。此の上限値を超えると、要素は描画されず、例外もスローされない。表示可能な最大サイズを

大きく超える値をWidth（Height）に設定しては成らない。此の非決定性の上限値を超える可能性が有

る。

VS 2005資料 【電脳梁山泊 烏賊塾】

-14-

ColumnDefinition.Width プロパティ、RowDefinition.Heightプロパティ （WPF）

ColumnDefinition.Width プロパティは、ColumnDefinition 要素の計算された幅を取得するか、

ColumnDefinitionで定義されて居る列の GridLength値を設定する。

RowDefinition.Heightプロパティは、RowDefinition要素の計算された高さ取得するか、RowDefinition

で定義されて居る行の GridLength値を設定する。

doubleLength device-independent units (1/96th inch per unit) の測定値を指定する Double

値、又は、qualifiedDoubleとして示される要素の長さ。

qualifiedDouble 上記の double 型の値に、単位宣言文字列 px、in、cm、ptの孰れかを後に続け

た物。

px（既定値）は device-independent units (1/96th inch per unit) で有る。

inはインチで有る（1in=96px）。

cmはセンチメートルで有る（1 cm=(96/2.54) px）。

ptはポイントで有る（1pt=(96/72) px）。

autoValue 値 Auto又は * で示される要素の長さ（GridUnitType参照）。

GridUnitType列挙体

メンバー名 説明

Auto サイズは、コンテンツオブジェクトのサイズプロパティに依り決まる。

Pixel 値は、ピクセルで表される。

Star 値は、使用可能なスペースの加重比率で表される。

GridUnitTypeの既定値は Starで有る。

行や列を追加または削除する場合、Measure が呼び出される迄、総ての ColumnDefinition 要素の

ActualWidthや総ての RowDefinition要素の ActualHeightは 0に成る。

Grid.Column添付プロパティ （WPF）

Grid内の列のインデックス値（左端を 0とする Int32の値）を取得・設定する。

Grid内の列は、ColumnDefinition 要素を使用して定義される。

Grid.Row添付プロパティ （WPF）

Grid内の行のインデックス値（上端を 0とする Int32の値）を取得・設定する。

Grid内の列は、RowDefinition要素を使用して定義される。

VS 2005資料 【電脳梁山泊 烏賊塾】

-15-

■ 絶対配置に基づくレイアウトの構築 ■

絶対配置とは、親要素を基準とした位置を指定して子要素を配置する事を謂う。例えば、コントロール

をパネル上に配置する場合は、パネルを基準としてコントロールの左端と上端の座標を指定する。詳細

に付いては、「絶対配置と動的配置によるレイアウト」を参照され度い。

WPF Designer for Visual Studio には、絶対配置をサポートする Canvasパネルコントロールが用意さ

れて居る。Canvasを使用すると、要素をアプリケーション内の絶対位置に配置できます。

※ 可能な限り動的レイアウトを使用する事を推奨する。動的レイアウトは、最も柔軟性が高く、ロー

カリゼーション等のコンテンツの変更に適応出来、エンドユーザーのユーザー環境に対する制御レ

ベルも最も高く成る。動的なレイアウトの例に付いては、「チュートリアル : WPF デザイナーに依

るサイズ変更可能なアプリケーションの作成」及び「チュートリアル : 動的レイアウトの構築」を

参照され度い。

此のチュートリアルでは次のタスクを行う。

・ WPFアプリケーションを作成する。

・アプリケーションに Canvasパネルコントロールを追加する。

・パネルにコントロールを追加する。

・レイアウトをテストする。

最終的なアプリケーションを次の図に示す。

※ 実際に画面に表示されるダイアログボックスとメニューコマンドは、アクティブな設定やエディシ

ョンに依っては、ヘルプの説明と異なる場合が有る。設定を変更するには、[ツール] メニューの [設

定のインポートとエクスポート] をクリックする。詳細に付いては、「Visual Studioの設定」を参照

され度い。

■ プロジェクトの作成

先ず、アプリケーションのプロジェクトを作成する。

プロジェクトを作成するには

１．Visual Basic又は Visual C#で AbsoluteLayoutと謂う名前の新しいWPFアプリケーションプロジ

ェクトを作成する。

VS 2005資料 【電脳梁山泊 烏賊塾】

-16-

※ 此のチュートリアルではコードは作成しない。プロジェクト用に選択した言語がアプリケーシ

ョンの分離コード ページで使用される言語と成る。

WPF DesignerでMainWindow.xaml が開く。

２．デザインビューでウィンドウを選択する。詳細に付いては、「方法 : デザイン画面上で要素を選択

して移動する」を参照され度い。

３．[プロパティ] ウィンドウで、Windowに対して次のプロパティを設定する。

プロパティ 値

Width 400

Height 200

サイズ変更ハンドルを使用して、デザインビューでウィンドウのサイズを変更する事も出来る。

４．(省略可能) ウィンドウのサイズをロックするには、次の孰れかの方法を使用する。

[プロパティ] ウィンドウで、Windowに対して次のプロパティを設定する。

プロパティ 値

ResizeMode NoResize

[プロパティ] ウィンドウで、Windowに対して次のプロパティを設定する。

プロパティ 値

MinWidth 400

MinHeight 200

MaxWidth 400

MaxHeight 200

５．[ファイル] メニューの [総てを保存] をクリックする。

■ パネルコントロールの追加

既定では、新しい WPF アプリケーションには Grid パネルが配置された Window が含まれて居る。絶

対配置に基づくレイアウトを作成する為には、Canvas パネルを使用する必要が有る。此の手順では、

既定の Gridを削除し、Canvasを追加する。

パネルコントロールを追加するには

１．デザインビューでグリッドを選択する。

２．Delキーを押して Grid を削除する。

３．[ツールボックス] の [コントロール] グループから CanvasコントロールをWindowにドラッグす

る。

VS 2005資料 【電脳梁山泊 烏賊塾】

-17-

４．[プロパティ] ウィンドウで、Canvasの Heightプロパティを Autoに設定する。

Canvas がWindowの高さに合わせて引き伸ばされる。

５．[プロパティ] ウィンドウで、CanvasのWidthプロパティを Autoに設定する。

Canvas がWindowの幅に合わせて引き伸ばされる。

６．[ファイル] メニューの [総てを保存] をクリックする。

■ パネルへのコントロールの追加

次に、パネルにコントロールを追加し、Canvasの添付プロパティで有る Leftと Topを使用してコント

ロールを絶対位置に配置する。

パネルにコントロールを追加するには

１．[ツールボックス] の [共通] グループから Labelコントロールを Canvasにドラッグする。

２．[プロパティ] ウィンドウで、Labelに対して次のプロパティを設定する。

プロパティ 値

Content 名前:

Canvas.Left 20

Canvas.Top 20

Width 120

Height 23

３．[ツールボックス] の [共通] グループから Labelコントロールを Canvasにドラッグする。

４．[プロパティ] ウィンドウで、Labelに対して次のプロパティを設定する。

プロパティ 値

Content Password:

Canvas.Left 20

Canvas.Top 60

Width 120

Height 23

５．[ツールボックス] の [共通] グループから TextBoxコントロールを Canvas にドラッグする。

６．[プロパティ] ウィンドウで、TextBoxに対して次のプロパティを設定する。

プロパティ 値

Canvas.Left 160

Canvas.Top 20

Width 200

Height 23

VS 2005資料 【電脳梁山泊 烏賊塾】

-18-

７．[ツールボックス] の [共通] グループから TextBoxコントロールを Canvas にドラッグする。

８．[プロパティ] ウィンドウで、TextBoxに対して次のプロパティを設定する。

プロパティ 値

Canvas.Left 160

Canvas.Top 60

Width 200

Height 23

９．[ツールボックス] の [共通] グループから Buttonコントロールを Canvas にドラッグする。

Ａ．[プロパティ] ウィンドウで、Buttonに対して次のプロパティを設定する。

プロパティ 値

Content [OK]

Canvas.Left 196

Canvas.Top 120

Width 75

Height 23

Ｂ．[ツールボックス] の [共通] グループから Buttonコントロールを Canvas にドラッグする。

Ｃ．[プロパティ] ウィンドウで、Buttonに対して次のプロパティを設定する。

プロパティ 値

Content [キャンセル]

Canvas.Left 283

Canvas.Top 120

Width 75

Height 23

Ｄ．[ファイル] メニューの [総てを保存] をクリックする。

■ レイアウトのテスト

最後に、アプリケーションを実行し、コントロールが絶対配置に従って居る事を確認する。

レイアウトをテストするには

１．(省略可能) 前の手順でウィンドウのサイズをロックした場合、此の手順を実行する為には、ロック

を解除する必要が有る。[プロパティ] ウィンドウで、Windowに対して次のプロパティを設定する。

プロパティ 値

MinWidth 0

MinHeight 0

MaxWidth Infinity

VS 2005資料 【電脳梁山泊 烏賊塾】

-19-

MaxHeight Infinity

ResizeMode CanResize

２．[デバッグ] メニューの [デバッグ開始] をクリックする。

アプリケーションが起動し、ウィンドウが表示される。

３．ウィンドウのサイズを変更する。

コントロールは絶対配置に従い、サイズや位置が変更されない。

４．ウィンドウを閉じる。

■ チュートリアルの完了

完成したMainWindow.xamlファイルを次に示す。

XAML

<Window x:Class="MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="MainWindow" Height="200" Width="400"

ResizeMode="CanResize" Name="MainWindow" MinWidth="0"

MinHeight="0" MaxWidth="Infinity" MaxHeight="Infinity">

<Canvas Height="Auto" Name="Canvas1" Width="Auto">

<Label Canvas.Left="20" Canvas.Top="20" Height="23"

Width="120" Name="Label1">Name:</Label>

<Label Canvas.Left="20" Canvas.Top="60" Height="23"

Width="120" Name="Label2">Password:</Label>

<TextBox Canvas.Left="160" Canvas.Top="20" Height="23" Width="200"

Name="TextBox1" />

<TextBox Canvas.Left="160" Canvas.Top="60" Height="23" Width="200"

Name="TextBox2" />

<Button Canvas.Left="196" Canvas.Top="120" Height="23"

Width="75" Name="Button1">OK</Button>

<Button Canvas.Left="283" Canvas.Top="120" Height="23"

Width="75" Name="Button2">Cancel</Button>

</Canvas>

</Window>