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.

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

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.

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

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.

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

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.

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

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.

Nyissa meg a WinUI 3 Katalógus alkalmazást, és tekintse meg a Canvas működését

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.

WrapPanel

Important

WrapPanel ettől érhető el: Windows App SDK 2.0 Kísérleti 2. Windows App SDK 2.0 Kísérleti 4 a térköz tulajdonságait LineSpacing és ItemSpacing névre nevezte át. Az API-k kísérleti állapotúnak vannak jelölve, és egy későbbi kiadásban megváltozhatnak vagy eltávolíthatók. Ne használd őket produkciós alkalmazásokban.

A WrapPanel sorba rendezi egymás után a gyermekelemeket. Ha a következő elem nem fér el a vonalon maradó térben, a panel áthelyezi azt egy új sor elejére. Használjon WrapPanelt olyan kis elemkészlethez, például címkékhez vagy szűrőgombokhoz, amelyek újratördelődnek, amikor a rendelkezésre álló terület megváltozik. A WrapPanel a Windows Community Toolkit WrapPanel portja.

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

A Tájolás tulajdonság azt az irányt határozza meg, amelyben a panel elemeket ad hozzá. Az alapértelmezett tájolás Vízszintes, ami azt jelenti, hogy a panel balról jobbra helyezi el az elemeket, majd új sorba tördeli. Ha az érték Vertical, a panel felülről lefelé hozzáadja az elemeket, majd egy új oszlopba tördeli. Ha a panel FlowDirection értéke RightToLeft, például egy jobbról balra író nyelven honosított alkalmazásban, a panel ezt az elrendezést tükrözi. Az egyes sorokat jobbról balra tölti ki, és minden új oszlopot hozzáad az előzőtől balra.

A VariableSizedWrapGridtől eltérően a WrapPanel nem használ rögzített méretű cellákat. Minden gyerekelem a kívánt méretet a tájolás irányában tartja. Egy sorban minden gyermek olyan magas helyet kap, mint a legmagasabb gyermek az adott sorban. Egy oszlopon belül minden gyermek akkora helyet kap, mint a legszélesebb gyermek az oszlopban.

Az alábbi tulajdonságok használatával térközt adhat az elrendezéshez:

• Az ItemSpacing beállítja az azonos sorban lévő szomszédos elemek közötti térközt. Az alapértelmezett érték a 0.
• Sorköz beállítja a sorok közötti térközt. Az alapértelmezett érték a 0.
• Kitöltés a panel szélei és elemei közötti térközt állítja be.

Így használhatja a WrapPanelt az XAML-ben.

<WrapPanel Width="132" ItemSpacing="4" LineSpacing="4">
    <Rectangle Fill="Red" Width="44" Height="44"/>
    <Rectangle Fill="Blue" Width="80" Height="44"/>
    <Rectangle Fill="Green" Width="44" Height="44"/>
    <Rectangle Fill="Orange" Width="60" Height="44"/>
</WrapPanel>

Az eredmény így néz ki.

Ebben a példában a piros és kék téglalapok és a köztük lévő elemek térköze a panel 132 képpontjából 128 képpontot használ fel, így az első sorban osztoznak. A zöld téglalap nem fér el a fennmaradó térben, ezért átkerül a második sorba. A narancssárga téglalap a második sorban a zöld téglalap mellett található.

Ha azt szeretné, hogy az utolsó gyermek kitöltse a sorban maradó területet, állítsa az ItemsStretch tulajdonságot Last értékre. Az alapértelmezett None érték minden gyermeket a kívánt méretén tart. Ne állítson be explicit szélességet az utolsó gyermekre, és ne adjon meg explicit magasságot, amikor a tájolás Vertical, mert az explicit méret megakadályozza, hogy a gyermekelem megnyúljon.

<WrapPanel Width="132" ItemSpacing="4" LineSpacing="4" ItemsStretch="Last">
    <Rectangle Fill="Red" Width="44" Height="44"/>
    <Rectangle Fill="Blue" Width="80" Height="44"/>
    <Rectangle Fill="Green" Width="44" Height="44"/>
    <Rectangle Fill="Orange" Height="44"/>
</WrapPanel>

Az eredmény így néz ki.

Ebben a példában a narancssárga téglalap kitölti a második sor többi részét. Az érték kódban való beállításához használja a WrapPanelItemsStretch enumerálást.

// Stretch the last child of a WrapPanel named tagPanel.
tagPanel.ItemsStretch = WrapPanelItemsStretch.Last;

A WrapPanel csak akkor tördeli az alárendelt elemeket, ha a tájolás irányában rendelkezésre álló hely korlátozott. A vízszintes StackPanel például nem korlátozza a gyermekek szélességét, így a benne lévő vízszintes WrapPanel egy sorban jeleníti meg az összes gyermekét. A panel nem foglal helyet, és nem ad térközt azoknak a gyermekelemeknek, amelyeknek a Visibility értéke Collapsed.

A WrapPanel nem virtualizálja a gyermekeit. Minden gyermeket létrehoz és elrendez, beleértve a nézetből görgetett gyermekeket is. Ha egy nagy méretű, tördelődő gyűjteményt szeretne megjeleníteni, használjon egy GridView vagy egy ItemsRepeater egy UniformGridLayouttal. Ezek a vezérlők támogatják a felhasználói felület virtualizálását.

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.