Ovládací prvek WrapPanel

Ovládací prvek WrapPanel umístí každého ze svých potomků vedle sebe, horizontálně (ve výchozím nastavení) nebo vertikálně a pokud nebude dostatek místa, přejde na další řádek. WrapPanel použijte tehdy, když chcete svislý nebo vodorovný seznam ovládacích prvků, který se automaticky zalamuje, když už není dostatek místa.

Když WrapPanel používá horizontální orientaci, ovládací prvky - potomci dostanou stejnou výšku, založenou na nejvyšší položce. Když má WrapPanel vertikální orientaci potomci dostanou stejnou šířku, založenou na nejširší položce.

V prvním příkladu si prohlédneme WrapPanel s výchozí (horizontální) orientací:

<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šimněte si, jak jsem nastavil specifickou výšku na jedno z tlačítek ve druhé řadě. Na výsledném snímku obrazovky uvidíte, že to způsobí, že celá řada tlačítek má stejnou výšku, místo požadované výšky, jak je vidět v první řadě. Také si všimněte, že panel dělá přesně to, co název napovídá: Obsah se zalomí, když se do něj nevejde více prvků. V tomto případě se čtvrté tlačítko nevešlo do první řady, takže se automaticky zalomilo na další řadu.

Pokud okno a tím pádem dostupný prostor zmenšíte, uvidíte, jak se panel okamžitě přizpůsobí:

Všechno toto chování platí také, když nastavíte Orientaci na Vertikální. Zde je přesně stejný příklad jako předtím, ale s vertikálním WrapPanelem:

<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 vidět, jak tlačítka jdou vertikálně, místo horizontálně, než se zalomí, až dosáhnou dolní části okna. V tomto případě jsem dal širší šířku čtvrtému tlačítku a vidíte, že tlačítka ve stejném sloupci také dostanou stejnou šířku, stejně jako jsme viděli příklad s výškou tlačítka v horizontálním příkladu.

Mějte na paměti, že zatímco horizontální WrapPanel bude odpovídat výšce ve stejné řadě a vertikální WrapPanel bude odpovídat šířce ve stejném sloupci, výška se neshoduje ve vertikálním WrapPanelu a šířka se neshoduje v horizontálním WrapPanelu. Podívejte se na tento příklad, který je vertikálním WrapPanelem, ale kde čtvrté tlačítko dostává vlastní šířku a výšku:

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

Bude to vypadat takto:

Všimněte si, jak tlačítko 5 používá pouze šířku - nezajímá ho výška, i když to způsobí, že šesté tlačítko bude posunuto do nového sloupce.