2013年01月18日

[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) | レイアウト | このブログの読者になる | 更新情報をチェックする

[C# WPF]StackPanel

今日はレイアウトパネルの一つであるStackPanelを紹介します。

StackPanelは内部のコントロールを整列して配置するコントロールです。
積み上げるように配置するイメージからStackという名称になっています。


<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<StackPanel>
<Button Content="Menu1" Width="70" Height="23" Margin="5"/>
<Button Content="Menu2" Width="70" Height="23" Margin="5"/>
<Button Content="Menu3" Width="70" Height="23" Margin="5"/>
<Button Content="Menu4" Width="70" Height="23" Margin="5"/>
<Button Content="Menu5" Width="70" Height="23" Margin="5"/>
</StackPanel>
<GridSplitter Grid.Column="1" Width="3" HorizontalAlignment="Left" VerticalAlignment="Stretch"/>
</Grid>


サンプルです。
StackPanelの中に5つのボタンを配置しています。
実行イメージは以下のようになります。
1.jpg

ボタンは画面左側の領域に整列して配置されます。
メニューボタンを作る場合などはこのようにしたらよいかと思います。

Orientationプロパティを設定する事で積み上げる方向を
水平、又は垂直方向に設定できます。
指定しない場合は垂直方向です。

Orientationを指定したサンプルです。

<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<Button Content="Button1" Height="23" Margin="5"/>
<Button Content="Button2" Height="23" Margin="5"/>
<Button Content="Button3" Height="23" Margin="5"/>
</StackPanel>
</Grid>


Orientation=Horizontalにして内部にボタンを3つ配置しています。

実行イメージです。
1.jpg

内部のコントロールは積み上げる方向において
決して重なる事はありません。

OK、Cancelボタンなどは画面右下に配置したい場合が多いと思います。
そういった場合にはOrientation=HorizontalのStackPanelの
HorizontalAlignmentをRightに設定する事で実現できます。


<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Right">
<Button Content="OK" Height="23" Margin="5"/>
<Button Content="Cancel" Height="23" Margin="5"/>
</StackPanel>
</Grid>


実行イメージはこんな感じです。
1.jpg

StackPanelはそれを配置するコントロール(Window等)のサイズより
大きくなるとサイズを超えた部分は切れて表示されません。

以下のサンプルはStackPanelにボタンを7個配置したものですが
5個目のボタン以降のボタンは表示できていません。
1.jpg

こういった場合にできるだけ切れずに表示したい場合には
次に紹介するWrapPanelを使います。
posted by cw at 19:00| Comment(1) | レイアウト | このブログの読者になる | 更新情報をチェックする

広告


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

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

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


×

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