Arbeta med element i XAML Designer

Du kan lägga till element – kontroller, layouter och former – i din app i XAML, i kod eller med hjälp av XAML Designer. Det här avsnittet beskriver hur du arbetar med element i XAML Designer i Visual Studio eller Blend för Visual Studio.

Lägga till ett element i en layout

Layout är processen för att storleksanpassa och placera element i ett användargränssnitt. Om du vill placera visuella element måste du placera dem i en layoutpanel. A Panel har en underordnad egenskap som är en samling FrameworkElement-typer . Du kan använda olika Panel underordnade element, till exempel Canvas, StackPanel och Grid, för att fungera som layoutcontainrar och för att placera och ordna elementen på en sida.

Som standard används en Grid panel som layoutcontainer på den översta nivån i en sida eller ett formulär. Du kan lägga till layoutpaneler, kontroller eller andra element i sidlayouten på den översta nivån.

Om du vill lägga till ett element i en layout i XAML Designer gör du något av följande:

• Dubbelklicka på ett element i verktygslådan (eller välj ett element i verktygslådan och tryck på Retur).

• Dra ett element från verktygslådan till tavla.

• I verktygslådan väljer du ett av ritverktygen (till exempel Ellips ellerRektangel) och ritar sedan ett element i den aktiva panelen.

Ändra lagerordningen för element

När det finns två element på tavla i XAML Designer visas det ena elementet framför det andra i lagerordningen. Längst ned i listan över element i fönstret Dokumentdisposition är elementet längst fram (förutom när ZIndex-egenskapen för ett element har angetts). När du infogar ett element i en sida, ett formulär eller en layoutcontainer placeras elementet automatiskt framför andra element i det aktiva containerelementet. Om du vill ändra ordningen på elementen kan du använda orderkommandona eller dra elementen i objektträdet i fönstret Dokumentdisposition.

Om du vill ändra lagerordningen gör du något av följande:

• I fönstret Dokumentdisposition drar du elementen uppåt eller nedåt för att skapa önskad lagerordning.

• Högerklicka på elementet i fönstret Dokumentdisposition eller den tavla som du vill ändra lagerordningen för, peka på Order och klicka sedan på något av följande:

  • För till fronten för att föra elementet längst fram i ordningen.

  • Flytta fram för att flytta elementet framåt en nivå i ordningen.

  • Skicka bakåt för att skicka tillbaka elementet en nivå i ordningen.

  • Skicka till tillbaka för att skicka elementet hela vägen till baksidan av ordern.

• Ändra ZIndex-egenskapen i avsnittet Layout i fönstret Egenskaper. För överlappande element har egenskapen ZIndex företräde framför ordningen på elementen som visas i fönstret Dokumentdisposition. Ett element som har ett högre ZIndex-värde visas framför när element överlappar varandra.

Ändra justeringen för ett element

Du kan justera element i tavla med hjälp av menykommandon eller genom att dra element till fästlinjer.

En snapline är en visuell referens som hjälper dig att justera ett element i förhållande till andra element i appen.

Så här justerar du två eller flera element med hjälp av menykommandon:

1. Välj de element som du vill justera. Du kan markera fler än ett element genom att trycka på och hålla ned Ctrl-tangenten medan du väljer elementen.

2. Välj någon av följande egenskaper under HorizontalAlignment i avsnittet Layout i fönstret Egenskaper: Vänster, Mitten, Höger eller Stretch.

3. Välj någon av följande egenskaper under VerticalAlignment i avsnittet Layout i fönstret Egenskaper: Överkant, Mitten, Nederkant eller Stretch.

Om du vill justera två eller flera element med hjälp av fästlinjer i XAML Designer i en layout som innehåller minst två element drar eller ändrar du storlek på ett av elementen så att kanten justeras mot ett annat element.

När kanterna är justerade visas en justeringsgräns för att indikera justering. Justeringsgränsen är en röd streckad linje. Justeringsgränser visas bara när snäppning mot snäpp-linjer är aktiverat. En bild av den artboard som visar en justeringsgräns finns i Skapa ett användargränssnitt med hjälp av XAML Designer.

Ändra marginalerna för ett element

Marginalerna i XAML Designer avgör hur mycket tomt utrymme som finns runt ett element på tavla. Marginaler anger till exempel mängden utrymme mellan ytterkanterna för ett element och gränserna för en Grid panel som innehåller elementet. Marginaler anger också mängden utrymme mellan element som finns i en StackPanel.

Så här ändrar du ett elements marginaler i fönstret Egenskaper:

1. Välj det element vars marginaler du vill ändra.

2. Under Layout i fönstret Egenskaper ändrar du värdet (i bildpunkter eller enhetsoberoende enheter, som är cirka 1/96 tum) för någon av marginalegenskaperna (överkant, vänster, höger eller nederkant).

Om du vill ändra ett elements marginaler i förhållande till elementets layoutcontainer klickar du på marginalsmyckningarna som visas runt elementet när elementet är markerat och finns i en layoutcontainer. En bild som visar marginalsmyckningar finns i Skapa ett användargränssnitt med XAML Designer.

Om en marginalsmyckning är öppen, lodrätt eller vågrätt anges inte marginalen. Om en margindekoration stängs ställs marginalen in.

När du öppnar en margindekoration och den motsatta marginalen inte är inställd, ställs den in till rätt värde baserat på elementets placering i ritbrädet. För motsatta marginaler, till exempel vänster - och högermarginaler , anges alltid minst en egenskap.

Gruppera och dela upp element

Om du grupperar två eller flera element i XAML Designer skapas en ny layoutcontainer och dessa element placeras i containern. Genom att placera ihop två eller flera element i en layoutcontainer kan du enkelt välja, flytta och transformera gruppen som om elementen i gruppen var ett element. Gruppering är också användbart för att identifiera element som är relaterade till varandra på något sätt, till exempel knapparna som utgör ett navigeringselement. När du delar upp element tar du helt enkelt bort layoutcontainern som innehöll elementen.

Så här grupperar du element i en ny layoutcontainer:

1. Välj de element som du vill gruppera. (Om du vill markera flera element trycker du på och håller ned Ctrl-tangenten medan du klickar på dem.)

2. Högerklicka på de markerade elementen, peka på Gruppera i och klicka sedan på den typ av layoutcontainer där du vill att gruppen ska finnas.

   Tips/Råd

   Om du väljer Viewbox, Border eller ScrollViewer för att gruppera dina element placeras elementen i en ny rutnätspanel i Viewbox, Border eller ScrollViewer. Om du delar upp element i någon av dessa layoutcontainrar tas endast Viewbox, Border eller ScrollViewer bort och panelen Rutnät finns kvar. Om du vill ta bort panelen Grid delar du upp elementen igen.

Om du vill dela upp element och ta bort layouten högerklickar du på den grupp som du vill dela upp och klickar på Dela upp grupp. Du kan också gruppera eller dela upp element genom att högerklicka på markerade objekt i fönstret Dokumentdisposition och klicka på Gruppera i eller Dela upp grupp.

Återställa elementlayouten

Du kan återställa standardvärden för specifika layoutegenskaper för ett element med hjälp av kommandona För layoutåterställning. Med det här kommandot kan du återställa marginalen, justeringen, bredden, höjden och storleken på ett element, antingen individuellt eller kollektivt.

Om du vill återställa elementlayouten högerklickar du på elementet i fönstret Dokumentdisposition eller på arbetsytan och väljer sedan Layout>ÅterställPropertyName, där PropertyName är den egenskap som du vill återställa (eller välj Layout>Återställ alla för att återställa alla layoutegenskaper för elementet).

Relaterat innehåll

• Skapa ett användargränssnitt med XAML Designer