본문 바로가기

silverlight

Layout Panel #4 (DockPanel)

DockPanel을 사용하려면, System.Windows.Control 어셈블리 내 컨트롤을 사용하기 위해서는 우선 참조를 추가하고, XAML 상단에 네임스페이스를 참조하기 위한 접두사를 사용해야 한다.



xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"

DockPanel
DockPanel 은 Docking 될 위치를 설정하여, 설정 된 위치에 고정시켜 배치 하는 Layout Panel이다.
Docking 될 위치를 지정하는 방법은, 콘텐트 엘리먼트에서 DockPanel의 Attached-Property인 Dock를 사용하면 되고, Dock은 Left, Right, Top, Bottom 네 가지가 있다. (배치 되는 콘텐트 엘리먼트의 Dock 위치를 설정하지 않으면 Default로 Left로 Docking 시킨다.)
<controls:DockPanel x:Name="myDockPanel" LastChildFill="False">
            <Button controls:DockPanel.Dock="Top" Content="Top"/>
            <Button controls:DockPanel.Dock="Left" Content="Left"/>
            <Button controls:DockPanel.Dock="Right" Content="Right"/>
            <Button controls:DockPanel.Dock="Bottom" Content="Bottom"/>
</controls:DockPanel>

DockPanel.LastChildFill property를 True로 하게 되면, 마지막으로 배치 되는 콘텐트 엘리먼트는 지정 된 Dock property와 상관없이 다른 콘텐트 엘리먼트가 고정되고 남은 부분을 꽉 채우게 된다.


Docking 은 먼저 설정 된 콘텐트가 우선한다.
예를 들어, 위 코드에서 처럼 Dock = "Top" 을 먼저 하고 Dock = "Left" 를 그 뒤에 지정했기 때문에, Top과 Left가 겹치는 부분에서는 Top이 그 공간을 차지하게 된다. 반대로, Dock = "Left"를 먼저 지정 한다면, Left가 그 공간을 차지하게 된다.
<Button controls:DockPanel.Dock="Left" Content="Left"/>
<Button controls:DockPanel.Dock="Top" Content="Top"/>



위와 같이, DockPanel 내 배치 될 콘텐트 엘리먼트의 구조를 미리 생각하고, 겹치는 부분을 잘 처리하기 위해 순서에 유의해야 한다.


<Button controls:DockPanel.Dock="Left" Content="#1"/>
<Button controls:DockPanel.Dock="Top" Content="#2"/>
<Button controls:DockPanel.Dock="Right" Content="#3"/>
<Button controls:DockPanel.Dock="Bottom" Content="#4"/>
<Button controls:DockPanel.Dock="Left" Content="#5"/>
<Button controls:DockPanel.Dock="Top" Content="#6"/>
<Button controls:DockPanel.Dock="Right" Content="#7"/>
<Button controls:DockPanel.Dock="Bottom" Content="#8"/>
<Button controls:DockPanel.Dock="Left" Content="#9"/>
<Button controls:DockPanel.Dock="Top" Content="#10"/>
<Button controls:DockPanel.Dock="Right" Content="#11"/>
<Button controls:DockPanel.Dock="Bottom" Content="#12"/>
<Button controls:DockPanel.Dock="Left" Content="#13"/>
<Button controls:DockPanel.Dock="Top" Content="#14"/>
<Button controls:DockPanel.Dock="Right" Content="#15"/>
<Button controls:DockPanel.Dock="Bottom" Content="#16"/>