Ontwerphulpprogramma's voor XAML-runtime voor WinUI 3

Visual Studio bevat een set runtimehulpprogramma's waarmee u uw WinUI 3 XAML kunt ontwerpen, herhalen en inspecteren terwijl uw app wordt uitgevoerd. Samen gebruikt geven ze je een snelle bewerk-herlaad-inspecteer-cyclus die je echte gebruikersinterface laat zien — echte stijlen, echte datasjablonen, echte animaties — in plaats van een statische benadering.

Notitie

De Visual Studio XAML Designer (het tabblad Ontwerp slepen en neerzetten) biedt momenteel geen ondersteuning voor WinUI 3-projecten. Als u een .xaml bestand hebt geopend en alleen de XML-editor ziet, is de installatie niet verbroken. De ontwerpfunctie is niet beschikbaar voor WinUI 3. De functieaanvraag wordt bijgehouden op Developer Community: XAML Designer-ondersteuning toevoegen voor WinUI 3-bureaublad-apps. Zie WindowsAppSDK-discussie #4710 voor achtergrondinformatie over de technische inspanning.

De runtimehulpprogramma's die in dit artikel worden beschreven, zijn waardevol, ongeacht of er een ontwerper beschikbaar is. In dit artikel wordt de werkstroom beschreven.

Wat u gaat gebruiken

Tool	Wat het doet	Hoe het te openen
XAML Hot Reload	Pusht XAML-wijzigingen naar uw actieve app zonder opnieuw op te starten	Automatisch : een `.xaml` bestand bewerken tijdens foutopsporing
Live Visual Tree	Toont de volledige runtime-elementstructuur en kunt u elementen in de app selecteren	Debug>Windows>Live Visual Tree
Live Property Explorer	Hiermee kunt u elke eigenschap van het geselecteerde element tijdens runtime bewerken	Fouten opsporen>> Windows Live Property Explorer
XAML Live Preview	Geeft uw actieve app weer in Visual Studio, zodat u kunt controleren zonder tussen vensters te schakelen	Debuggen>>XAML-livevoorbeeld

Tip

Dock Live Visual Tree en Live Property Explorer naast elkaar. Samen geven ze u een gedetailleerde inspectieweergave waarin de werkelijke runtimewaarden worden weergegeven.

Prerequisites

Visual Studio 2022 versie 17.0 of hoger (XAML Hot Reload en Live Visual Tree zijn inbegrepen).
Een WinUI 3-project met behulp van de Windows App SDK. Zie Een WinUI 3-project maken en uitvoeren om er een te maken.
Uw project moet gericht zijn op .NET 6 of hoger (C#) of C++/WinRT gebruiken.

Stap 1: Start uw app onder het foutopsporingsprogramma

Druk op F5 (of Foutopsporing>). XAML-Hot Reload wordt automatisch geactiveerd wanneer het foutopsporingsprogramma wordt gekoppeld.

De werkbalk XAML Hot Reload wordt weergegeven op de overlay in de app. Als u deze niet ziet, controleert u of de instelling is ingeschakeld:

Ga naar Optiesvoorfoutopsporing>>> vanXAML-Hot Reload.
Controleer of XAML Hot Reload inschakelen is aangevinkt.

Important

Voor XAML-Hot Reload is het foutopsporingsprogramma vereist. Als u zonder foutopsporing (Ctrl+F5) werkt, schakelt u Hot Reload, Live Visual Tree en Live Property Explorer uit.

Stap 2: XAML bewerken en wijzigingen direct bekijken

Wanneer uw app wordt uitgevoerd, schakelt u over naar een .xaml bestand in de editor en voert u een wijziging aan, bijvoorbeeld een Background kleur wijzigen of een nieuwe Buttontoevoegen. De actieve app wordt binnen een seconde of twee bijgewerkt, zonder opnieuw te hoeven starten.

Wat Hot Reload wel en niet kan doen

Hot Reload verwerkt de meest voorkomende bewerkingen:

Elementen toevoegen, verwijderen of opnieuw ordenen
Eigenschapswaarden wijzigen (kleuren, marges, tekst, grootten)
Stijlen en resourcewoordenlijsten toevoegen of wijzigen
Inhoud van gegevenssjabloon wijzigen

Voor sommige wijzigingen moet opnieuw worden opgestart:

Nieuwe klassen, code-behind-gebeurtenisverwerkers of wijzigingen in x:Class toevoegen
App.xaml Samengevoegde woordenlijsten wijzigen (soms)
Expressies wijzigen x:Bind die naar nieuwe eigenschappen verwijzen

Wanneer Hot Reload geen wijziging kan toepassen, wordt op de werkbalk een melding weergegeven. Start de app opnieuw op om deze wijzigingen op te halen.

Zie XAML-Hot Reload voor meer informatie.

Stap 3: Visuele boomstructuur en eigenschappen inspecteren

Open het venster Live Visual Tree (Debug>Windows>Live Visual Tree). In dit venster ziet u alle elementen in de UI-boom van uw actieve toepassing, geordend volgens hun ouder-kindrelaties.

Elementen visueel selecteren

Schakel op de werkbalk Live Visual TreeElement in de actieve toepassing selecteren in (de richtkruisknop).
Klik op een willekeurig element in de actieve app — de boomstructuur navigeert naar dat element en de Live Property Explorer toont de eigenschappen.

Dit is het runtime-equivalent van het klikken op een element op een ontwerpoppervlak, behalve dat het precies weergeeft wat uw app weergeeft, inclusief elementen die dynamisch in code zijn gemaakt.

Eigenschappen tijdens runtime bewerken

In Live Property Explorer kunt u eigenschapswaarden in realtime wijzigen. Voorbeeld:

Wijzig de Margin afstand om de afstand aan te passen en bekijk het effect onmiddellijk.
Stel Visibility in op Collapsed om te testen wat er gebeurt als een element verborgen is.
Pas Width of Height aan om responsieve lay-outs te testen.

Deze runtimebewerkingen worden niet weer opgeslagen in uw XAML-bestand. Ze zijn bedoeld voor experimenten. Zodra u de gewenste waarden hebt gevonden, typt u deze in uw .xaml bestand (waarbij Hot Reload ze ophaalt en permanent maakt).

Stap 4: XAML Live Preview gebruiken

Met XAML Live Preview wordt uw actieve app weergegeven op een tabblad Visual Studio, zodat u de app en uw XAML-bron naast elkaar kunt weergeven zonder tussen vensters te schakelen.

Ga als volgt te werk om het te openen: foutopsporing>Windows>XAML Live Preview.

Dit is vooral handig bij setups met één monitor waarbij Alt-Tabbing tussen de app en Visual Studio onhandig is.

Zie XAML Live Preview voor meer informatie.

Aanbevolen: Maak een UI-testpagina

Maak een speciale speeltuinpagina in uw project: een pagina waarvan u alleen kunt experimenteren met besturingselementen, stijlen en indelingen. Dit geeft je een kladblok dat altijd klaarstaat voor visuele iteratie en dat vooral goed samenwerkt met de bovenstaande runtime-hulpprogramma’s.

De speeltuin instellen

Klik met de rechtermuisknop op uw project in Solution Explorer en selecteerNieuwe item>lege pagina (WinUI 3)toevoegen>. Geef deze de naam UIPlayground.xaml.

Voeg in UIPlayground.xaml een ScrollViewer toe met secties voor elk besturingselement of patroon dat u wilt proberen:

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

Maak de speeltuin gemakkelijk te bereiken. Stel deze tijdens de ontwikkeling in als de opstartpagina in App.xaml.cs:
```
// In App.xaml.cs, OnLaunched method — swap in for quick playground access:
// rootFrame.Navigate(typeof(UIPlayground));
```
Als uw app gebruikmaakt van een NavigationView, voegt u een menu-item toe dat alleen wordt weergegeven in builds voor foutopsporing. Bijvoorbeeld in de achterliggende code van uw hoofdvenster:
```
// In your main window or shell page constructor, after InitializeComponent():
#if DEBUG
    NavView.MenuItems.Add(new NavigationViewItem
    {
        Content = "UI Playground",
        Tag = typeof(UIPlayground)
    });
#endif
```
waar NavView de x:Name van je NavigationView-besturingselement is.

De speeltuin gebruiken

Druk op F5 om de app te starten en naar de pagina speeltuin te gaan.
Open het .xaml bestand naast de actieve app (of gebruik XAML Live Preview).
Besturingselementen toevoegen of wijzigen in de XAML-editor — Hot Reload past wijzigingen direct toe.
Gebruik Live Visual Tree om op weergegeven besturingselementen te klikken en de werkelijke indelingswaarden in Live Property Explorer te controleren.
Wanneer u tevreden bent met het uiterlijk van een besturingselement, kopieert u de XAML naar uw echte pagina.

Met dit patroon krijgt u een cyclus 'type-reload-inspect' en omdat er echte code wordt uitgevoerd, ziet u echte gegevenssjablonen, echte stijlen en echte animaties.

Ontwerptijd- en uitvoeringstijdbenaderingen vergelijken

Hier ziet u hoe algemene ontwerptaken voor de gebruikersinterface worden toegewezen aan de runtimehulpprogramma's:

Task	Runtime-hulpprogramma
Een besturingselement toevoegen op de pagina	Typ het XAML-element: IntelliSense voltooit de tag en de vereiste eigenschappen
Bekijk een voorbeeld van het besturingselement	Bekijk deze live in de actieve app via Hot Reload
Selecteer een element dat u wilt inspecteren	Gebruik Live Visual Tree>Element selecteren (crosshair)
Eigenschappen weergeven of bewerken	Live Property Explorer gebruiken
Grootte of positie aanpassen	Bewerken`Width`, `HeightMargin` in XAML of in Live Property Explorer

Tips voor een efficiënte werkstroom

Gebruik de WinUI 3 Gallery-app. Installeer het vanuit de Microsoft Store of bouw het vanuit GitHub. Het toont elk WinUI 3-besturingselement met interactieve voorbeelden en XAML die gereed zijn voor kopiëren. U kunt deze zien als een visuele catalogus die u kunt bladeren voordat u XAML schrijft.
Houd uw speeltuinpagina open. Behandel het als een levende stijlgids voor uw app.
Gebruiken d:DesignHeight en d:DesignWidth. Zelfs zonder de ontwerpfunctie kunnen deze kenmerken IntelliSense helpen en uw pagina's consistent houden wanneer u ze opent in de editor.
Combineren met het venster XAML-bindingsfouten. Open deze vanuit Foutopsporing>Windows>XAML-bindingsfouten om bindingsfouten te ondervangen die de ontwerper u nooit zou laten zien.
Gebruik de community-toolkit. De Windows Community Toolkit biedt besturingselementen en helpers die de hoeveelheid lay-out die u nodig hebt voor handcode verminderen.

Feedback

Is deze pagina nuttig?

Last updated on 2026-09-10