2013年01月18日

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

[C# WPF]WrapPanel

前回紹介したStackPanelは内部のコントロールを整列して配置するコントロールでした。

今回紹介するWrapPanelもStackPanelと同じく整列して配置するPanelです。

ただし、StackPanelがそれを配置するコントロールより大きくなると
そのサイズを超える部分が切れて表示されないのに対して、
WrapPanelは折り返して表示できる部分は表示します。

StackPanelで一部が切れてしまった場合に、
切れた部分のコントロールを操作する場合には
スクロールしなければなりませんが
WrapPanelにすればより多くのコントロールを表示できるので
こちらの方がいいという場合もあると思います。

まずはStackPanelを使用したサンプルを見てみます。

<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<GridSplitter Width="3" HorizontalAlignment="Right" VerticalAlignment="Stretch"/>
<StackPanel Grid.Column="1">
<Button Content="Item" Width="40" Height="40" Margin="5"/>
<Button Content="Item" Width="40" Height="40" Margin="5"/>
<Button Content="Item" Width="40" Height="40" Margin="5"/>
<Button Content="Item" Width="40" Height="40" Margin="5"/>
<Button Content="Item" Width="40" Height="40" Margin="5"/>
</StackPanel>
</Grid>


StackPanelにボタンを5つ配置しています。
これはツールボックスにツールアイテムのアイコンを表示するイメージです。

実行結果は次のようになります。
1.jpg
StackPanelの大きさよりもそれを配置しているWindowのサイズが小さくなると
表示しきれずに切れてしまいます。
上のイメージでは5つ目のButtonが切れています。
これはStackPanelの幅を変えても変わりません。
1.jpg

次に同じことをWrapPanelを使ってやってみます。

<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<GridSplitter Width="3" HorizontalAlignment="Right" VerticalAlignment="Stretch"/>
<WrapPanel Grid.Column="1">
<Button Content="Item" Width="40" Height="40" Margin="5"/>
<Button Content="Item" Width="40" Height="40" Margin="5"/>
<Button Content="Item" Width="40" Height="40" Margin="5"/>
<Button Content="Item" Width="40" Height="40" Margin="5"/>
<Button Content="Item" Width="40" Height="40" Margin="5"/>
</WrapPanel>
</Grid>


StackPanelをWrapPanelに置きかえただけです。
実行結果は以下のようになります。
1.jpg

WrapPanelの幅が狭い場合にはStackPanelの時のように
Windowサイズを超える部分は切れてしまいます。
しかし、WrapPanelの場合は幅を広げると水平方向にも表示できるだけ表示してくれます。
1.jpg

一画面で操作を完結できるのは大きな違いです。

今回のサンプルで気づかれたかと思いますが
StackPanelもWrapPanelも表示が切れた場合でもスクロールバーなどは表示されません。
スクロールバーを表示したい場合はScrollViewerというコントロールを使う必要があります。
ScrollViewerを使ったサンプルは別の記事で紹介したいと思います。
posted by cw at 18:30| Comment(0) | レイアウト | このブログの読者になる | 更新情報をチェックする

[C# WPF]DockPanel

DockPanelは内部に配置するコントロール毎に
指定した方向、サイズの領域を埋めるように配置していきます。

xamlで記述した順番で配置していき、
常に残りの領域を対象に配置していきます。

内部のコントロール同士は重なる事はありません。

LastChildFillプロパティをTrueに設定すると
最後のコントロールで残りの全ての領域を埋めます。
LastChildFillプロパティをTrueに設定した場合、
最後のコントロールにレイアウト用プロパティを設定していても無視されます。

サンプルです。

<Grid>
<DockPanel LastChildFill="False">
<TextBlock Text="@" DockPanel.Dock="Left" Width="20" Background="Blue" Foreground="White"/>
<TextBlock Text="A" DockPanel.Dock="Top" Height="30" Background="Red"/>
<TextBlock Text="B" DockPanel.Dock="Right" Width="40" Background="Yellow"/>
<TextBlock Text="C" DockPanel.Dock="Bottom" Height="50" Background="Green"/>
</DockPanel>
</Grid>


DockPanelの動作を説明する為だけのサンプルですのでなんの意味もないものです。
DockPanelの内部に4つのTextBlockを配置しています。
わかりやすいように番号と色をつけています。

実行結果は以下のようになります。
1.jpg

DockのLeft、Top、Right、Bottomプロパティを設定して。
対象のコントロールで埋める方向を指定します。
コントロールのWidth、Heightプロパティでサイズを設定できますが、
DockのLeft又はRightを指定した場合はそれぞれ左側、右側の幅Widthの領域、
DockのTop又はBottomを指定した場合はそれぞれ上側、下側の高さHeightの領域の
全てが使用済みとなり、以降のコントロールはこの領域と重なる事はありません。


<Grid>
<DockPanel LastChildFill="False">
<TextBlock Text="@" DockPanel.Dock="Left" Width="20" Height="20" Background="Blue" Foreground="White"/>
<TextBlock Text="A" DockPanel.Dock="Top" Height="30" Background="Red"/>
<TextBlock Text="B" DockPanel.Dock="Right" Width="40" Background="Yellow"/>
<TextBlock Text="C" DockPanel.Dock="Bottom" Height="50" Background="Green"/>
</DockPanel>
</Grid>


先ほどのサンプルの左側に配置したTextBlockの高さを指定しました。
以下のような実行結果になります。

1.jpg

左側のTextBlockの高さは小さくなっていますが
画面の左側部分の領域は使用済みとなっています。
2つ目以降のTextBlockは画面左端の領域と重ならないように配置されます。

DockPanelは画面を領域毎に区切って配置するのに使用しますが、
筆者は同じような事をしたい場合にはいつもGridで対応しています。

今回DockPanelのLeft、Top、Right、Bottomプロパティを内部のコントロールに設定しました。
このようなプロパティは添付プロパティといいます。
改めて別の記事で紹介します。
posted by cw at 18:00| Comment(0) | レイアウト | このブログの読者になる | 更新情報をチェックする

広告


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

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

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


×

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