Samouczek: tworzenie aplikacji Windows przy użyciu GitHub Copilot

W tym samouczku użyjesz GitHub Copilot w trybie agenta, aby utworzyć pełną aplikację WinUI 3 — prostą aplikację do notatek z listą notatek, możliwością dodawania i usuwania wpisów oraz stroną ustawień. Zobaczysz dokładnie, których monitów używać na każdym etapie, oraz jak wtyczka "WinUI 3" i serwer "Learn MCP" utrzymują Copilot w dokładności przez cały czas.

Tworzenie szablonu projektu WinUI 3 z Copilot
Generowanie interfejsu użytkownika XAML przy użyciu Copilot
Dodawanie logiki biznesowej przy użyciu Copilot
Dodawanie powiadomienia Windows przy użyciu serwera Learn MCP
Spakuj aplikację przy użyciu interfejsu wiersza polecenia winapp

Wymagania wstępne

GitHub Copilot skonfigurować przy użyciu wtyczki WinUI 3 i programu Learn MCP Server — zobacz Konfigurowanie GitHub Copilot na potrzeby programowania Windows
Visual Studio 2026 z obciążeniem WinUI do tworzenia aplikacji
winapp CLI zainstalowany (winget install Microsoft.winappcli)

Część 1. Tworzenie szkieletu projektu

Tworzenie projektu WinUI

Utwórz nowy projekt WinUI 3: w Visual Studio wybierz Plik>Nowy>Projekt, filtruj według WinUI i wybierz szablon WinUI Blank App (Packaged) C#. Nadaj projektowi NotesApp nazwę i otwórz go.

Otwórz tryb agenta Copilot i stwórz szkielet struktury

Otwórz panel Copilot Chat w Visual Studio i przejdź do trybu agent. Następnie wprowadź:

"Mam nowy pusty projekt WinUI 3 o nazwie NotesApp. Utwórz architekturę MVVM z następującą strukturą: MainWindow z kontrolką NavigationView, trzema stronami (Notatki, Ulubione, Ustawienia), folderem ViewModels z podstawową klasą ViewModel oraz klasą NotesViewModel, a także folderem Models zawierającym model Note z właściwościami Id, Title, Content i CreatedAt. Użyj narzędzia CommunityToolkit.Mvvm".

Copilot utworzy strukturę folderów, doda odwołanie do pakietu NuGet CommunityToolkit.Mvvm, wygeneruje klasy bazowe i podłączy element NavigationView. Przejrzyj dane wyjściowe — jeśli coś wygląda źle, poproś Copilot, aby poprawić je w tej samej sesji czatu.

Wskazówka

Jeśli Copilot generuje Windows.UI.Xaml przestrzenie nazw zamiast Microsoft.UI.Xaml, niestandardowe instrukcje wtyczki WinUI 3 powinny to wychwycić. Jeśli widzisz ten komunikat, wyświetl następującą instrukcję: "Napraw wszystkie wystąpienia Windows.UI.Xaml — jest to projekt WinUI 3, więc przestrzenie nazw XAML muszą używać Microsoft.UI.Xaml."

Część 2. Tworzenie interfejsu użytkownika

Generowanie strony Notatki

"Wygeneruj kod XAML dla strony Notatek. Element ListView powinien wyświetlać notatki z tytułem i przyciętą zawartością, polem tekstowym i przyciskiem dodawania nowej notatki u dołu oraz przyciskiem Usuń przy każdym elemencie. Powiąż go z elementem NotesViewModel. Użyj kontrolek WinUI 3 i odstępów Fluent Design.

Copilot generuje kod XAML powiązany z twoim Modelem Widoku. Poproś go o dostosowanie stylu lub układu zgodnie z potrzebami — na przykład:

"Ustaw elementy listy za pomocą stylu karty z subtelnym cieniem, podobnie jak przykłady karty w galerii WinUI".

Generowanie strony Ustawienia

Wygeneruj stronę Ustawienia z przełącznikiem dla motywu ciemnego/jasnego oraz przyciskiem „Wyczyść wszystkie notatki” z komunikatem potwierdzającym. Używaj ContentDialog do potwierdzenia — zamiast MessageDialog.

Instrukcje wtyczki WinUI 3 kierują Copilot w kierunku ContentDialog (poprawne podejście WinUI 3) i z dala od przestarzałego MessageDialog.

Część 3. Dodawanie logiki biznesowej

Implementowanie trwałości notatek

"Zaimplementuj trwałość notatek w NotesViewModel przy użyciu pliku System.Text.Json, aby serializować i deserializować kolekcję notatek do pliku w folderze ApplicationData.Current.LocalFolder. Załaduj notatki podczas uruchamiania i zapisuj je za każdym razem, gdy kolekcja ulegnie zmianie".

Copilot generuje logikę ładowania/zapisywania. Poproś go o dodanie obsługi błędów:

"Dodaj blok try/catch wokół operacji na plikach i rejestruj błędy w wyjściu debugowania".

Wdrażanie przełączania motywu

"Zaimplementuj przełącznik motywu w obszarze SettingsViewModel. Po zmianie przełącznika zaktualizuj żądany motyw w głównym oknie aplikacji, używając poprawnego podejścia WinUI 3.

Część 4. Dodawanie powiadomienia Windows

Tożsamość pakietu jest wymagana w przypadku powiadomień Windows. Najpierw skonfiguruj go przy użyciu interfejsu wiersza polecenia winapp:

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

Teraz poproś Copilot o dodanie powiadomienia uruchamianego po zapisaniu notatki:

Dodaj powiadomienie aplikacji Windows z napisem "Uwaga zapisana" i tytułem notatki jako podtytułem, gdy notatka została pomyślnie utrwalona na dysku. Użyj Zestaw SDK do aplikacji systemu Windows AppNotificationManager".

Po połączeniu serwera Learn MCP Copilot może wyszukać bieżący interfejs API AppNotificationBuilder i wygenerować prawidłowy kod powiadomienia. Powinno to tworzyć coś podobnego do:

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

Część 5. Spakuj aplikację

Gdy wszystko będzie gotowe do dystrybucji lub opublikowania w Microsoft Store, utwórz odpowiedni pakiet MSIX:

winapp pack --output ./publish

Generuje podpisany pakiet MSIX gotowy do wczytania bezpośredniego lub zgłoszenia do sklepu. Zaproś Copilot do pomocy w aktualizacji manifestu pakietu:

"Pokaż mi, jak zaktualizować plik Package.appxmanifest, aby ustawić nazwę wyświetlaną, opis i wydawcę na potrzeby przesyłania do sklepu".

Podsumowanie

Utworzono kompletną aplikację notatek WinUI 3 przy użyciu:

tryb agent funkcji Copilot do tworzenia szkieletów, generowania interfejsu użytkownika i logiki biznesowej
wtyczka WinUI 3 aby zachować Copilot na nowoczesnych, poprawnych interfejsach API przez cały czas
Naucz się Serwer MCP aby wyszukać Zestaw SDK do aplikacji systemu Windows interfejsy API powiadomień
Interfejs wiersza polecenia winapp do tożsamości pakietu i tworzenia pakietów MSIX

Opcjonalnie: Dodawanie sztucznej inteligencji na urządzeniu do aplikacji

Aplikacja notatek jest w pełni funkcjonalna — ale możesz ją jeszcze bardziej wykorzystać, dodając funkcję sztucznej inteligencji działającą całkowicie na urządzeniu użytkownika. Usługa Foundry Local sprawia, że jest to proste: uruchamia model językowy lokalnie i uwidacznia interfejs API zgodny z interfejsem OpenAI.

Instalowanie lokalnego rozwiązania Foundry i pobieranie modelu

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

Po uruchomieniu modelu nasłuchuje ono pod adresem http://localhost:5272/openai/v1.

Dodawanie pakietu NuGet

dotnet add package Azure.AI.OpenAI

Dodawanie przycisku "Podsumuj" do strony Notatki

Zapytaj Copilota:

"Dodaj przycisk "Podsumuj" do strony Notatki. Pl-PL: Po kliknięciu, powinna wysłać zawartość wybranej notatki do lokalnego punktu końcowego sztucznej inteligencji w http://localhost:5272/openai/v1 przy użyciu pakietu Azure.AI.OpenAI i wyświetlić podsumowanie w oknie dialogowym ContentDialog. Nazwa modelu to phi-4-mini.

Copilot generuje wywołanie i okno dialogowe AzureOpenAIClient — interfejs API zgodny z OpenAI oznacza, że kod wygląda identycznie jak wywołanie interfejsu API w chmurze, które wskazuje po prostu na localhost:

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}");

Co użytkownik widzi

Brak wymaganego połączenia internetowego. Brak klucza interfejsu API. Model działa na ich komputerze — szybki, prywatny i bezpłatny.