Lernprogramm: Erstellen einer Windows-App mit GitHub Copilot

In diesem Lernprogramm verwenden Sie GitHub Copilot im Agentmodus, um eine vollständige WinUI 3-App zu erstellen – eine einfache notes-App mit einer Liste von Notizen, der Möglichkeit zum Hinzufügen und Löschen von Einträgen und einer Einstellungsseite. Sie werden genau sehen, welche Aufforderungen bei jedem Schritt verwendet werden sollen, und wie das WinUI 3 Plugin und der Learn MCP Server Copilot korrekt halten.

Voraussetzungen

• GitHub Copilot mit dem WinUI 3 Plugin und dem Learn MCP Server einrichten — siehe Einrichten von GitHub Copilot für die Windows-Entwicklung
• Visual Studio 2026 mit der WinUI-Anwendungsentwicklung Workload
• winapp CLI installiert (winget install Microsoft.winappcli)

Teil 1: Erstellen eines Gerüsts für das Projekt

Erstellen des WinUI-Projekts

Erstellen Sie eine neue WinUI 3-project: Wählen Sie in Visual Studio File>New>Project, filtern Sie nach WinUI, und wählen Sie die Vorlage WinUI Blank App (Paket) C#. Benennen Sie das Projekt NotesApp , und öffnen Sie es.

Öffnen Sie den Copilot-Agent-Modus und bauen Sie das Strukturgerüst auf.

Öffnen Sie den bereich Copilot Chat in Visual Studio, und wechseln Sie zum agentmodus. Geben Sie dann Folgendes ein:

"Ich habe ein neues leeres WinUI 3-Projekt namens NotesApp. Richten Sie eine MVVM-Architektur mit der folgenden Struktur ein: ein MainWindow mit einer NavigationView, drei Seiten (Notizen, Favoriten, Einstellungen), einen ViewModels-Ordner mit einer Basis-ViewModel-Klasse und einem NotesViewModel-Ordner sowie einen Ordner "Models" mit einem Notizmodell mit den Eigenschaften "ID", "Title", "Content" und "CreatedAt". Verwenden Sie CommunityToolkit.Mvvm."

Copilot wird die Ordnerstruktur erstellen, die CommunityToolkit.Mvvm NuGet-Paketreferenz hinzufügen, die Basisklassen generieren und die NavigationView einrichten. Überprüfen Sie die Ausgabe – wenn etwas falsch aussieht, bitten Sie Copilot, sie in derselben Chatsitzung zu korrigieren.

Teil 2: Erstellen der Benutzeroberfläche

Erstellen der Notizenseite

"Generieren Sie den XAML-Code für die Notizenseite. Es sollte eine ListView mit Notizen mit Titel und einer abgeschnittenen Inhaltsvorschau, einem Textfeld und einer Schaltfläche unten enthalten, um eine neue Notiz hinzuzufügen, und eine Schaltfläche "Löschen" für jedes Element. Binden Sie es an das NotesViewModel. Verwenden Sie WinUI 3-Steuerelemente und fluent Design-Abstände."

Copilot generiert den XAML-Code, der an Ihr ViewModel gebunden ist. Bitten Sie sie, die Formatierung oder das Layout nach Bedarf anzupassen , z. B.:

"Legen Sie fest, dass die Listenelemente ein Kartenformat mit einem subtilen Schatten verwenden, ähnlich wie die Kartenbeispiele der WinUI-Galerie."

Die Einstellungsseite generieren

"Generieren Sie eine Einstellungsseite mit einem Umschalter für ein dunkles/helles Design und eine Schaltfläche "Alle Notizen löschen" mit einem Bestätigungsdialogfeld. Verwenden Sie ContentDialog für die Bestätigung, nicht MessageDialog.

Die WinUI 3-Plug-In-Anweisungen steuern Copilot in Richtung ContentDialog (der richtige WinUI 3-Ansatz) und weg von der veralteten MessageDialog.

Teil 3: Hinzufügen von Geschäftslogik

Implementieren von Notizpersistenz

"Implementieren Sie die Notizpersistenz in NotesViewModel mithilfe von System.Text.Json, um die Notizensammlung in einer Datei in ApplicationData.Current.LocalFolder zu serialisieren und deserialisieren. Laden Sie Notizen beim Start, und speichern Sie sie, wenn sich die Sammlung ändert."

Copilot generiert die Lade- und Speicherlogik. Bitten Sie sie, fehlerbehandlung hinzuzufügen:

"Fügen Sie "Try/Catch" zu den Dateivorgängen hinzu, und protokollieren Sie Fehler in der Debugausgabe."

Implementierung des Designwechsels

Implementieren Sie den Thema-Schalter in SettingsViewModel. Wenn sich die Umschaltfläche ändert, aktualisieren Sie das RequestedTheme im Hauptfenster der Anwendung mithilfe des richtigen WinUI 3-Ansatzes."

Teil 4: Hinzufügen einer Windows-Benachrichtigung

Die Paketidentität ist für Windows Benachrichtigungen erforderlich. Richten Sie es zunächst mit winapp CLI ein:

winapp create-debug-identity --publisher "CN=NotesApp"

Bitten Sie nun Copilot, eine Benachrichtigung hinzuzufügen, die ausgelöst wird, wenn eine Notiz gespeichert wird:

"Fügen Sie eine Windows App-Benachrichtigung hinzu, die "Notiz gespeichert" mit dem Notiztitel als Untertitel anzeigt, wenn eine Notiz erfolgreich auf dem Datenträger gespeichert wird. Verwenden Sie die Windows App SDK AppNotificationManager."

Wenn der MCP-Server "Learn" verbunden ist, kann Copilot die aktuelle AppNotificationBuilder-API nachschlagen und den richtigen Benachrichtigungscode generieren. Es sollte etwas wie folgt produzieren:

var notification = new AppNotificationBuilder()
    .AddText("Note saved")
    .AddText(note.Title)
    .BuildNotification();
AppNotificationManager.Default.Show(notification);

Teil 5: Verpacken der App

Wenn Sie bereit sind, das Microsoft Store zu verteilen oder zu veröffentlichen, erstellen Sie ein geeignetes MSIX-Paket:

winapp pack --output ./publish

Dadurch wird ein signiertes MSIX-Paket generiert, das für das Querladen oder die Store-Übermittlung bereit ist. Fragen Sie Copilot um Hilfe beim Aktualisieren des Paketmanifests.

"Zeigen Sie mir, wie Sie das Package.appxmanifest aktualisieren, um den Anzeigenamen, die Beschreibung und den Herausgeber für die Store-Übermittlung festzulegen."

Zusammenfassung

Sie haben eine vollständige WinUI 3-Notizen-App mit folgenden erstellt:

• Copilot-Agent modus für Gerüsterstellung, Benutzeroberflächengenerierung und Geschäftslogik
• WinUI 3 Plugin, damit Copilot auf modernen, korrekten APIs bleibt
• Learn MCP Server für das Nachschlagen von Windows App SDK Benachrichtigungs-APIs
• winapp CLI für Paketidentität und MSIX-Verpackung

Optional: Hinzufügen von KI auf dem Gerät zu Ihrer App

Die Notizen-App ist voll funktionsfähig . Sie können sie jedoch weiter ausführen, indem Sie ein KI-Feature hinzufügen, das vollständig auf dem Gerät des Benutzers ausgeführt wird. Foundry Local macht dies einfach: Es führt ein Sprachmodell lokal aus und macht eine openAI-kompatible API verfügbar.

Installieren von Foundry Local und Herunterladen eines Modells

winget install Microsoft.AIFoundry.Local
foundry model run phi-4-mini

Sobald das Modell gestartet wird, hört es auf http://localhost:5272/openai/v1.

Hinzufügen des NuGet-Pakets

dotnet add package Azure.AI.OpenAI

Hinzufügen einer Schaltfläche "Zusammenfassen" zur Notizenseite

Fragen Sie Copilot:

"Fügen Sie der Notizenseite eine Schaltfläche "Zusammenfassen" hinzu. Wenn darauf geklickt wird, sollte der Inhalt der ausgewählten Notiz an einen lokalen KI-Endpunkt bei http://localhost:5272/openai/v1 mithilfe des Azure.AI.OpenAI-Pakets gesendet und die Zusammenfassung in einem ContentDialog angezeigt werden. Der Modellname ist phi-4-mini."

Copilot generiert den aufruf und das Dialogfeld AzureOpenAIClient – die openAI-kompatible API bedeutet, dass der Code mit einem Cloud-API-Aufruf identisch aussieht, der einfach auf localhost verweist:

var client = new AzureOpenAIClient(
    new Uri("http://localhost:5272/openai/v1"),
    new ApiKeyCredential("foundry-local"));

var completion = await client.GetChatClient("phi-4-mini")
    .CompleteChatAsync($"Summarize this note in 2 sentences: {note.Content}");

Was der Benutzer sieht

Es ist keine Internetverbindung erforderlich. Kein API-Schlüssel. Das Modell läuft auf ihrem PC – schnell, privat und kostenlos.

• Agentische KI-Werkzeuge für die Windows-Entwicklung
• Foundry Local overview – Führen Sie jedes Modell lokal auf Windows
• Phi Silica — NPU-beschleunigte Rückschlüsse auf Copilot+ PCs
• Windows AI-APIs – Übersicht
• Windows-App Development CLI (winapp CLI)
• Windows App SDK-Dokumentation