2013年01月18日

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

メールアドレス:

ホームページアドレス:

コメント:

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


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

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