チュートリアル : 絶対配置に基づくレイアウトの構築
絶対配置とは、親要素を基準とした位置を指定して子要素を配置することをいいます。 たとえば、コントロールをパネル上に配置する場合は、パネルを基準としてコントロールの左端および上端の座標を指定します。 詳細については、「絶対配置と動的配置によるレイアウト」を参照してください。
WPF Designer for Visual Studio には、絶対配置をサポートする Canvas パネル コントロールが用意されています。 Canvas を使用すると、要素をアプリケーション内の絶対位置に配置できます。
重要
可能な限り動的なレイアウトを使用することをお勧めします。 動的レイアウトは、最も柔軟性が高く、ローカリゼーションなどのコンテンツの変更に適応でき、エンド ユーザーのユーザー環境に対する制御レベルも最も高くなります。 動的なレイアウトの例については、「チュートリアル : WPF デザイナーによるサイズ変更可能なアプリケーションの作成」および「チュートリアル : 動的レイアウトの構築」を参照してください。
このチュートリアルでは次のタスクを行います。
WPF アプリケーションを作成する。
アプリケーションに Canvas パネル コントロールを追加する。
パネルにコントロールを追加する。
レイアウトをテストする。
最終的なアプリケーションを次の図に示します。
.png "絶対配置に基づいたレイアウト")
注意
実際に画面に表示されるダイアログ ボックスとメニュー コマンドは、アクティブな設定またはエディションによっては、ヘルプの説明と異なる場合があります。 設定を変更するには、[ツール] メニューの [設定のインポートとエクスポート] をクリックします。 詳細については、「設定の操作」を参照してください。
必須コンポーネント
このチュートリアルを実行するには、次のコンポーネントが必要です。
- Visual Studio 2010
プロジェクトの作成
まず、アプリケーションのプロジェクトを作成します。
プロジェクトを作成するには
Visual Basic または Visual C# で AbsoluteLayout という名前の新しい WPF アプリケーション プロジェクトを作成します。 詳細については、「方法 : 新しい WPF アプリケーション プロジェクトを作成する」を参照してください。
注意
このチュートリアルではコードは作成しません。 プロジェクト用に選択した言語がアプリケーションの分離コード ページで使用される言語となります。
WPF デザイナーで MainWindow.xaml が開きます。
デザイン ビューでウィンドウを選択します。 詳細については、「方法 : デザイン画面上で要素を選択して移動する」を参照してください。
[プロパティ] ウィンドウで、Window に対して次のプロパティを設定します。
プロパティ
値
Width
400
Height
200
ヒント
サイズ変更ハンドルを使用して、デザイン ビューでウィンドウのサイズを変更することもできます。
(省略可能) ウィンドウのサイズをロックするには、次のいずれかの方法を使用します。
[ファイル] メニューの [すべてを保存] をクリックします。
パネル コントロールの追加
既定では、新しい WPF アプリケーションには Grid パネルが配置された Window が含まれています。 絶対配置に基づくレイアウトを作成するためには、Canvas パネルを使用する必要があります。 この手順では、既定の Grid を削除し、Canvas を追加します。
パネル コントロールを追加するには
デザイン ビューでグリッドを選択します。
Del キーを押して Grid を削除します。
[プロパティ] ウィンドウで、Canvas の Height プロパティを Auto に設定します。
[プロパティ] ウィンドウで、Canvas の Width プロパティを Auto に設定します。
[ファイル] メニューの [すべてを保存] をクリックします。
パネルへのコントロールの追加
次に、パネルにコントロールを追加し、Canvas の添付プロパティである Left と Top を使用してコントロールを絶対位置に配置します。
パネルにコントロールを追加するには
[プロパティ] ウィンドウで、Label に対して次のプロパティを設定します。
プロパティ
値
Content
Name:
Canvas.Left
20
Canvas.Top
20
Width
120
Height
23
[プロパティ] ウィンドウで、Label に対して次のプロパティを設定します。
プロパティ
値
Content
Password:
Canvas.Left
20
Canvas.Top
60
Width
120
Height
23
[プロパティ] ウィンドウで、TextBox に対して次のプロパティを設定します。
プロパティ
値
Canvas.Left
160
Canvas.Top
20
Width
200
Height
23
[プロパティ] ウィンドウで、TextBox に対して次のプロパティを設定します。
プロパティ
値
Canvas.Left
160
Canvas.Top
60
Width
200
Height
23
[プロパティ] ウィンドウで、Button に対して次のプロパティを設定します。
プロパティ
値
Content
OK
Canvas.Left
196
Canvas.Top
120
Width
75
Height
23
[プロパティ] ウィンドウで、Button に対して次のプロパティを設定します。
プロパティ
値
Content
Cancel
Canvas.Left
283
Canvas.Top
120
Width
75
Height
23
[ファイル] メニューの [すべてを保存] をクリックします。
レイアウトのテスト
最後に、アプリケーションを実行し、コントロールが絶対配置に従っていることを確認します。
レイアウトをテストするには
(省略可能) 前の手順でウィンドウのサイズをロックした場合、この手順を実行するためには、ロックを解除する必要があります。 [プロパティ] ウィンドウで、Window に対して次のプロパティを設定します。
プロパティ
値
MinWidth
0
MinHeight
0
MaxWidth
Infinity
MaxHeight
Infinity
ResizeMode
CanResize
[デバッグ] メニューの [デバッグ開始] をクリックします。
アプリケーションが起動し、ウィンドウが表示されます。
ウィンドウのサイズを変更します。
コントロールは絶対配置に従い、サイズや位置が変更されません。
ウィンドウを閉じます。
チュートリアルの完了
完成した MainWindow.xaml ファイルを次に示します。
<Window x:Class="MainWindow"
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://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>