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

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

[C# WPF]Canvas

前回までにレイアウト用のコントロールとしてGridと3つのPanelを紹介しました。
Gridは行列を区切って内部のコントロールを行、列を指定して配置します。
Panelは内部のコントロールをそれぞれのPanel毎の法則に沿って整列して配置します。

今回はCanvasを紹介します。
Canvasは内部のコントロールにCanvasの基準点からの距離(座標)を指定して配置します。

図形を描画する際などに使用します。

サンプルを見てみます。

<Grid>
<Canvas>
<Rectangle Width="60" Height="60" Stroke="Black" StrokeThickness="1"
Canvas.Left="20" Canvas.Top="20"/>
<Ellipse Width="100" Height="100" Fill="Blue"
Canvas.Left="100" Canvas.Top="40" Canvas.Right="10" Canvas.Bottom="10"/>
<Rectangle Width="100" Height="100" Fill="Red"
Canvas.Right="100" Canvas.Bottom="60" />
</Canvas>
</Grid>


Canvasの中に3つの図形を描きます。
各図形のプロパティではサイズや色、枠線の色や幅を設定しています。
見ていただきたいのは赤字で示したCanvas.Left、Top、Right、Bottomの部分です。
これらはキャンバスの基準点からの距離を指定する添付プロパティです。
(添付プロパティについては後の記事で解説します)
Left、Top、Right、Bottomはそれぞれ左端、上端、右端、下端からの距離になります。

LeftとRight、TopとBottomは両方指定する事もできますが、
RightよりLeft、BottomよりTopが優先されます。

実行結果です。
1.jpg

円の図形はLeft、Top、Right、Bottom全て指定していますが、
Left、Topに指定した位置に配置されています。
posted by cw at 17:30| Comment(0) | レイアウト | このブログの読者になる | 更新情報をチェックする

広告


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

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

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


×

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