Indelingspanelen

Indelingsvensters zijn containers waarmee u UI-elementen in uw app kunt rangschikken en groeperen. De ingebouwde XAML-indelingspanelen omvatten RelativePanel, StackPanel, Grid, VariableSizedWrapGrid en Canvas. Hier beschrijven we elk deelvenster en laten we zien hoe u dit kunt gebruiken om XAML UI-elementen in te delen.

Er zijn verschillende dingen waarmee u rekening moet houden bij het kiezen van een indelingsvenster:

• Hoe het paneel de onderliggende elementen positioneert.
• Hoe het deelvenster de grootte van de onderliggende elementen aangeeft.
• Hoe overlappende onderliggende elementen boven elkaar liggen (z-volgorde).
• Het aantal en de complexiteit van geneste paneelelementen die nodig zijn om de gewenste indeling te maken.

Voorbeelden

WinUI 2 Gallery
	Als u de WinUI 2 Gallery-app hebt geïnstalleerd, raadpleegt u de RelativePanel,StackPanel, Grid, VariableSizedWrapGrid en Canvas in actie. De WinUI 2 Gallery-app downloaden (Microsoft Store) De broncode ophalen (GitHub)

Eigenschappen van paneel

Voordat we afzonderlijke panelen bespreken, gaan we enkele algemene eigenschappen bespreken die alle panelen hebben.

Gekoppelde eigenschappen van deelvenster

De meeste XAML-indelingspanelen gebruiken gekoppelde eigenschappen om hun onderliggende elementen te laten informeren over hoe ze in de gebruikersinterface moeten worden geplaatst. Gekoppelde eigenschappen gebruiken de syntaxis AttachedPropertyProvider.PropertyName. Als u panelen hebt die zijn genest in andere panelen, worden gekoppelde eigenschappen op UI-elementen die indelingskenmerken voor een bovenliggend element opgeven, alleen geïnterpreteerd door het meest directe bovenliggende deelvenster.

Hier volgt een voorbeeld van hoe u de gekoppelde eigenschap Canvas.Left kunt instellen op een knopbesturingselement in XAML. Hiermee wordt het bovenliggende canvas geïnformeerd dat de knop vanaf de linkerrand van het canvas 50 effectieve pixels moet hebben.

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

Zie Het overzicht van gekoppelde eigenschappen voor meer informatie over gekoppelde eigenschappen.

Paneelranden

De deelvensters RelativePanel, StackPanel en Raster definiëren randeigenschappen waarmee u een rand rond het deelvenster kunt tekenen zonder ze in een extra randelement te verpakken. De randeigenschappen zijn BorderBrush, BorderThickness, CornerRadius en Padding.

Hier volgt een voorbeeld van het instellen van randeigenschappen in een raster.

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

Door de ingebouwde randeigenschappen te gebruiken, vermindert u het aantal XAML-elementen, waardoor de gebruikersinterfaceprestaties van uw app kunnen worden verbeterd. Zie Uw XAML-indeling optimaliseren voor meer informatie over lay-outpanelen en ui-prestaties.

RelativePanel

Met RelativePanel kunt u UI-elementen indelen door op te geven waar ze naartoe gaan ten opzichte van andere elementen en ten opzichte van het deelvenster. Standaard wordt een element in de linkerbovenhoek van het deelvenster weergegeven. U kunt RelativePanel gebruiken met VisualStateManager en AdaptiveTrigger om uw gebruikersinterface opnieuw te rangschikken voor verschillende venstergrootten.

In deze tabel ziet u de gekoppelde eigenschappen die u kunt gebruiken om een element uit te lijnen ten opzichte van het deelvenster of andere elementen.

Uitlijning van paneel	Uitlijning op hetzelfde niveau	Positie op hetzelfde niveau
AlignTopWithPanel	AlignTopWith	Boven
AlignBottomWithPanel	AlignBottomWith	Onder
AlignLeftWithPanel	AlignLeftWith	LeftOf
AlignRightWithPanel	AlignRightWith	RightOf
AlignHorizontalCenterWithPanel	AlignHorizontalCenterWith
AlignVerticalCenterWithPanel	AlignVerticalCenterWith

Deze XAML laat zien hoe u elementen in een RelativePanel rangschikt.

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

Het resultaat ziet er als volgt uit.

Hier volgen enkele dingen die u moet weten over de grootte van de rechthoeken:

• De rode rechthoek krijgt een expliciete grootte van 44x44. Deze wordt in de linkerbovenhoek van het paneel geplaatst. Dit is de standaardpositie.
• De groene rechthoek krijgt een expliciete hoogte van 44. De linkerzijde wordt uitgelijnd met de rode rechthoek en de rechterkant wordt uitgelijnd met de blauwe rechthoek, die de breedte bepaalt.
• De oranje rechthoek krijgt geen expliciete grootte. De linkerkant is uitgelijnd met de blauwe rechthoek. De rechter- en onderrand zijn uitgelijnd met de rand van het paneel. De grootte wordt bepaald door deze uitlijningen en het formaat wordt aangepast wanneer het paneel wordt aangepast.

StackPanel

StackPanel rangschikt de onderliggende elementen in één lijn die horizontaal of verticaal kan worden georiënteerd. StackPanel wordt meestal gebruikt om een kleine subsectie van de gebruikersinterface op een pagina te rangschikken.

U kunt de eigenschap Afdrukstand gebruiken om de richting van de onderliggende elementen op te geven. De standaardstand is Verticaal.

In de volgende XAML ziet u hoe u een verticaal StackPanel van items maakt.

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

Het resultaat ziet er als volgt uit.

Als in een StackPanel de grootte van een onderliggend element niet expliciet is ingesteld, wordt deze uitgerekt om de beschikbare breedte (of hoogte als de afdrukstand horizontaal is). In dit voorbeeld is de breedte van de rechthoeken niet ingesteld. De rechthoeken worden uitgevouwen om de volledige breedte van het StackPanel te vullen.

Grid

Het deelvenster Raster ondersteunt vloeiende indelingen en stelt u in staat om besturingselementen in indelingen met meerdere rijen en meerdere kolommen te rangschikken. U geeft de rijen en kolommen van een raster op met behulp van de eigenschappen RowDefinitions en ColumnDefinitions .

Als u objecten in specifieke cellen van het raster wilt plaatsen, gebruikt u de gekoppelde eigenschappen Grid.Column en Grid.Row .

Gebruik de gekoppelde eigenschappen Grid.RowSpan en Grid.ColumnSpan om inhoud over meerdere rijen en kolommen te verdelen.

In dit XAML-voorbeeld ziet u hoe u een raster maakt met twee rijen en twee kolommen.

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

Het resultaat ziet er als volgt uit.

In dit voorbeeld werkt de grootte als volgt:

• De tweede rij heeft een expliciete hoogte van 44 effectieve pixels. Standaard vult de hoogte van de eerste rij elke spatie over.
• De breedte van de eerste kolom is ingesteld op Automatisch, dus deze is zo breed als nodig is voor de onderliggende kolommen. In dit geval is het 44 effectieve pixels breed om de breedte van de rode rechthoek aan te passen.
• Er zijn geen andere groottebeperkingen voor de rechthoeken, dus elke rechthoek strekt zich uit om de rastercel te vullen waarin deze zich bevindt.

U kunt ruimte binnen een kolom of rij verdelen met behulp van automatisch of sterformaat. U gebruikt automatische grootte om de grootte van UI-elementen aan te passen aan hun inhoud of bovenliggende container. U kunt ook automatisch aanpassen met de rijen en kolommen van een raster. Als u automatische grootte wilt gebruiken, stelt u de hoogte en/of breedte van ui-elementen in op Automatisch.

U gebruikt proportionele grootte, ook wel stergrootte genoemd, om de beschikbare ruimte tussen de rijen en kolommen van een raster te verdelen met gewogen verhoudingen. In XAML worden sterwaarden uitgedrukt als * (of n* voor gewogen stergrootte). Als u bijvoorbeeld wilt opgeven dat één kolom vijf keer breder is dan de tweede kolom in een indeling met twee kolommen, gebruikt u '5*' en '*' voor de eigenschappen Width in de columnDefinition-elementen .

In dit voorbeeld worden vaste, automatische en proportionele grootten gecombineerd in een raster met vier kolommen.

Rubriek	Sizing	Description
Column_1	Auto	De kolom wordt aangepast aan de inhoud.
Column_2	*	Nadat de autokolommen zijn berekend, krijgt de kolom een deel van de resterende breedte. Column_2 zal een halve zo breed zijn als Column_4.
Column_3	44	De kolom is 44 pixels breed.
Column_4	2*	Nadat de autokolommen zijn berekend, krijgt de kolom een deel van de resterende breedte. Column_4 is twee keer zo breed als Column_2.

De standaardkolombreedte is *, dus u hoeft deze waarde niet expliciet in te stellen voor de tweede kolom.

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

In de Visual Studio XAML-ontwerpfunctie ziet het resultaat er als volgt uit.

VariableSizedWrapGrid

VariableSizedWrapGrid is een rasterindelingsvenster waarin rijen of kolommen automatisch worden teruggelopen naar een nieuwe rij of kolom wanneer de waarde MaximumRowsOrColumns wordt bereikt.

De eigenschap Afdrukstand geeft aan of het raster de items in rijen of kolommen toevoegt voordat ze worden terugloop. De standaardstand is Verticaal, wat betekent dat in het raster items van boven naar beneden worden toegevoegd totdat een kolom vol is en vervolgens terugloopt naar een nieuwe kolom. Wanneer de waarde Horizontaal is, voegt het raster items van links naar rechts toe en loopt het terug naar een nieuwe rij.

Celdimensies worden opgegeven door ItemHeight en ItemWidth. Elke cel heeft dezelfde grootte. Als ItemHeight of ItemWidth niet is opgegeven, worden de eerste celgrootten aangepast aan de inhoud en is elke andere cel de grootte van de eerste cel.

U kunt de gekoppelde eigenschappen VariableSizedWrapGrid.ColumnSpan en VariableSizedWrapGrid.RowSpan gebruiken om op te geven hoeveel aangrenzende cellen een onderliggend element moet vullen.

U kunt als volgt een VariableSizedWrapGrid gebruiken in 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>

Het resultaat ziet er als volgt uit.

In dit voorbeeld is het maximum aantal rijen in elke kolom 3. De eerste kolom bevat slechts 2 items (de rode en blauwe rechthoeken) omdat de blauwe rechthoek 2 rijen omvat. De groene rechthoek loopt vervolgens terug naar de bovenkant van de volgende kolom.

Doek

Het canvaspaneel plaatst de onderliggende elementen met vaste coördinaatpunten en biedt geen ondersteuning voor vloeiende indelingen. U geeft de punten op voor afzonderlijke onderliggende elementen door de eigenschappen Canvas.Left en Canvas.Top gekoppelde eigenschappen voor elk element in te stellen. Het bovenliggende canvas leest deze gekoppelde eigenschapswaarden van de onderliggende items tijdens het rangschikken van de indeling.

Objecten in een canvas kunnen elkaar overlappen, waarbij één object boven op een ander object wordt getekend. Standaard worden in het canvas onderliggende objecten weergegeven in de volgorde waarin ze worden gedeclareerd, zodat het laatste onderliggende element bovenaan wordt weergegeven (elk element heeft een standaard z-index van 0). Dit is hetzelfde als andere ingebouwde panelen. Canvas ondersteunt echter ook de gekoppelde eigenschap Canvas.ZIndex die u op elk van de onderliggende elementen kunt instellen. U kunt deze eigenschap instellen in code om de tekenvolgorde van elementen tijdens de runtime te wijzigen. Het element met de hoogste canvas.ZIndex-waarde tekent het laatst en trekt daarom alle andere elementen die dezelfde ruimte delen of overlappen op welke manier dan ook. Houd er rekening mee dat alfawaarde (transparantie) wordt gerespecteerd, dus zelfs als elementen elkaar overlappen, kan de inhoud in overlappende gebieden worden gecombineerd als de bovenste waarde een niet-maximum alfawaarde heeft.

Op het canvas wordt de grootte van de onderliggende elementen niet gewijzigd. Elk element moet de grootte opgeven.

Hier volgt een voorbeeld van een canvas in 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>

Het resultaat ziet er als volgt uit.

Gebruik het deelvenster Canvas met discretie. Hoewel het handig is om de positie van elementen in de gebruikersinterface nauwkeurig te beheren voor sommige scenario's, zorgt een vast geplaatst indelingspaneel ervoor dat dat gebied van uw gebruikersinterface minder adaptief is voor wijzigingen in de totale grootte van de app-vensters. Het formaat van het app-venster kan afkomstig zijn van wijzigingen in de apparaatstand, het splitsen van app-vensters, het wijzigen van beeldschermen en een aantal andere gebruikersscenario's.

Panelen voor ItemsControl

Er zijn verschillende speciale panelen die alleen kunnen worden gebruikt als een ItemsPanel om items in een ItemsControl weer te geven. Dit zijn ItemsStackPanel, ItemsWrapGrid, VirtualizingStackPanel en WrapGrid. U kunt deze panelen niet gebruiken voor de algemene indeling van de gebruikersinterface.

De voorbeeldcode ophalen

• WinUI 2 Gallery-voorbeeld - Bekijk alle XAML-besturingselementen in een interactieve indeling.