Ovládací prvok WrapPanel

WrapPanel umiestni každý podriadený ovládací prvok vedľa seba, horizontálne (predvolené), alebo vertikálne, až kým nebude priestor, kde sa bude zalamovať na ďalší riadok a potom pokračovať. Použite ho, keď chcete zoznam vertikálnych, alebo horizontálnych ovládacích prvkov, ktoré sa automaticky zalamujú na ďalší riadok, alebo stĺpec.

Keď WrapPanel používa horizontálnu orientáciu, podriadené ovládacie prvky budú mať rovnakú výšku na základe najvyššej položky. Keď má WrapPanel vertikálnu orientáciu, podriadené ovládacie prvky budú mať rovnakú šírku na základe najširšej položky.

V prvom príklade vyskúšame WrapPanel s predvolenou (horizontálnou) orientáciou:

<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>

Všimnite si, ako nastavím určitú výšku na jedno z tlačidiel v druhom riadku. Na snímke obrazovky uvidíte, že to spôsobí, že celý riadok tlačidiel má rovnakú výšku, namiesto požadovanej výšky, ako je vidieť na prvom riadku. Tiež si všimnete, že panel robí presne to, čo naznačuje názov: Obsah sa zalamuje, keď sa už viac nezmestí. V tomto prípade sa štvrté tlačidlo nezmestí na prvý riadok, takže sa automaticky posunie na ďalší riadok.

Ak by ste zmenili okno a tým aj dostupný priestor, uvidíte, ako sa panel okamžite prispôsobí:

Toto správanie súhlasí aj keď nastavíte orientáciu na vertikálnu. Tu je presne ten istý príklad ako predtým, ale vertikálny WrapPanel:

<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>

Môžete vidieť, ako tlačidlá idú vertikálne namiesto horizontálne, predtým než sa zalomia, pretože sa dostali do spodnej časti okna. V tomto prípade som dal štvrtému tlačidlu väčšiu šírku a vidíte, že tlačidlá v tom istom stĺpci majú rovnakú šírku, rovnako ako to bolo vidieť s výškou tlačidla v horizontálnom príklade.

Majte na pamäti, že zatiaľ čo horizontálny WrapPanel bude zodpovedať výške v rovnakom riadku a vertikálny WrapPanel sa bude zhodovať so šírkou v rovnakom stĺpci, výška sa nezhoduje s vertikálnym WrapPanelom a šírka nie je zhodná s horizontálnym WrapPanelom. Pozrite sa v tomto príklade, ktorý je vertikálny WrapPanel, ale kde štvrté tlačidlo dostane vlastnú šírku a výšku:

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

Bude to vyzerať takto:

Všimnite si, ako tlačidlo 5 používa len šírku - nezáleží na výške, aj keď spôsobí, že šieste tlačidlo bude posunuté do nového stĺpca.