Panely rozložení

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

• Umístění podřízených prvků panelu
• Jak panel formátuje podřízené prvky.
• 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í

Examples

Galerie WinUI 2
	Pokud máte nainstalovanou aplikaci Galerie WinUI 2 , přečtěte si téma RelativePanel, StackPanel, Grid, VariableSizedWrapGrid a Plátno v akci. Získání aplikace Galerie WinUI 2 (Microsoft Store) Získání zdrojového kódu (GitHub)

Vlastnosti panelu

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

Připojené vlastnosti 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í nadřazené objektu, jsou interpretovány pouze nejobsádnější nadřazený panel.

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í na stejné	Pozice na stejné stejné pozici
AlignTopWithPanel	AlignTopWith	Nad
AlignBottomWithPanel	AlignBottomWith	Pode
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 všimnout 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 zarovnáními a změní velikost při změně velikosti 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 rozložení tekutin a umožňuje uspořádat ovládací prvky v rozloženích s více řádky a více sloupci. Řá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.

V tomto příkladu velikost funguje takto:

• 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 Hodnotu Automaticky, takže je tak široká, jak je potřeba pro podřízené položky. V tomto případě je to 44 efektivních pixelů široké, aby se přizpůsobila šíř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.

Prostor ve sloupci nebo řádku můžete rozmístit pomocí automatické nebo hvězdicové velikosti. Pomocí automatické velikosti umožníte prvkům uživatelského rozhraní přizpůsobit jejich obsah nebo nadřazený kontejner. 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í změnu velikosti, označovanou také jako velikost hvězdičky. 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
Column_1	Auto	Sloupec se přizpůsobí jeho obsahu.
Column_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.
Column_3	44	Sloupec bude široký 44 pixelů.
Column_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 XAML sady Visual Studio vypadá výsledek 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.

Aplikace plátna

Panel plátna umístí podřízené prvky pomocí pevných souřadnicových bodů a nepodporuje rozložení tekutin. 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í z podřízených položek během předávání rozložení Uspořádat .

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. Prvek s nejvyšší hodnotou Canvas.ZIndex poslední, a proto nakreslí všechny ostatní 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é změny velikosti podřízených položek. 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 galerie WinUI 2 – podívejte se na všechny ovládací prvky XAML v interaktivním formátu.