Kontrolka DockPanel

DockPanel pozwala na łatwe dokowanie elementów we wszystkich czterech kierunkach (góra, dół, lewo i prawo). Czyni to z niej dobry wybór w wielu sytuacjach gdzie chcesz podzielić okno na jasno określone obszary, w szczególności, że domyślnie ostatni element wypełni całe dostępne miejsce w środku.

Tak samo jak ma to miejsce w wielu innych panelach w WPF, zalety i tego panelu można wykorzystać właśnie dzięki właściwościom dołączonym – w tym przypadku właściwości DockPanel.Dock. Dzięki niej jesteśmy w stanie określić do której strony dana kontrolka ma zostać zadokowana. Domyślnie – kiedy nie sprecyzujesz jej wartości – kontrolki będą „przyklejane‘ do lewej strony, a ostatnia wypełni również pozostałą wolną przestrzeń. Poniżej przykład użycia panelu:

<Window x:Class="WpfTutorialSamples.Panels.DockPanel"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="DockPanel" Height="250" Width="250">
	<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>Center</Button>
	</DockPanel>
</Window>

Jak już wspomniałem, nie przypisujemy kierunku dokowania dla ostatniego z dzieci, ponieważ zostanie on automatycznie wycentrowany i rozciągnię na całe pozostałe wolne miejsce. Zauważ również, że kontrolki dokoła środka zajmują tylko tyle miesca ile potrzebują – wszystko inne zajmuje element środkowy. To jest właśnie powód, dlaczego prawy (Right) przycisk zajmuje odrobinę więcej miejsca niż lewy (Left) – tekst dłuższy o jeden znak potrzebuje więcej pikseli.

Ostatnią rzeczą którą zapewne zauważysz jest sposób w jaki zostało podzielone miesce między kontrolkami. Na przykład, górny przycisk nie zajmuje całej górnej przestrzeni – część jej jest zajęta przez lewy przycisk. DockPanel faworyzuje kontrolki w zależności od ich pozycji w kodzie. W tym przypadku lewy przycisk ma pierwszeństwo ponieważ jest pierwszym zdefiniowanym znacznikiem. Całe szczęście znaczy to też, że w bardzo prosty sposób można to zmienić. Jak? Pokażemy w następnym przykładzie, gdzie przy okazji wyrównamy podział wolnego miejsca poprzez przypisanie odpowiedniej szerokości i wysokości do dzieci.

<Window x:Class="WpfTutorialSamples.Panels.DockPanel"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="DockPanel" Height="250" Width="250">
	<DockPanel>
		<Button DockPanel.Dock="Top" Height="50">Top</Button>
		<Button DockPanel.Dock="Bottom" Height="50">Bottom</Button>
		<Button DockPanel.Dock="Left" Width="50">Left</Button>
		<Button DockPanel.Dock="Right" Width="50">Right</Button>	
		<Button>Center</Button>
	</DockPanel>
</Window>

Górna i dolna kontrolka mają teraz pierwszeństwo nad tymi po prawej i lewej, dodatkowo wszystkie zajmują 50 pikseli w pionie lub poziomie. Jeśli powiększysz lub pomniejszysz okno zobaczysz również, że ustawiona wcześniej szerokość lub wysokość pozostają takie same niezależnie od zmian, natomiast przestrzeń w środku powiększa się lub zmniejsza wraz ze zmianą rozmiaru okna.

LastChildFill

Jak już zostało wspomniane, domyślnym zachowaniem jest wypełnianie wolnej przestrzeni ostatnim dzieckiem panel dokowalnego – takie zachowanie może zostać wyłączone za pomocą właściwości LastChildFill. Poniżej jest przykład, w który wyłączamy wypełnianie ostatnim elementem oraz pokazujemy możliwość zadokowania więcej niż jednej kontrolki do tej samej strony.

<Window x:Class="WpfTutorialSamples.Panels.DockPanel"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="DockPanel" Height="300" Width="300">
	<DockPanel LastChildFill="False">
		<Button DockPanel.Dock="Top" Height="50">Top</Button>
		<Button DockPanel.Dock="Bottom" Height="50">Bottom</Button>
		<Button DockPanel.Dock="Left" Width="50">Left</Button>
		<Button DockPanel.Dock="Left" Width="50">Left</Button>
		<Button DockPanel.Dock="Right" Width="50">Right</Button>
		<Button DockPanel.Dock="Right" Width="50">Right</Button>
	</DockPanel>
</Window>

W tym przykłądzie zadokowaliśmy dwie kontrolki do lewej i dwie do prawej w tym samym czasie oraz wyłączyliśmy wypełnianie pozostałej przestrzeni ostatnim elementem (właściwość LastChildFill ustawiona na wartość fałsz – false). Takie ustawienie zostawia nas z wolną przetrzenią na środku, co może być przydatne w niektórych przypadkach.