今回はレイアウトコントロールの1つ、
System.Windows.Controls.DockPanelコントロールについてです。
では早速MSDNでの説明を見てみましょう。
子要素を互いに水平方向または垂直方向に整列する領域を定義します。DockPanel の子要素の画面上での位置は、それぞれの子要素の Dock プロパティおよび DockPanel の下の子要素の相対順序によって決まります。したがって、DockPanel の下の子要素の順序によって、同じ Dock プロパティ値を持つ一連の子要素が画面上の異なる位置に配置される可能性があります。DockPanel は子要素を順に反復処理し、残りの領域によって各要素の位置を設定するため、子の順序は配置に影響を及ぼします。
上記説明である通りに、DockPanelコントロールは水平方向・垂直方向に整列しレイアウトを行います。
DockPanelコントロールでは子要素の配置順序による他コントロールへの影響が大きいため、レイアウトの仕組みをきちんと理解する必要があります。
では簡単なDockPanelコントロールを使用した例を見てみましょう。
XAML使用例
<Window x:Class="Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<DockPanel>
<Button DockPanel.Dock="Left">Left</Button>
<Button DockPanel.Dock="Top">Top</Button>
<Button DockPanel.Dock="Right">Right</Button>
<Button DockPanel.Dock="Bottom">Bottom</Button>
<Button DockPanel.Dock="Top">Fill</Button>
</DockPanel>
</Window>
コード使用例（VB）
Class Application
Private Sub Application_Startup(ByVal sender As Object, ByVal e As System.Windows.StartupEventArgs) Handles Me.Startup
Dim mainWindow As New Window1()
Dim myDockPanel As New DockPanel()
Dim leftButton As New Button()
leftButton.Content = "Left"
DockPanel.SetDock(leftButton, Dock.Left)
Dim topButton As New Button()
topButton.Content = "Top"
DockPanel.SetDock(topButton, Dock.Top)
Dim rightButton As New Button()
rightButton.Content = "Right"
DockPanel.SetDock(rightButton, Dock.Right)
Dim bottomButton As New Button()
bottomButton.Content = "Right"
DockPanel.SetDock(bottomButton, Dock.Bottom)
Dim fillButton As New Button()
fillButton.Content = "Fill"
DockPanel.SetDock(fillButton, Dock.Top)
myDockPanel.Children.Add(leftButton)
myDockPanel.Children.Add(topButton)
myDockPanel.Children.Add(rightButton)
myDockPanel.Children.Add(bottomButton)
myDockPanel.Children.Add(fillButton)
mainWindow.Content = myDockPanel
mainWindow.Show()
End Sub
End Class
コード使用例（C#）
public partial class App : Application
{
private void Application_Startup(object sender, StartupEventArgs e)
{
Window1 mainWindow = new Window1();
DockPanel myDockPanel = new DockPanel();
Button leftButton = new Button();
leftButton.Content = "Left";
DockPanel.SetDock(leftButton, Dock.Left);
Button topButton = new Button();
topButton.Content = "Top";
DockPanel.SetDock(topButton, Dock.Top);
Button rightButton = new Button();
rightButton.Content = "Right";
DockPanel.SetDock(rightButton, Dock.Right);
Button bottomButton = new Button();
bottomButton.Content = "Bottom";
DockPanel.SetDock(bottomButton, Dock.Bottom);
Button fillButton = new Button();
fillButton.Content = "Fill";
DockPanel.SetDock(fillButton, Dock.Top);
myDockPanel.Children.Add(leftButton);
myDockPanel.Children.Add(topButton);
myDockPanel.Children.Add(rightButton);
myDockPanel.Children.Add(bottomButton);
myDockPanel.Children.Add(fillButton);
mainWindow.Content = myDockPanel;
mainWindow.Show();
}
}
上記例のように、DockPanelの子要素は添付プロパティを用いてDockPanelに対する水平方向・垂直方向の配置を指定しレイアウトを行います。
また、配置順序によって領域を埋めていく特性があるので、配置順序はとても重要な部分になります。
さて、上記例では最後の子要素は 「DockPanel.Dock="Top"」 と指定していますが、DockPanelの余白領域を全て埋め尽くしています。
DockPanelは既定で最終の子要素がDockPanelの余白を埋め尽くすようになっている為です。
これを 「DockPanel.Dock="Top"」 として配置する為には、
LastChildFillプロパティを使用し余白を埋め尽くさないようにする必要があります。
LastChildFillプロパティを使用し余白を埋め尽くさないようにする例は以下の通りになります。
<Window x:Class="Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<DockPanel LastChildFill="False" >
<Button DockPanel.Dock="Left">Left</Button>
<Button DockPanel.Dock="Top">Top</Button>
<Button DockPanel.Dock="Right">Right</Button>
<Button DockPanel.Dock="Bottom">Bottom</Button>
<Button DockPanel.Dock="Top">Not Fill</Button>
</DockPanel>
</Window>
このようにLastChildFillプロパティを使用し余白を埋め尽くさない事が確認出来たかと思います。
このように画面レイアウトにおいて、水平方向・垂直方向に配置するレイアウトにはDockPanelコントロールを使用します。
今回はレイアウト用コントロールのDockPanelコントロールについてでした。
to be continue・・・