Dela via

Layoutpaneler

Layoutpaneler är containrar som gör att du kan ordna och gruppera användargränssnittselement i din app. De inbyggda XAML-layoutpanelerna är RelativePanel, StackPanel, Grid, VariableSizedWrapGrid och Canvas. Här beskriver vi varje panel och visar hur du använder den för att layoutera XAML-gränssnittselement.

Det finns flera saker att tänka på när du väljer en layoutpanel:

  • Hur panelen placerar sina barnobjekt.
  • Hur panelen storleksanpassar sina barn element.
  • Hur överlappande underordnade element läggs ovanpå varandra (z-ordning).
  • Antalet och komplexiteten för kapslade panelelement som behövs för att skapa önskad layout.

Exempel

Öppna WinUI-galleriappen och se layoutpaneler i praktiken

Med WinUI 3-galleriappen kan du utforska och bläddra bland interaktiva exempel på WinUI 3-kontroller, funktioner och funktioner. Hämta appen från Microsoft Store eller hämta källkoden på GitHub.

Panelegenskaper

Innan vi diskuterar enskilda paneler ska vi gå igenom några vanliga egenskaper som alla paneler har.

Egenskaper för panelanslutning

De flesta XAML-layoutpaneler använder anslutna egenskaper för att låta sina underordnade element informera den överordnade panelen om hur de ska placeras i användargränssnittet. Anslutna egenskaper använder syntaxen AttachedPropertyProvider.PropertyName. Om du har paneler som är inbäddade i andra paneler, tolkas bifogade egenskaper hos gränssnittselement som specificerar layoutegenskaper för en överordnad panel endast av den mest omedelbara överordnade panelen.

Här är ett exempel på hur du kan ange egenskapen Canvas.Left bifogad på en knappkontroll i XAML. Detta informerar den överordnade Canvasen om att knappen ska placeras 50 pixlar från Canvasens vänstra kant.

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

Mer information om bifogade egenskaper finns i Översikt över bifogade egenskaper.

Panelkantlinjer

Panelerna RelativePanel, StackPanel och Grid definierar kantlinjeegenskaper som gör att du kan rita en kantlinje runt panelen utan att omsluta dem i ytterligare ett kantlinjeelement. Kantlinjeegenskaperna är BorderBrush, BorderThickness, CornerRadius och Padding.

Här är ett exempel på hur du anger kantlinjeegenskaper i ett rutnät.

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

Ett rutnät med kantlinjer

Om du använder de inbyggda kantlinjeegenskaperna minskar antalet XAML-element, vilket kan förbättra appens användargränssnittsprestanda. Mer information om layoutpaneler och användargränssnittsprestanda finns i Optimera din XAML-layout.

RelativePanel

Med RelativePanel kan du layoutera gränssnittselement genom att ange vart de ska gå i förhållande till andra element och i förhållande till panelen. Som standard placeras ett element i det övre vänstra hörnet på panelen. Du kan använda RelativePanel med VisualStateManager och AdaptiveTrigger för att ordna om användargränssnittet för olika fönsterstorlekar.

Den här tabellen visar de bifogade egenskaper som du kan använda för att justera ett element i förhållande till panelen eller andra element.

Paneljustering Justering på samma nivå Syskonposition
AlignTopWithPanel AlignTopWith Över
AlignBottomWithPanel AlignBottomWith Under
AlignLeftWithPanel AlignLeftWith LeftOf
AlignRightWithPanel AlignRightWith RightOf
AlignHorizontalCenterWithPanel AlignHorizontalCenterWith  
AlignVerticalCenterWithPanel AlignVerticalCenterWith  

Denna XAML visar hur du ordnar element i en RelativPanel.

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

Resultatet ser ut så här.

Relativpanel

Här följer några saker att notera om rektanglarnas storlek:

  • Den röda rektangeln får en explicit storlek på 44x44. Den placeras i det övre vänstra hörnet på panelen, vilket är standardpositionen.
  • Den gröna rektangeln får en explicit höjd på 44. Dess vänstra sida är justerad med den röda rektangeln, och dess högra sida är justerad med den blå rektangeln, som bestämmer dess bredd.
  • Den orange rektangeln får ingen explicit storlek. Den vänstra sidan är justerad mot den blå rektangeln. Dess högra och nedre kanter är justerade mot panelens kant. Storleken bestäms av de här justeringarna och storleken ändras när panelen ändras.

StackPanel

StackPanel ordnar sina underordnade element i en enda linje som kan riktas vågrätt eller lodrätt. StackPanel används vanligtvis för att ordna en liten delmängd av användargränssnittet på en sida.

Du kan använda egenskapen Orientering för att ange riktningen för de underordnade elementen. Standardorienteringen är Lodrät.

Följande XAML visar hur du skapar en lodrät StackPanel med objekt.

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

Resultatet ser ut så här.

Stackpanel

Om storleken på ett underordnat element inte anges explicit i en StackPanel sträcker den sig för att fylla den tillgängliga bredden (eller höjden om orienteringen är vågrät). I det här exemplet anges inte rektanglarnas bredd. Rektanglarna expanderar för att fylla hela bredden på StackPanel.

Grid

Rutnätspanelen stöder flexibla layouter och låter dig ordna kontroller i layouter med flera rader och kolumner. Du anger ett rutnäts rader och kolumner med hjälp av egenskaperna RowDefinitions och ColumnDefinitions .

Om du vill placera objekt i specifika celler i rutnätet använder du egenskaperna Grid.Column och Grid.Row .

Om du vill att innehållet ska sträcka sig över flera rader och kolumner använder du egenskaperna Grid.RowSpan och Grid.ColumnSpan .

Det här XAML-exemplet visar hur du skapar ett rutnät med två rader och två kolumner.

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

Resultatet ser ut så här.

Gitter

I det här exemplet fungerar storlekarna så här:

  • Den andra raden har en explicit höjd på 44 effektiva bildpunkter. Som standard fyller höjden på den första raden det utrymme som finns kvar.
  • Bredden på den första kolumnen är inställd på Auto, så den är så bred som behövs för dess underordnade. I det här fallet är det 44 effektiva bildpunkter breda för att rymma bredden på den röda rektangeln.
  • Det finns inga andra storleksbegränsningar för rektanglarna, så var och en sträcker sig för att fylla rutnätscellen den finns i.

Du kan distribuera utrymme i en kolumn eller rad med hjälp av auto - eller stjärnstorlek. Du använder automatisk storleksändring för att låta gränssnittselementen ändra storlek så att de passar deras innehåll eller överordnade container. Du kan också använda automatisk storleksändring med raderna och kolumnerna i ett rutnät. Om du vill använda automatisk storleksändring anger du elementen Höjd och/eller Bredd för användargränssnittet till Auto.

Du använder proportionell storleksändring, även kallad stjärnstorlek, för att fördela tillgängligt utrymme mellan raderna och kolumnerna i ett rutnät efter viktade proportioner. I XAML uttrycks stjärnvärden som * (eller n* för viktad stjärnstorlek). Om du till exempel vill ange att en kolumn är 5 gånger bredare än den andra kolumnen i en layout med två kolumner använder du "5*" och "*" för egenskaperna Width i elementen ColumnDefinition .

I det här exemplet kombineras fast, automatisk och proportionell storleksändring i ett rutnät med 4 kolumner.

Kolumn Sizing Description
Kolumn_1 Automatisk Kolumnen storleksanpassas så att den passar dess innehåll.
Kolumn_2 * När de automatiska kolumnerna har beräknats får kolumnen en del av den återstående bredden. Column_2 blir hälften så bred som Column_4.
Column_3 44 Kolumnen blir 44 bildpunkter bred.
Column_4 2* När de automatiska kolumnerna har beräknats får kolumnen en del av den återstående bredden. Column_4 blir dubbelt så bred som Column_2.

Standardkolumnbredden är "*", så du behöver inte uttryckligen ange det här värdet för den andra kolumnen.

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

I Visual Studio XAML-designern ser resultatet ut så här.

Ett rutnät med fyra kolumner i Visual Studio-designern

VariableSizedWrapGrid

VariableSizedWrapGrid är en layoutpanel i rutnätsformat där rader eller kolumner automatiskt omsluts till en ny rad eller kolumn när värdet MaximumRowsOrColumns nås.

Egenskapen Orientering anger om rutnätet lägger till sina objekt i rader eller kolumner före omslutning. Standardorienteringen är Lodrät, vilket innebär att rutnätet lägger till objekt uppifrån och ned tills en kolumn är full och sedan omsluts till en ny kolumn. När värdet är Vågrätt lägger rutnätet till objekt från vänster till höger och radbryts sedan till en ny rad.

Celldimensioner anges av ItemHeight och ItemWidth. Varje cell har samma storlek. Om ItemHeight eller ItemWidth inte har angetts, så är de första cellstorlekarna som passar innehållet, och alla andra celler är storleken på den första cellen.

Du kan använda egenskaperna VariableSizedWrapGrid.ColumnSpan och VariableSizedWrapGrid.RowSpan för att ange hur många intilliggande celler ett underordnat element ska fylla.

Så här använder du ett VariableSizedWrapGrid i 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>

Resultatet ser ut så här.

Omslutningsrutnät för variabelstorlek

I det här exemplet är det maximala antalet rader i varje kolumn 3. Den första kolumnen innehåller endast 2 objekt (de röda och blå rektanglarna) eftersom den blå rektangeln sträcker sig över 2 rader. Den gröna rektangeln omsluts sedan överst i nästa kolumn.

Kanvas

Panelen Canvas placerar sina underordnade element med hjälp av fasta koordinatpunkter och stöder inte dynamiska layouter. Du anger punkterna för enskilda underordnade element genom att ange egenskaperna Canvas.Left och Canvas.Top kopplade för varje element. Den överordnade Canvas läser dessa kopplade egenskapsvärden från sina underordnade element under layoutens Ordna-fas.

Objekt i en Canvas kan överlappa, där ett objekt ritas ovanpå ett annat objekt. Som standard renderar Arbetsytan underordnade objekt i den ordning de deklareras, så det sista underordnade objektet återges ovanpå (varje element har ett standard-z-index på 0). Detta är samma som andra inbyggda paneler. Canvas har dock även stöd för egenskapen Canvas.ZIndex som du kan ange för vart och ett av de underordnade elementen. Du kan ange den här egenskapen i kod för att ändra dragningsordningen för element under körningstiden. Elementet med det högsta värdet Canvas.ZIndex ritar sist och ritar därför över alla andra element som delar samma utrymme eller överlappar varandra på något sätt. Observera att alfavärdet (transparens) respekteras, så även om element överlappar varandra kan innehållet som visas i överlappande områden blandas om det översta har ett icke-maximalt alfavärde.

Arbetsytan gör ingen storleksändring av sina underordnade element. Varje element måste ange sin storlek.

Här är ett exempel på en Canvas i 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>

Resultatet ser ut så här.

Canvas

Använd Canvaspanelen efter eget gottfinnande. Även om det är praktiskt att exakt kunna kontrollera positionerna för element i användargränssnittet i vissa scenarier, gör en fast placerad layoutpanel att det området i användargränssnittet blir mindre anpassningsbart till ändringar i appfönstrets övergripande storlek. Storleksändring av appfönster kan bero på ändringar i enhetsorientering, uppdelade fönster, byte av bildskärmar och ett antal andra användarscenarier.

Paneler för ItemsControl

Det finns flera specialpaneler som bara kan användas som en ItemsPanel för att visa objekt i en ItemsControl. Dessa är ItemsStackPanel, ItemsWrapGrid, VirtualizingStackPanel och WrapGrid. Du kan inte använda dessa paneler för allmän användargränssnittslayout.

Hämta exempelkoden

  • Last updated on