Uw eerste WinUI-app bouwen

Bouw uw eerste WinUI-app en zie dat deze tot leven komt op Windows. In deze quickstart gaat u van het instellen van hulpprogramma's naar een werkende app, waarna u wordt begeleid bij uw eerste interface-update.

Voordat u van start gaat

Wat u leert

• Kies en stel uw ontwikkelhulpprogramma's in.
• Een WinUI-app maken en uitvoeren.
• Werk de interface bij en bekijk uw wijziging in de actieve app.

Uw ontwikkelhulpprogramma's kiezen

Volg een van de aanbevolen paden in deze quickstart:

• winapp CLI: Werk vanuit een terminal in uw voorkeurseditor. Deze opdrachtregelwerkstroom werkt ook goed voor agentische codering.
• Visual Studio: gebruik een geïntegreerde ontwikkel- en debugervaring.

Als uw programma's al zijn geïnstalleerd, gaat u naar Uw eerste app maken.

De hulpprogramma's installeren

winapp CLI

1. Schakel de ontwikkelaarsmodus in. U kunt de instellingen openen met instellingen voor ontwikkelaars.

2. Installeer de .NET 10 SDK en de Windows-app Development CLI. Als u WinGet gebruikt, voer uit:

   winget install --id Microsoft.DotNet.SDK.10 --exact --source winget
   winget install --id Microsoft.WinAppCLI --exact --source winget
   

   Sla een installatie over als het vereiste hulpprogramma al is geïnstalleerd.

3. Open een nieuwe terminal zodat de geïnstalleerde opdrachten worden opgehaald en controleer vervolgens de versies:

   dotnet --version
   winapp --version
   

   Gebruik .NET SDK 10 of hoger en winapp CLI 0.6 of hoger voor deze workflow.

Note

winapp CLI bevindt zich in openbare preview. winapp new beheert de WinUI-projectsjablonen, maar installeert de .NET SDK niet. Zie de CLI 0.6-aankondiging voor het nieuwe project en voer opdrachten uit.

Visual Studio

Installeer Visual Studio 2026 met de workload WinUI-app-ontwikkeling en schakel Ontwikkelaarsmodus in.

Installeren met WinGet

Open Windows Terminal en voer deze PowerShell-opdracht uit om de vereiste Visual Studio-workloads te installeren en de Ontwikkelaarsmodus in te schakelen via een WinGet-configuratiebestand:

winget configure -f https://aka.ms/winui-config

U kunt de configuratie en de vereisten ervan raadplegen in de README over de configuratie.

Handmatig instellen

Als u liever handmatig installeert of WinGet niet hebt:

1. Schakel de ontwikkelaarsmodus in.

2. Download en installeer Visual Studio 2026.

3. Selecteer in de Visual Studio Installer de workload WinUI-app-ontwikkeling.

   

Uw eerste app maken

Gebruik de workflow die u hierboven hebt geïnstalleerd om het project aan te maken en te starten.

winapp CLI

Voer de volgende opdracht uit vanuit een map waarin u uw projecten bewaart:

winapp new --name MyWinUIApp --template winui --use-defaults
cd MyWinUIApp
winapp run

winapp new maakt de lege WinUI-app. winapp run bouwt het project en start het project; u hebt geen afzonderlijke build- of pakketregistratieopdracht nodig.

Visual Studio

1. Open Visual Studio en selecteer Een nieuw project maken.

2. Zoek naar WinUI, selecteer de lege WinUI-app (verpakte) C#-sjabloon en selecteer Volgende.

   

3. Noem het project MyWinUIApp en selecteer Aanmaken.

4. Druk op F5 om de app te bouwen en uit te voeren.

Uw app opent een desktopvenster. Ga hieronder verder met een wijziging aanbrengen.

Een wijziging aanbrengen

Houd het project dat u zojuist hebt gemaakt. Voeg een bericht toe aan de huidige interface:

1. Sluit de actieve app. Open MainPage.xaml in de editor. Als uw sjabloon dat bestand niet bevat, open dan in plaats daarvan MainWindow.xaml.

2. Zoek het indelingsvenster met de inhoud van de app. In het huidige lege CLI-sjabloon bevat MainPage.xaml een lege <Grid />. Vervang dat lege raster door:

   <Grid>
       <TextBlock
           Text="Hello, WinUI!"
           HorizontalAlignment="Center"
           VerticalAlignment="Center" />
   </Grid>
   

   Als het deelvenster al besturingselementen bevat, voegt u alleen het TextBlock binnenpaneel toe. Behoud de bestaande besturingselementen, namen en gebeurtenis-handlers. Vervang de omgeving Page of Windowhet kader en de titelbalk niet in MainWindow.xaml.

3. Sla het bestand op. Voer opnieuw uit winapp run vanuit de projectmap of druk op F5 in Visual Studio.

Gefeliciteerd! U hebt uw eerste WinUI-app gemaakt, uitgevoerd en bijgewerkt. In het venster wordt nu Hallo, WinUI weergegeven.

Probleemoplossingsproces

Probleem	Wat u moet controleren
winapp of dotnet wordt niet herkend.	Open de terminal opnieuw na de installatie. Gebruik de versieopdrachten op het tabblad CLI om te controleren of beide hulpprogramma's beschikbaar zijn.
winapp new wordt niet herkend.	Voor deze workflow is winapp CLI 0.6 of nieuwer vereist. Werk de CLI bij met behulp van de installatiemethode die u hebt gekozen.
WinUI-sjablonen worden niet weergegeven in Visual Studio.	Open het Visual Studio-installatieprogramma, selecteer Wijzigen en controleer of de ontwikkelworkload van de WinUI-toepassing is geïnstalleerd. Start Visual Studio daarna opnieuw op.
De build meldt een SDK- of restorefout.	Controleer de vereisten van de geselecteerde werkstroom en de eerste fout in de build-uitvoer. Gebruik Windows App SDK ondersteuning om de versievereisten te controleren voordat u projecteigenschappen wijzigt.
Implementatierapporten dat de ontwikkelaarsmodus is uitgeschakeld.	Schakel Developer Mode in en start daarna de app opnieuw.
Het nieuwe bericht wordt niet weergegeven.	Sla het XAML-bestand op en start het project opnieuw. Voeg in sjablonen met een MainPage.xaml, het bericht toe aan die pagina in plaats van het hostingframe van het venster te vervangen.

Volgende stappen

Een notitie-app maken

In de tutorial Notities wordt een afzonderlijk project WinUINotes gebruikt om pagina's, navigatie, gegevensbinding en lokale opslag uit te leggen. U kunt ook specifieke voorbeelden van besturingselementen vinden in Resources.