2013年01月18日

[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) | レイアウト | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
×

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