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) | レイアウト | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
水着 ビキニ <a href="http://www.gucciemployerjp.biz/" title="gucci wallet">gucci wallet</a>
Posted by gucci wallet at 2013年07月12日 04:46
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

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


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

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