Rozvržení panelů

Panely rozložení jsou kontejnery, které umožňují uspořádat a seskupovat prvky uživatelského rozhraní v aplikaci. Integrované panely rozložení XAML zahrnují RelativePanel, StackPanel, Grid, VariableSizedWrapGrid a Canvas. Zde popisujeme jednotlivé panely a ukážeme, jak ho použít k rozložení prvků uživatelského rozhraní XAML.

Při výběru panelu rozložení je potřeba zvážit několik věcí:

• Jak panel umísťuje své podřízené prvky.
• Jak panel přizpůsobuje velikost svých podřízených prvků.
• Jak se překrývající se podřízené prvky vrství na sebe navzájem (pořadí vykreslování).
• Počet a složitost vnořených prvků panelu potřebných k vytvoření požadovaného rozložení

Příklady

Otevření aplikace Galerie WinUI 3 a zobrazení panelů rozložení v akci

Aplikace Galerie WinUI 3 obsahuje interaktivní příklady ovládacích prvků a funkcí WinUI. Získejte aplikaci z Microsoft Store nebo vyhledejte zdrojový kód na GitHub.

Vlastnosti panelu

Než probereme jednotlivé panely, pojďme si projít některé společné vlastnosti, které mají všechny panely.

Vlastnosti připojené k panelu

Většina panelů rozložení XAML používá připojené vlastnosti, aby mohly podřízené prvky informovat nadřazený panel o tom, jak by měly být umístěny v uživatelském rozhraní. Připojené vlastnosti používají syntaxi AttachedPropertyProvider.PropertyName. Pokud máte panely, které jsou vnořené do jiných panelů, připojené vlastnosti prvků uživatelského rozhraní, které určují charakteristiky rozložení k nadřazenému objektu, jsou interpretovány pouze nejbližším nadřazeným panelem.

Tady je příklad, jak můžete nastavit vlastnost Canvas.Left připojenou u ovládacího prvku Tlačítko v XAML. To informuje nadřazené plátno, že tlačítko by mělo být umístěné 50 efektivních pixelů od levého okraje plátna.

<Canvas>
  <Button Canvas.Left="50">Hello</Button>
</Canvas>

Další informace o připojených vlastnostech naleznete v tématu Přehled připojených vlastností.

Ohraničení panelu

Panely RelativePanel, StackPanel a Grid definují vlastnosti ohraničení, které umožňují nakreslit ohraničení kolem panelu bez jejich zabalení do dalšího prvku Border. Vlastnosti ohraničení jsou BorderBrush, BorderThickness, CornerRadius a Odsazení.

Tady je příklad nastavení vlastností ohraničení v mřížce.

<Grid BorderBrush="Blue" BorderThickness="12" CornerRadius="12" Padding="12">
    <TextBlock Text="Hello World!"/>
</Grid>

Použití předdefinovaných vlastností ohraničení snižuje počet elementů XAML, což může zlepšit výkon uživatelského rozhraní vaší aplikace. Další informace o panelech rozložení a výkonu uživatelského rozhraní najdete v tématu Optimalizace rozložení XAML.

RelativePanel

RelativePanel umožňuje rozložení prvků uživatelského rozhraní určením, kam se vztahují k jiným prvkům a ve vztahu k panelu. Ve výchozím nastavení je prvek umístěn v levém horním rohu panelu. Pokud chcete změnit uspořádání uživatelského rozhraní pro různé velikosti oken, můžete použít RelativePanel s VisualStateManager a AdaptiveTrigger .

Tato tabulka zobrazuje připojené vlastnosti, které můžete použít k zarovnání prvku vzhledem k panelu nebo jiným prvkům.

Zarovnání panelu	Zarovnání sourozenců	Pozice sourozence
AlignTopWithPanel	AlignTopWith	Nad
AlignBottomWithPanel	AlignBottomWith	Níže
AlignLeftWithPanel	AlignLeftWith	LeftOf
AlignRightWithPanel	AlignRightWith	RightOf
AlignHorizontalCenterWithPanel	AlignHorizontalCenterWith
AlignVerticalCenterWithPanel	AlignVerticalCenterWith

Tento XAML ukazuje, jak uspořádat prvky v RelativePanel.

<RelativePanel BorderBrush="Gray" BorderThickness="1">
    <Rectangle x:Name="RedRect" Fill="Red" Height="44" Width="44"/>
    <Rectangle x:Name="BlueRect" Fill="Blue"
               Height="44" Width="88"
               RelativePanel.RightOf="RedRect" />

    <Rectangle x:Name="GreenRect" Fill="Green" 
               Height="44"
               RelativePanel.Below="RedRect" 
               RelativePanel.AlignLeftWith="RedRect" 
               RelativePanel.AlignRightWith="BlueRect"/>
    <Rectangle Fill="Orange"
               RelativePanel.Below="GreenRect" 
               RelativePanel.AlignLeftWith="BlueRect" 
               RelativePanel.AlignRightWithPanel="True"
               RelativePanel.AlignBottomWithPanel="True"/>
</RelativePanel>

Výsledek vypadá takto.

Tady je několik věcí, které byste si měli poznamenat ohledně velikosti obdélníků:

• Červený obdélník má explicitní velikost 44x44. Je umístěn v levém horním rohu panelu, což je výchozí umístění.
• Zelený obdélník má explicitní výšku 44. Jeho levá strana je zarovnaná s červeným obdélníkem a jeho pravá strana je zarovnaná s modrým obdélníkem, který určuje jeho šířku.
• Oranžový obdélník nemá explicitní velikost. Jeho levá strana je zarovnaná s modrým obdélníkem. Jeho pravé a dolní okraje jsou zarovnány s okrajem panelu. Jeho velikost je určena těmito uspořádáními a změní se spolu s velikostí panelu.

StackPanel

StackPanel uspořádá podřízené prvky na jednu čáru, která může být orientována vodorovně nebo svisle. StackPanel se obvykle používá k uspořádání malé pododdílu uživatelského rozhraní na stránce.

Pomocí vlastnosti Orientace můžete určit směr podřízených prvků. Výchozí orientace je Svislá.

Následující XAML ukazuje, jak vytvořit svislý StackPanel položek.

<StackPanel>
    <Rectangle Fill="Red" Height="44"/>
    <Rectangle Fill="Blue" Height="44"/>
    <Rectangle Fill="Green" Height="44"/>
    <Rectangle Fill="Orange" Height="44"/>
</StackPanel>

Výsledek vypadá takto.

Pokud není v elementu StackPanel nastavena explicitně velikost podřízeného prvku, roztáhne se tak, aby vyplnil dostupnou šířku (nebo výšku, pokud je orientace vodorovná). V tomto příkladu není nastavena šířka obdélníků. Obdélníky se rozbalí tak, aby vyplnily celou šířku objektu StackPanel.

Grid

Panel Mřížka podporuje pružná rozložení a umožňuje uspořádat ovládací prvky do víceřádkových a vícesloupcových rozložení. Řádky a sloupce mřížky zadáte pomocí vlastností RowDefinitions a ColumnDefinitions .

Pokud chcete umístit objekty do konkrétních buněk mřížky, použijte připojené vlastnosti Grid.Column a Grid.Row .

Pokud chcete, aby se obsah rozprostřel mezi více řádky a sloupci, použijte připojené vlastnosti Grid.RowSpan a Grid.ColumnSpan .

Tento příklad XAML ukazuje, jak vytvořit mřížku se dvěma řádky a dvěma sloupci.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition Height="44"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Rectangle Fill="Red" Width="44"/>
    <Rectangle Fill="Blue" Grid.Row="1"/>
    <Rectangle Fill="Green" Grid.Column="1"/>
    <Rectangle Fill="Orange" Grid.Row="1" Grid.Column="1"/>
</Grid>

Výsledek vypadá takto.

Zde je příklad, jak velikost funguje:

• Druhý řádek má explicitní výšku 44 efektivních pixelů. Ve výchozím nastavení výška prvního řádku vyplní libovolné místo, které zbývá.
• Šířka prvního sloupce je nastavená na Auto, takže je tak široká, jak je potřeba pro její obsah. V tomto případě je to široké 44 efektivních pixelů, aby odpovídalo šířce červeného obdélníku.
• Obdélníky nemají žádná další omezení velikosti, takže každá z nich se roztáhne tak, aby vyplnila buňku mřížky, ve které je.

Můžete rozmístit prostor ve sloupci nebo řádku pomocí Auto nebo hvězdičkového dimenzování. Použitím automatického přizpůsobení velikosti umožníte prvkům uživatelského rozhraní změnit velikost tak, aby odpovídala jejich obsahu nebo nadřazenému kontejneru. Automatické nastavení velikosti můžete použít také s řádky a sloupci mřížky. Pokud chcete použít automatické nastavení velikosti, nastavte výšku a/nebo šířku prvků uživatelského rozhraní na hodnotu Automaticky.

K distribuci dostupného prostoru mezi řádky a sloupce mřížky použijete proporcionální velikost, která se také nazývá velikost hvězdičky, a to podle váhovaných proporcí. V jazyce XAML jsou hodnoty hvězdy vyjádřeny jako * (nebo n* pro váženou velikost hvězdy). Pokud chcete například určit, že jeden sloupec je 5krát širší než druhý sloupec v rozložení se 2 sloupci, použijte pro vlastnosti Width v elementech ColumnDefinition hodnotu "5*" a "*".

Tento příklad kombinuje pevnou, automatickou a proporcionální změnu velikosti v mřížce se 4 sloupci.

Sloupec	Sizing	Description
Sloupec_1	Automatické	Sloupec se přizpůsobí jeho obsahu.
Sloupec_2	*	Po výpočtu automatických sloupců získá sloupec část zbývající šířky. Column_2 bude jedna polovina stejně široká jako Column_4.
Sloupec_3	44	Sloupec bude široký 44 pixelů.
Sloupec_4	2*	Po výpočtu automatických sloupců získá sloupec část zbývající šířky. Column_4 bude dvakrát širší než Column_2.

Výchozí šířka sloupce je *, takže tuto hodnotu nemusíte explicitně nastavit pro druhý sloupec.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition/>
        <ColumnDefinition Width="44"/>
        <ColumnDefinition Width="2*"/>
    </Grid.ColumnDefinitions>
    <TextBlock Text="Column 1 sizes to its content." FontSize="24"/>
</Grid>

V návrháři Visual Studio XAML výsledek vypadá takto.

VariableSizedWrapGrid

VariableSizedWrapGrid je panel rozložení ve stylu mřížky, kde se řádky nebo sloupce při dosažení hodnoty MaximumRowsOrColumns automaticky zabalí do nového řádku nebo sloupce.

Vlastnost Orientace určuje, zda mřížka před zabalením přidá její položky do řádků nebo sloupců. Výchozí orientace je Svislá, což znamená, že mřížka přidává položky shora dolů, dokud není sloupec plný, a pak se zabalí do nového sloupce. Pokud je hodnota Vodorovná, mřížka přidá položky zleva doprava a pak se zalomí na nový řádek.

Rozměry buněk jsou určeny ItemHeight a ItemWidth. Každá buňka má stejnou velikost. Pokud položka ItemHeight nebo ItemWidth není zadána, první velikost buněk se přizpůsobí jeho obsahu a každá ostatní buňka je velikost první buňky.

Můžete použít VariableSizedWrapGrid.ColumnSpan a VariableSizedWrapGrid.RowSpan připojené vlastnosti k určení, kolik sousedních buněk má podřízený prvek vyplnit.

Tady je postup použití VariableSizedWrapGrid v XAML.

<VariableSizedWrapGrid MaximumRowsOrColumns="3" ItemHeight="44" ItemWidth="44">
    <Rectangle Fill="Red"/>
    <Rectangle Fill="Blue" 
               VariableSizedWrapGrid.RowSpan="2"/>
    <Rectangle Fill="Green" 
               VariableSizedWrapGrid.ColumnSpan="2"/>
    <Rectangle Fill="Orange" 
               VariableSizedWrapGrid.RowSpan="2" 
               VariableSizedWrapGrid.ColumnSpan="2"/>
</VariableSizedWrapGrid>

Výsledek vypadá takto.

V tomto příkladu je maximální počet řádků v každém sloupci 3. První sloupec obsahuje pouze 2 položky (červené a modré obdélníky), protože modrý obdélník zahrnuje 2 řádky. Zelený obdélník se pak zalomí na začátek dalšího sloupce.

Plátno

Panel Canvas umísťuje své podřízené prvky pomocí pevných souřadnicových bodů a nepodporuje flexibilní uspořádání. Body jednotlivých podřízených prvků určíte nastavením Canvas.Left a Canvas.Top připojených vlastností u každého prvku. Nadřazené plátno čte tyto připojené hodnoty vlastností ze svých elementů během uspořádání v rámci rozvržení.

Objekty na plátně se můžou překrývat, kde je jeden objekt nakreslený nad jiným objektem. Plátno ve výchozím nastavení vykresluje podřízené objekty v pořadí, v jakém jsou deklarovány, takže poslední podřízená položka je vykreslena nahoře (každý prvek má výchozí index z-index 0). To je stejné jako ostatní předdefinované panely. Plátno však podporuje také připojenou vlastnost Canvas.ZIndex , kterou můžete nastavit u každého podřízeného elementu. Tuto vlastnost můžete nastavit v kódu a změnit pořadí kreslení prvků během běhu. cs-CZ: Prvek s nejvyšší hodnotou Canvas.ZIndex je vykreslen poslední, a proto se zobrazuje nad všemi ostatními prvky, které sdílejí stejný prostor nebo se překrývají jakýmkoli způsobem. Všimněte si, že je dodržena alfa hodnota (průhlednost), takže i když se prvky překrývají, obsah zobrazený v překrývajících se oblastech se může kombinovat, pokud má horní hodnota alfa jinou než maximální hodnotu alfa.

Plátno neprovádí žádné úpravy velikosti svých podřízených prvků. Každý prvek musí zadat jeho velikost.

Tady je příklad plátna v XAML.

<Canvas Width="120" Height="120">
    <Rectangle Fill="Red" Height="44" Width="44"/>
    <Rectangle Fill="Blue" Height="44" Width="44" Canvas.Left="20" Canvas.Top="20"/>
    <Rectangle Fill="Green" Height="44" Width="44" Canvas.Left="40" Canvas.Top="40"/>
    <Rectangle Fill="Orange" Height="44" Width="44" Canvas.Left="60" Canvas.Top="60"/>
</Canvas>

Výsledek vypadá takto.

Použijte panel Plátno s uvážením. I když je vhodné mít možnost přesně řídit pozice prvků v uživatelském rozhraní v některých scénářích, pevný poziční panel rozložení způsobí, že oblast uživatelského rozhraní bude méně adaptivní pro změny celkové velikosti okna aplikace. Změna velikosti okna aplikace může pocházet ze změn orientace zařízení, rozdělení oken aplikací, změn monitorů a řady dalších uživatelských scénářů.

Panely pro ItemsControl

Existuje několik speciálních panelů, které lze použít pouze jako ItemsPanel k zobrazení položek v ItemsControl. Jedná se o ItemsStackPanel, ItemsWrapGrid, VirtualizingStackPanel a WrapGrid. Tyto panely nemůžete použít pro obecné rozložení uživatelského rozhraní.

Získání ukázkového kódu

• Ukázka galerieWinUI 3 – podívejte se na všechny ovládací prvky XAML v interaktivním formátu.