TOC

This article is currently in the process of being translated into Japanese (~77% done).

Panels:

The Grid - Units

これまでは、ロウやカラムの全体に対する占める割合を指定する、スター幅や高さを使ってきました。しかし、他にロウやカラムの幅や高さを指定する方法が2つあります。絶対値指定と自動幅・高さです。各指定を合わせ持ったグリッドを試してみましょう。

<Window x:Class="WpfTutorialSamples.Panels.GridUnits"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="GridUnits" Height="200" Width="400">
	<Grid>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="1*" />
			<ColumnDefinition Width="Auto" />
			<ColumnDefinition Width="100" />
		</Grid.ColumnDefinitions>
		<Button>Button 1</Button>
		<Button Grid.Column="1">Button 2 with long text</Button>
		<Button Grid.Column="2">Button 3</Button>
	</Grid>
</Window>

この例では、最初のボタンはスター幅を、二番目は Auto を、最後は100ピクセル固定幅を指定しています。

結果のスクリーンショットでは、二番目のボタンは長いテキストを描画するのに必要な最小限のスペースを占めていて、三番目のボタンは宣言した通り正確に100ピクセルを占めていて、最初のボタンは可変する残りの幅を占めています。

一つか複数の可変の(スター)幅のカラム(またはロウ)を持ったグリッドでは、それらは、絶対値指定や Auto 幅・高さ指定のカラムやロウで使われていない幅や高さを自動で割り当てます。これはウィンドウをリサイズすればもっと明らかです。

最初のスクリーンショットでは、グリッドは、最初のボタンを正確に描画するためのスペースが無くなっても、最後の二つのボタンのためにスペースを取っておきます。二番目のスクリーンショットでは、最後の二つのボタンは正確に同じスペースを維持していて、余った場所を最初のボタンに残しています。

これは、さまざまなダイアログをデザインで使える大変便利なテクニックです。例えば、名前と、E メールアドレスと、コメントを持った簡単なコンタクトフォームを考えてみて下さい。最初の二つのフィールドは通常、固定の高さを持ちますが、最後のは、多くのコメントを書くためのできるだけ大きなスペースが必要です。後の章で、グリッドと異なった高さと幅のロウとカラムを使ってコンタクトフォームを作ってみます。


This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!