Designverktyg för XAML-körning för WinUI 3

Visual Studio innehåller en uppsättning körningsverktyg som du kan använda för att utforma, iterera på och inspektera WinUI 3 XAML medan appen körs. Tillsammans ger de dig en snabb cykel för redigering, omladdning och inspektion som visar ditt faktiska användargränssnitt – riktiga stilar, riktiga datamallar, riktiga animeringar – i stället för en statisk efterbildning.

Note

Visual Studio XAML Designer (dra och släpp-fliken Design) stöder för närvarande inte WinUI 3-projekt. Om du har öppnat en .xaml fil och bara ser XML-redigeraren är installationen inte bruten – designern är inte tillgänglig för WinUI 3. Funktionsbegäran spåras på Developer Community: Lägg till XAML Designer-stöd för WinUI 3-skrivbordsappar. Bakgrund om det tekniska arbetet finns i WindowsAppSDK-diskussion #4710.

Körningsverktygen som beskrivs i den här artikeln är värdefulla oavsett om en designer är tillgänglig eller inte. Den här artikeln går igenom arbetsflödet.

Vad du ska använda

Tool	Vad det gör	Så här öppnar du den
XAML Hot Reload	Skickar XAML-ändringar till din app som körs utan att starta om	Automatisk – redigera alla `.xaml` filer vid felsökning
Levande visuellt träd	Visar det fullständiga körningselementträdet och låter dig välja element i appen	Felsökning>Windows>Live Visual Tree
Live Property Explorer	Visar och låter dig redigera varje egenskap på det markerade elementet under körning	Felsöka>> Windows Live Property Explorer
XAML Live Preview	Renderar din app som körs i Visual Studio så att du kan inspektera utan att byta fönster	Felsöka>> Windows XAML Live Preview

Tip

Docka Live Visual Tree och Live Property Explorer sida vid sida. Tillsammans ger de dig en detaljerad inspektionsvy som visar de faktiska värdena under körning.

Prerequisites

Visual Studio 2022 version 17.0 eller senare (XAML Hot Reload och Live Visual Tree ingår).
Ett WinUI 3-projekt med hjälp av Windows App SDK. Se Skapa och köra ett WinUI 3-projekt för att skapa ett.
Projektet bör vara inriktat på .NET 6 eller senare (C#) eller använda C++/WinRT.

Steg 1: Starta appen under felsökningsprogrammet

Tryck på F5 (eller Felsök>Starta felsökning). XAML-Hot Reload aktiveras automatiskt när felsökningsprogrammet ansluts.

Verktygsfältet XAML Hot Reload visas i överlägget i appen. Om du inte ser den kontrollerar du att inställningen är aktiverad:

Gå till Verktyg>Alternativ>Felsökning>XAML Hot Reload.
Bekräfta att Aktivera XAML-Hot Reload är markerat.

Important

XAML-Hot Reload kräver felsökningsprogrammet. Om du kör utan felsökning (Ctrl+F5) inaktiveras Hot Reload, Live Visual Tree och Live Property Explorer.

Steg 2: Redigera XAML och se ändringar direkt

När appen körs växlar du till valfri .xaml fil i redigeraren och gör en ändring, till exempel ändra en Background färg eller lägga till en ny Button. Appen som körs uppdateras inom en sekund eller två, utan att starta om.

Vad Hot Reload kan och inte kan göra

Hot Reload hanterar de vanligaste redigeringarna:

Lägga till, ta bort eller ordna om element
Ändra egenskapsvärden (färger, marginaler, text, storlekar)
Lägga till eller ändra formatmallar och resursordlistor
Ändra innehåll för datamallar

Vissa ändringar kräver en omstart:

Tillägg av nya klasser, händelsehanterare i code-behind eller ändringar i x:Class
Ändra sammanfogade App.xaml ordlistor (ibland)
Ändra x:Bind uttryck som refererar till nya egenskaper

När Hot Reload inte kan tillämpa en ändring visas ett meddelande i verktygsfältet. Starta bara om appen för att hämta ändringarna.

Mer information finns i XAML-Hot Reload.

Steg 3: Inspektera det visuella trädet och egenskaperna

Öppna fönstret Live Visual Tree (Debug>Windows>Live Visual Tree). Det här fönstret visar alla element i gränssnittsträdet för appen som körs, ordnade i föräldra-barn-relationer.

Välj element visuellt

I verktygsfältet Live Visual Tree aktiverar du Välj element i programmet som körs (hårkorsknappen).
Klicka på ett element i din app som körs – trädet navigerar till det elementet och Live Property Explorer visar dess egenskaper.

Det här är motsvarigheten vid körning till att klicka på ett element på en designyta, men det återspeglar exakt vad appen renderar, inklusive element som skapas dynamiskt i kod.

Redigera egenskaper vid körning

I Live Property Explorer kan du ändra egenskapsvärden i realtid. Ett exempel:

Ändra a Margin för att justera avstånd och se effekten omedelbart.
Ställ in Visibility på Collapsed för att testa vad som händer när ett element döljs.
Justera Width eller Height testa dynamiska layouter.

Dessa ändringar under körning sparas inte i XAML-filen – de är bara till för att experimentera. När du hittar värden som du gillar skriver du in dem i .xaml filen (där Hot Reload hämtar dem och gör dem permanenta).

Steg 4: Använda XAML Live Preview

XAML Live Preview renderar din app som körs på en Visual Studio-flik, så att du kan visa appen och din XAML-källa sida vid sida utan att byta fönster.

Öppna den: Felsöka>Windows>XAML Live Preview.

Detta är särskilt användbart för installationer med en enda bildskärm där Alt-Tabbing mellan appen och Visual Studio är obekväm.

Mer information finns i XAML Live Preview.

Rekommenderas: Skapa en lekplatssida för användargränssnittet

Skapa en dedikerad lekplatssida i projektet – en sida vars enda syfte är att du ska kunna experimentera med kontroller, format och layouter. Detta ger dig en scratchpad som alltid är redo för visuell iteration, och den passar särskilt bra med körningsverktygen ovan.

Konfigurera lekplatsen

Högerklicka på projektet i Prieskumník riešení och välj Lägg till>nytt objekt>tom sida (WinUI 3). Ge den namnet UIPlayground.xaml.

I UIPlayground.xamllägger du till ett ScrollViewer med avsnitt för varje kontroll eller mönster som du vill prova:

<Page
    x:Class="MyApp.UIPlayground"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <ScrollViewer Padding="24">
        <StackPanel Spacing="24">

            <!-- Section: Buttons -->
            <TextBlock Text="Buttons" Style="{StaticResource SubtitleTextBlockStyle}"/>
            <StackPanel Orientation="Horizontal" Spacing="8">
                <Button Content="Standard"/>
                <Button Content="Accent" Style="{StaticResource AccentButtonStyle}"/>
                <ToggleButton Content="Toggle"/>
                <HyperlinkButton Content="Link" NavigateUri="https://learn.microsoft.com"/>
            </StackPanel>

            <!-- Section: Text input -->
            <TextBlock Text="Text input" Style="{StaticResource SubtitleTextBlockStyle}"/>
            <TextBox PlaceholderText="Type here..." Width="300" HorizontalAlignment="Left"/>
            <PasswordBox PlaceholderText="Password" Width="300" HorizontalAlignment="Left"/>

            <!-- Add more sections as needed -->

        </StackPanel>
    </ScrollViewer>
</Page>

Gör lekplatsen lätt att nå. Under utvecklingen anger du den som startsida i App.xaml.cs:

// In App.xaml.cs, OnLaunched method — swap in for quick playground access:
// rootFrame.Navigate(typeof(UIPlayground));

Om din app använder en NavigationViewlägger du till ett menyalternativ som bara visas i felsökningsversioner. Till exempel i ditt huvudfönsters bakomliggande kod:

// In your main window or shell page constructor, after InitializeComponent():
#if DEBUG
    NavView.MenuItems.Add(new NavigationViewItem
    {
        Content = "UI Playground",
        Tag = typeof(UIPlayground)
    });
#endif

där NavView är x:Name för din NavigationView-kontroll.

Så här använder du lekplatsen

Tryck på F5 för att starta appen och gå till lekplatssidan.
.xaml Öppna filen sida vid sida med appen som körs (eller använd XAML Live Preview).
Lägg till eller ändra kontroller i XAML-redigeraren – Hot Reload skickar ändringar direkt.
Använd Live Visual Tree för att klicka på renderade kontroller och granska deras faktiska layoutvärden i Live Property Explorer.
När du är nöjd med kontrollens utseende kopierar du XAML till din riktiga sida.

Det här mönstret ger dig en "type-reload-inspect"-cykel – och eftersom den kör riktig kod ser du verkliga datamallar, verkliga format och verkliga animeringar.

Jämförelse av metoder för designtid och körningstid

Så här mappar vanliga designuppgifter för användargränssnittet till körningsverktygen:

Task	Runtime-verktyg
Lägga till en kontroll på sidan	Skriv XAML-elementet – IntelliSense slutför taggen och nödvändiga egenskaper
Förhandsgranska kontrollen	Se det direkt i appen medan den körs via Hot Reload
Välj ett element som ska inspekteras	Använd Live Visual Tree>Select Element (korsmarkör)
Visa eller redigera egenskaper	Använda Live Property Explorer
Justera storleken eller positionen	Redigera `Width`, `Height`, `Margin` i XAML eller i Live Property Explorer

Tips för ett effektivt arbetsflöde

Använd WinUI 3-galleriappen. Installera den från Microsoft Store eller skapa den från GitHub. Den visar varje WinUI 3-kontroll med interaktiva exempel och kopieringsklar XAML. Se det som en visuell katalog som du kan bläddra i innan du skriver XAML.
Håll lekplatssidan öppen. Behandla den som en levande stilguide för din app.
Använd d:DesignHeight och d:DesignWidth. Även utan designern hjälper dessa attribut IntelliSense och håller dina sidor en konsekvent storlek när du öppnar dem i redigeraren.
Kombinera med fönstret för XAML-bindningsfel. Öppna den från Felsökning>Windows>XAML-bindningsfel för att fånga upp bindningsfel som designern aldrig skulle ha visat dig.
Använd community-verktygslådan. Windows Community Toolkit innehåller kontroller och hjälpfunktioner som minskar mängden layout som du behöver för att handkoda.

Feedback

Var den här sidan till hjälp?

Last updated on 2026-09-19