Panel zwijający (WrapPanel)

WrapPanel pozycjonuje swoje dzieci jedno obok drugiego, w poziomie (domyślnie) lub w pionie, tak długo aż zabraknie mu miejsca, po czym przechodzi do nowej linii i tam kontynuuje swoją pracę. Używaj go wszędzie tam, gdzie potrzebujesz pionowej lub poziomej listy kontrolek, która jest automatycznie łamana kiedy zabraknie miejsca.

Kiedy panel zwijający (WrapPanel) jest zorientowany poziomo, to wszystkie kontrolki otrzymują taką samą wysokość, równą najwyższemu z elementów. Kiecy zorientujemy WrapPanel pionowo, to wszystkie kontrolki będą miały tę samą szerokość jak najszerszy z elementów.

W pierwszym przykładzie sprawdzimy WrapPanel w domyślnej (poziomej) orientacji:

<Window x:Class="WpfTutorialSamples.Panels.WrapPanel"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WrapPanel" Height="300" Width="300">
	<WrapPanel>
		<Button>Test button 1</Button>
		<Button>Test button 2</Button>
		<Button>Test button 3</Button>
		<Button Height="40">Test button 4</Button>
		<Button>Test button 5</Button>
		<Button>Test button 6</Button>
	</WrapPanel>
</Window>

Zwróć uwagę na to, że ustawiłem wysokość jednego z przycisków w drugim rzędzie. W konsekwencji, na zrzucie ekranu, możesz zobaczyć jak cały rząd przycisków ma właśnie tę wysokość zamiast domyślnej, która jest w pierwszym rzędzie. Możesz także zauważyć, że panel robi dokłądnie to na co wskazuje jego nazwa: zawija zawartość do nowej linii kiedy nie może zmieścić już kolejnego elementu (Wrap – zawijać): w pierwszej linii nie ma już miejsca na czwarty przycisk i z tego powodu zostaje on automatycznie przeniesiony do kolejnej.

Zmniejszająć rozmiar okna, a co za tym idzie, ilość dostępnego miejsca, zobaczysz jak panel dynamicznie dostosowuje się do nowej sytuacji:

Te same zasady mają zastosowanie również wtedy, gdy orientacja panelu zawijającego jest ustawiona na "pion" (Vertical). Poniżej dokładnie ten sam przykład z orientacją ustawioną na Vertical:

<Window x:Class="WpfTutorialSamples.Panels.WrapPanel"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WrapPanel" Height="120" Width="300">
	<WrapPanel Orientation="Vertical">
		<Button>Test button 1</Button>
		<Button>Test button 2</Button>
		<Button>Test button 3</Button>
		<Button Width="140">Test button 4</Button>
		<Button>Test button 5</Button>
		<Button>Test button 6</Button>
	</WrapPanel>
</Window>

Możesz łatwo zaobserwować jak przyciski zostały ustawione kolejno w pionie zamiast w poziomie – przejście do nowej kolumny następuje więc wtedy, kiedy kontrolki sięgną dołu okna. W tym przykładzie uczyniłem czwarty przycisk szerszym, dzięki czemu możesz zobaczyć, że wszystkie pozostałe przyciski w tej kolumnie także mają tę samą szerokość – podobnie jak było to z wysokością w przykładzie z orientacją poziomą.

Proszę, bądź świadom tego, że poziomy WrapPanel będzie dopasowywał wyokość do wszystkich elementów w wierszu, a pionowy Wrap panel dopasuje szerokość do wszystkich elementów w kolumnie. Pamiętaj natomiast, że wysokość nie będzie ujednolicana w pionowym WrapPanelu i szerokość nie jest ujednolicana w poziomym WrapPanelu. Spójrz na następujący przykład z pionowym panelem zawiajającym, gdzie czwarty przycisk ma ustawioną własną szerokość i wysokość:

<Button Width="140" Height="44">Test button 4</Button>

Wygląda to tak:

Zauważ że piąty przycisk ma tę samą szerokość co poprzedni, a jego wysokość pozostaje bez zmian, mimo iż to właśnie duża wysokość czwartego przycisku przeniosła szósty do nowej kolumny.