Elrendezés panelek

Az elrendezéspanelek tárolók, amelyek lehetővé teszik a felhasználói felület elemeinek elrendezését és csoportosítását az alkalmazásban. A beépített XAML elrendezéspanelek közé tartozik a RelativePanel, a StackPanel, a Grid, a VariableSizedWrapGrid és a Canvas. Itt ismertetjük az egyes paneleket, és bemutatjuk, hogyan használható az XAML felhasználói felület elemeinek elrendezéséhez.

Az elrendezési panel kiválasztásakor több szempontot is figyelembe kell venni:

• A panel gyermekelemeinek elhelyezése.
• Hogyan méretezi a panel a gyermekelemeket.
• Hogyan helyezkednek el egymás fölött az egymást átfedő gyermekelemek (z-sorrend).
• A kívánt elrendezés létrehozásához szükséges beágyazott panelelemek száma és összetettsége.

Példák

Nyissa meg a WinUI 3 Katalógus alkalmazást, és tekintse meg működés közben az elrendezéspaneleket

A WinUI 3 Katalógus alkalmazás interaktív példákat tartalmaz a WinUI vezérlőire és funkcióira. Kérje le az alkalmazást a Microsoft Áruházból vagy keresse meg a forráskódot a GitHub webhelyen.

Panel tulajdonságai

Mielőtt az egyes paneleket tárgyalnánk, vizsgáljuk meg az összes panel közös tulajdonságait.

Panelhez csatolt tulajdonságok

A legtöbb XAML-elrendezéspanel csatolt tulajdonságokat használ annak érdekében, hogy gyermekelemeik tájékoztassák a szülőpanelt arról, hogyan kell elhelyezni őket a felhasználói felületen. A csatolt tulajdonságok a AttachedPropertyProvider.PropertyName szintaxist használják. Ha más panelekbe ágyazott panelekkel rendelkezik, a felhasználói felület olyan elemeihez csatolt tulajdonságokat, amelyek elrendezési jellemzőket adnak meg a szülő számára, csak a legközönségesebb szülőpanel értelmezi.

Íme egy példa arra, hogyan állíthatja be a Canvas.Left csatolt tulajdonságot az XAML gombvezérlőjén. Ez tájékoztatja a szülő Canvas-t, hogy a gombot 50 effektív képponttal kell elhelyezni a Canvas bal szélétől.

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

A csatolt tulajdonságokról további információt a Csatolt tulajdonságok áttekintése című témakörben talál.

Panelszegélyek

A RelativePanel, a StackPanel és a Grid panelek olyan szegélytulajdonságokat határoznak meg, amelyekkel szegélyt rajzolhat a panel körül anélkül, hogy egy további szegélyelembe csomagolja őket. A szegély tulajdonságai: BorderBrush, BorderThickness, CornerRadius és Padding.

Íme egy példa a rács szegélytulajdonságainak beállítására.

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

A beépített szegélytulajdonságok használata csökkenti az XAML-elemek számát, ami javíthatja az alkalmazás felhasználói felületi teljesítményét. Az elrendezéspanelekről és a felhasználói felület teljesítményéről további információt az XAML-elrendezés optimalizálása című témakörben talál.

RelativePanel

A RelativePanel lehetővé teszi a felhasználói felület elemeinek elrendezését úgy, hogy megadja, hová kerülnek a többi elemhez képest és a panelhez képest. Alapértelmezés szerint egy elem a panel bal felső sarkában helyezkedik el. A RelativePanel és a VisualStateManager és az AdaptiveTrigger segítségével átrendezheti a felhasználói felületet a különböző ablakméretekhez.

Ez a táblázat azokat a csatolt tulajdonságokat mutatja be, amelyek segítségével egy elemet igazíthat a panelhez vagy más elemekhez.

Panel igazítása	Testvér igazítása	Testvérhelyzet
AlignTopWithPanel	AlignTopWith	Fent
AlignBottomWithPanel	AlignBottomWith	Alul
AlignLeftWithPanel	AlignLeftWith	LeftOf
AlignRightWithPanel	AlignRightWith	RightOf
AlignHorizontalCenterWithPanel	AlignHorizontalCenterWith
AlignVerticalCenterWithPanel	AlignVerticalCenterWith

Ez az XAML bemutatja, hogyan rendezheti el az elemeket a RelativePanelben.

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

Az eredmény így néz ki.

Íme néhány dolog, amit érdemes megjegyezni a téglalapok méretezésével kapcsolatban:

• A piros téglalap explicit mérete 44x44. A panel bal felső sarkába kerül, amely az alapértelmezett pozíció.
• A zöld téglalapnak egyértelműen 44 a magassága. Bal oldala a piros téglalaphoz igazodik, a jobb oldala pedig a kék téglalaphoz igazodik, amely meghatározza a szélességét.
• A narancssárga téglalapnak nincs megadott mérete. Bal oldala a kék téglalaphoz igazodik. A jobb és az alsó élek a panel széléhez igazodnak. A méretet ezek az igazítások határozzák meg, és a panel átméretezésekor átméreteződik.

StackPanel

A StackPanel egyetlen sorba rendezi gyermekelemeit, amelyek vízszintesen vagy függőlegesen is orientáltak lehetnek. A StackPanel általában a felhasználói felület egy kis alszakaszának elrendezésére szolgál egy lapon.

A Gyermekelemek irányát a Tájolás tulajdonság használatával adhatja meg. Az alapértelmezett tájolás függőleges.

Az alábbi XAML bemutatja, hogyan hozhat létre függőleges StackPanel elemeket.

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

Az eredmény így néz ki.

A StackPanelben, ha egy gyermekelem mérete nincs explicit módon beállítva, az a rendelkezésre álló szélesség (vagy vízszintes tájolás esetén a magasság) kitöltéséhez nyúlik. Ebben a példában a téglalapok szélessége nincs beállítva. A téglalapok kibontva kitöltik a StackPanel teljes szélességét.

Grid

A Rács panel támogatja a folyékony elrendezéseket, és lehetővé teszi a vezérlők többsoros és többoszlopos elrendezésben való elrendezését. A Rács sorait és oszlopait a RowDefinitions és a ColumnDefinitions tulajdonsággal adhatja meg.

Ha a Rács adott celláiban szeretné elhelyezni az objektumokat, használja a Grid.Column és a Grid.Row csatolt tulajdonságokat.

Ha több sorra és oszlopra szeretné átfogni a tartalmat, használja a Grid.RowSpan és a Grid.ColumnSpan csatolt tulajdonságokat.

Ez az XAML-példa bemutatja, hogyan hozhat létre rácsot két sorból és két oszlopból.

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

Az eredmény így néz ki.

Ebben a példában a méretezés a következőképpen működik:

• A második sor explicit magassága 44 effektív képpont. Alapértelmezés szerint az első sor magassága kitölti a hátrahagyott területet.
• Az első oszlop szélessége Automatikus értékre van állítva, így a gyermekek számára a lehető legnagyobb szélességű. Ebben az esetben 44 képpont széles a piros téglalap szélességének megfelelően.
• A téglalapokon nincsenek más méretkorlátozások, ezért mindegyik megnyúlik, hogy kitöltse a benne lévő rácscellát.

Az oszlopokon vagy sorokon belüli térközt automatikus vagy csillagméretezéssel oszthatja el. Az automatikus méretezés használatával lehetővé teszi a felhasználói felület elemeinek átméretezését a tartalomhoz vagy a szülőtárolóhoz való igazításhoz. Az automatikus méretezést a táblázat soraival és oszlopaival is használhatja. Az automatikus méretezés használatához állítsa a felhasználói felület elemeinek magasságát és/vagy szélességét Automatikus értékre.

A csillagméretezésnek is nevezett arányos méretezést arra használja, hogy a rendelkezésre álló területet súlyozott arányban osztja el a rács sorai és oszlopai között. XAML-ben a csillagértékek *-ként (vagy n*-ként) vannak kifejezve a súlyozott csillagméretezéshez. Ha például meg szeretné adni, hogy egy oszlop 5-ször szélesebb a második oszlopnál egy kétoszlopos elrendezésben, használja az "5*" és a "*" értéket a ColumnDefinition elemek Szélesség tulajdonságaihoz.

Ez a példa egy rács rögzített, automatikus és arányos méretezését egyesíti 4 oszloppal.

oszlop	Sizing	Description
Oszlop_1	automatikus	Az oszlop mérete a tartalmához igazodik.
Oszlop_2	*	Az automatikus oszlopok kiszámítása után az oszlop a fennmaradó szélesség egy részét kapja meg. Column_2 fele olyan széles lesz, mint Column_4.
Oszlop_3	44	Az oszlop 44 képpont széles lesz.
Oszlop_4	2*	Az automatikus oszlopok kiszámítása után az oszlop a fennmaradó szélesség egy részét kapja meg. Column_4 kétszer olyan széles lesz, mint Column_2.

Az alapértelmezett oszlopszélesség "*", ezért nem kell explicit módon beállítania ezt az értéket a második oszlophoz.

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

A Visual Studio XAML-tervezőben az eredmény így néz ki.

VariableSizedWrapGrid

A VariableSizedWrapGrid egy rácsstílusú elrendezési panel, ahol a sorok vagy oszlopok automatikusan új sorba vagy oszlopba törnek a MaximumRowsOrColumns érték elérésekor.

A Tájolás tulajdonság azt határozza meg, hogy a rács sorba vagy oszlopba helyezi-e az elemeket a körbefuttatás előtt. Az alapértelmezett tájolás függőleges, ami azt jelenti, hogy a rács felülről lefelé adja hozzá az elemeket, amíg meg nem telik egy oszlop, majd egy új oszlopba tördel. Ha az érték vízszintes, a rács balról jobbra helyezi el az elemeket, majd egy új sorba tördeli.

A celladimenziókat az ItemHeight és az ItemWidth határozza meg. Minden cella mérete megegyezik. Ha az ItemHeight vagy az ItemWidth nincs megadva, akkor az első cellaméret igazodik a tartalmához, és minden más cella az első cella mérete.

A VariableSizedWrapGrid.ColumnSpan és a VariableSizedWrapGrid.RowSpan csatolt tulajdonságok segítségével megadhatja, hogy egy gyermekelem hány szomszédos cellát töltsön ki.

Az alábbiakban bemutatjuk, hogyan használható a VariableSizedWrapGrid az XAML-ben.

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

Az eredmény így néz ki.

Ebben a példában az egyes oszlopok sorainak maximális száma 3. Az első oszlop csak 2 elemet tartalmaz (a piros és a kék téglalapot), mert a kék téglalap 2 sorra terjed ki. A zöld téglalap ezután átkerül a következő oszlop tetejére.

Vászon

A Vászon panel rögzített koordinátapontokkal helyezi el a gyermekelemeket, és nem támogatja a rugalmas elrendezéseket. Az egyes gyermekelemek pontjait a Canvas.Left és Canvas.Top csatolt tulajdonságok beállításával adhatja meg az egyes elemeken. A szülővászon beolvassa ezeket a csatolt tulajdonságértékeket a gyermekeitől az elrendezés szakaszában.

A vászon objektumai átfedésben lehetnek, ha az egyik objektum egy másik objektumra van rajzolva. A vászon alapértelmezés szerint a gyermekobjektumokat a deklarálásuk sorrendjében jeleníti meg, így az utolsó gyermek felül jelenik meg (minden elem alapértelmezett z-indexe 0). Ez ugyanaz, mint a többi beépített panel. A Canvas azonban támogatja a Canvas.ZIndex csatolt tulajdonságot is, amelyet az egyes gyermekelemeken beállíthat. Ezt a tulajdonságot kódban állíthatja be az elemek rajzi sorrendjének módosításához a futási idő alatt. A legmagasabb Canvas.ZIndex értékkel rendelkező elem az utolsóként rajzolódik, ezért minden más elem fölé kerül, amely ugyanazt a területet osztja meg vagy bármilyen módon átfedésben van. Vegye figyelembe, hogy az alfaérték (átlátszóság) tiszteletben van tartva, így ha az elemek átfedésben vannak is, az átfedésben lévő területeken megjelenő tartalom összeolvadhat, ha a felső érték nem maximális alfa értékkel rendelkezik.

A vászon nem méretezi a gyermekeit. Minden elemnek meg kell adnia a méretét.

Íme egy példa egy vászonra az XAML-ben.

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

Az eredmény így néz ki.

Használja a Vászonpanelt saját belátása szerint. Bár bizonyos esetekben kényelmesen szabályozható a felhasználói felület elemeinek pozíciója, a rögzített elrendezési panel miatt a felhasználói felület ezen területe kevésbé alkalmazkodik az alkalmazásablakok általános méretváltozásaihoz. Az alkalmazásablakok átméretezése az eszköz tájolásának változásaiból, az alkalmazásablakok felosztásából, a monitorok módosításából és számos más felhasználói forgatókönyvből eredhet.

Az ItemsControl panelei

Számos speciális célú panel létezik, amelyek csak ItemsPanelként használhatók elemek megjelenítésére az ItemsControlban. Ezek a következők: ItemsStackPanel, ItemsWrapGrid, VirtualizingStackPanel és WrapGrid. Ezeket a paneleket nem használhatja általános felhasználói felületi elrendezéshez.

A mintakód lekérése

• WinUI 3 katalógusminta – Az összes XAML-vezérlő megjelenítése interaktív formátumban.