2013年01月18日

[C# WPF]レイアウト用のプロパティ

今回は多くのコントロールに共通するレイアウト用のプロパティについて解説します。

@Width、Height
AMargin
BHorizontalAlignment
CVerticalAlignment

ツールボックスからドラッグして配置すると上記のプロパティが自動的に設定されます。

@Width、Height
これはコントロールの幅、高さです。
double型の浮動小数点数値で指定しますが
Autoを指定すると表示内容などから自動的に割り当てられます。

AMargin
これはコントロールの周囲の余白です。
左右上下それぞれの4つの値を指定できますが、省略する事もできます。
値を4つ指定する場合は以下のように指定します。

Margin="左側の余白幅,上側の余白高さ,右側の余白幅,下側の余白高さ"

値を1つしか指定しない場合は上下左右全てに指定した値の余白が適用されます。
値を2つ指定した場合は1番目の値が左右の余白幅、2番目の値が上下の余白高さとなります。
値を3つだけ指定する事はできません。

BHorizontalAlignment
水平方向の配置方法を指定します。
以下の値を設定できます。
Leftコントロールを領域の左端を基準に配置します。
これを指定した場合Marginの右側の値を指定しても無視されます。
Rightコントロールを領域の右端を基準に配置します。
これを指定した場合Marginの左側の値を指定しても無視されます。
Centerコントロールを領域の中央に配置します。
これを指定した場合Marginの左右の値は無視されます。
Stretch配置されている領域の水平方向を埋めるように配置します。
Widthプロパティに値を設定しているとLeftを指定したのと同じ状態になります。
領域を埋めるように配置するためにはWidthプロパティにAutoを設定します。

CVerticalAlignment
垂直方向の配置方法を指定します。
以下の値を設定できます。
Topコントロールを領域の上端を基準に配置します。
これを指定した場合Marginの下側の値を指定しても無視されます。
Bottomコントロールを領域の下端を基準に配置します。
これを指定した場合Marginの上側の値を指定しても無視されます。
Centerコントロールを領域の中央に配置します。
これを指定した場合Marginの上下の値は無視されます。
Stretch配置されている領域の上下方向を埋めるように配置します。
Heightプロパティに値を設定しているとTopを指定したのと同じ状態になります。
領域を埋めるように配置するためにはHeightプロパティにAutoを設定します。

いろいろ値を変えてみながらどのように配置されるか確認してみましょう。


posted by cw at 20:30| Comment(0) | TrackBack(0) | レイアウト | このブログの読者になる | 更新情報をチェックする

[C# WPF]レイアウト用のコントロール

今回からレイアウト用のコントロールについて解説します。

C#のFormアプリケーションでは各コントロールが
自分の位置の基準、基準からのオフセット位置、サイズのプロパティを持っており
これらの値を指定してレイアウトをします。

WPFには各コントロールをレイアウトする為の専用のコントロールがあり、
レイアウトの記述がしやすくなっています。

次回以降で以下のレイアウト用のコントロールについてサンプルを交えながら解説します。
@Grid
AStackPanel
BWrapPanel
CDockPanel
DCanvas
posted by cw at 20:00| Comment(0) | レイアウト | このブログの読者になる | 更新情報をチェックする

[C# WPF]Grid

今回はレイアウト用のコントロールであるGridについて解説します。

Gridは縦横を格子状に区切って、
Grid上のコントロールにどこからどこまでの領域に配置するかを
指定してレイアウトするコントロールです。

扱いやすく非常に強力なレイアウトコントロールです。

Gridの定義はxamlに以下のような形式で記述します。

<Grid>
<Grid.RowDefinitions>
<RowDefinition Height=高さ指定/>
<RowDefinition/>



</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=幅指定/>
<ColumnDefinition/>



</Grid.ColumnDefinitions>
<Grid上に配置するコントロール Grid.Row=配置する行
                 Grid.Column=配置する列
                 Grid.RowSpan=コントロールの占める行数
                 Grid.ColumnSpan=コントロールの占める列数 />



</Grid>


Grid.RowDefinitionsの中に行の定義を記述します。
Grid.ColumnDefinitionsの中に列の定義を記述します。
それぞれ行、列の数だけ記述します。

RowDefinitionのHeightには行の高さを指定します。
数値を指定した場合は、その値の高さが割り当てられます。
数値と*(スター)を指定した場合は数値を比率として扱い、
対象領域を指定値の割合で分割した高さが割り当てられます。
数値を指定せず*だけの場合は1*と同義になります。
Autoを指定した場合は内部に配置するコントロールのサイズを元に自動的に割り当てられます。
Heightを指定しなかった場合は*になります。

ColumnDifinitionのWidthには列の幅を指定します。
指定方法はRowDefinitionのHeightと同じです。

Grid内に配置するコントロールには
Grid.Row、Grid.Column、Grid.RowSpan、Grid.ColumnSpanを設定できます。
それぞれ配置する行、列、コントロールの占める行数、列数です。
Row、ColumのマスからRowSpan、ColumnSpanの数の領域をコントロールに割り当てます。
指定しない場合はRow、Columnは0、RowSpan、ColumnSpanは1が設定されます。

サンプルを見てみましょう。

<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBox Grid.Row="1" Grid.Column="2" Grid.RowSpan="2" Grid.ColumnSpan="3"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Blue"/>
<TextBox Grid.Row="3" Grid.Column="1" Grid.RowSpan="2"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Red"/>
</Grid>


レイアウトのされ方を見るためだけのものなので何の意味もないコードです。
わかりやすいようにTextBoxの背景を青、赤にして配置しています。

レイアウトのイメージを見てみましょう。
1.jpg

これはデザイナ画面で見たイメージです。
行、列の幅、高さを指定していない為、領域を同じ比率の幅、高さで分割します。
内部のTextBoxはRow、Column、RowSpan、ColumnSpanで指定した領域を占めています。

次のサンプルを見てみます。

<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<TextBox Grid.Row="1" Grid.Column="1" Background="Blue"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</Grid>


水平方向を2:1:1、垂直方向を1:2:1の比率で3行3列に分割しています。

配置のイメージです。
1.jpg

複数の行や列の幅、高さに数値、Auto、*を混合して指定した場合は、
まず数値、Autoで指定した行、列の領域を割り当て、
残りの領域を*で指定した比率で分割して割り当てます。
posted by cw at 19:30| Comment(0) | レイアウト | このブログの読者になる | 更新情報をチェックする

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は180日以上新しい記事の投稿がないブログに表示されております。