Narzędzia projektowe środowiska uruchomieniowego XAML dla interfejsu WinUI 3

Visual Studio zawiera zestaw narzędzi środowiska uruchomieniowego, które umożliwiają projektowanie, iterowanie i sprawdzanie kodu XAML winUI 3 podczas działania aplikacji. Stosowane razem zapewniają szybki cykl edycji, przeładowania i inspekcji, który pokazuje prawdziwy interfejs użytkownika — prawdziwe style, prawdziwe szablony danych, prawdziwe animacje — a nie statyczną namiastkę.

Note

Program Visual Studio Projektant XAML (karta Projektowanie z funkcją przeciągania i upuszczania) obecnie nie obsługuje projektów WinUI 3. Jeśli otworzysz plik .xaml i zobaczysz tylko edytor XML, z instalacją wszystko jest w porządku — widok projektanta nie jest dostępny w WinUI 3. Prośba o dodanie funkcji jest śledzona w witrynie Developer Community: Dodanie obsługi projektanta XAML dla aplikacji klasycznych WinUI 3. Aby uzyskać podstawowe informacje o pracach inżynieryjnych, zobacz dyskusję WindowsAppSDK nr 4710.

Narzędzia środowiska uruchomieniowego opisane w tym artykule są wartościowe niezależnie od tego, czy projektant jest dostępny, czy nie. W tym artykule przedstawiono przepływ pracy.

Czego użyjesz

Narzędzie Do czego służy Jak go otworzyć
Szybkie przeładowanie XAML Wprowadza zmiany XAML do działającej aplikacji bez konieczności ponownego uruchamiania Automatyczne — edytowanie dowolnego .xaml pliku podczas debugowania
Dynamiczne drzewo wizualne Wyświetla drzewo elementów pełnego środowiska uruchomieniowego i umożliwia wybranie elementów w aplikacji Debugowanie>Windows>Drzewo wizualne na żywo
Eksplorator właściwości na żywo Wyświetla i umożliwia edytowanie każdej właściwości w wybranym elemecie w czasie wykonywania Debug>Windows>Eksplorator właściwości na żywo
Podgląd na żywo XAML Renderuje uruchomioną aplikację wewnątrz Visual Studio, aby można było sprawdzić bez przełączania okien Debugowanie>Windows>Podgląd XAML na żywo

Tip

Dock Live Visual Tree i Live Property Explorer obok siebie. Razem zapewniają szczegółowy widok inspekcji, który pokazuje rzeczywiste wartości środowiska uruchomieniowego.

Prerequisites

  • Visual Studio 2022 w wersji 17.0 lub nowszej (zawiera funkcje XAML Przeładowywanie na gorąco i Live Visual Tree).
  • Projekt WinUI 3 korzystający z Zestaw SDK do aplikacji systemu Windows. Zobacz Tworzenie i uruchamianie projektu WinUI 3 , aby go utworzyć.
  • Projekt powinien być ukierunkowany na platformę .NET 6 lub nowszą wersję (C#) albo korzystać z C++/WinRT.

Krok 1. Uruchamianie aplikacji w debugerze

Naciśnij klawisz F5 (lub Debuguj>rozpocznij debugowanie). XAML Przeładowywanie na gorąco aktywuje się automatycznie, gdy debuger zostanie dołączony.

Pasek narzędzi XAML Przeładowywanie na gorąco pojawia się na nakładce w aplikacji. Jeśli go nie widzisz, sprawdź, czy ustawienie jest włączone:

  1. Przejdź do pozycji Narzędzia>Opcje>debugowania>Przeładowywanie na gorąco XAML.
  2. Upewnij się, że zaznaczono opcję Włącz Przeładowywanie na gorąco XAML.

Ważna

Przeładowywanie na gorąco XAML wymaga debugera. Uruchamianie bez debugowania (Ctrl+F5) powoduje wyłączenie Przeładowywanie na gorąco, live visual tree i Live Property Explorer.

Krok 2. Edytowanie kodu XAML i natychmiastowe wyświetlanie zmian

Po uruchomieniu aplikacji przejdź w edytorze do dowolnego pliku .xaml i wprowadź zmianę — na przykład zmień kolor Background lub dodaj nowy plik Button. Uruchomiona aplikacja zostanie zaktualizowana w ciągu sekundy lub dwóch bez ponownego uruchomienia.

Co Przeładowywanie na gorąco może i nie może zrobić

Przeładowywanie na gorąco obsługuje najpopularniejsze edycje:

  • Dodawanie, usuwanie lub zmienianie kolejności elementów
  • Zmienianie wartości właściwości (kolory, marginesy, tekst, rozmiary)
  • Dodawanie lub modyfikowanie stylów i słowników zasobów
  • Zmienianie zawartości szablonu danych

Niektóre zmiany wymagają ponownego uruchomienia:

  • Dodawanie nowych klas, procedur obsługi zdarzeń za pomocą kodu lub x:Class zmian
  • Modyfikowanie App.xaml scalonych słowników (czasami)
  • Zmienianie x:Bind wyrażeń odwołujących się do nowych właściwości

Gdy funkcja Przeładowywanie na gorąco nie może zastosować zmiany, na pasku narzędzi jest wyświetlane powiadomienie. Wystarczy ponownie uruchomić aplikację, aby pobrać te zmiany.

Aby uzyskać więcej informacji, zobacz Przeładowywanie na gorąco XAML.

Krok 3: Sprawdź drzewo wizualne i właściwości

Otwórz okno Live Visual Tree (Debug>Windows>Live Visual Tree). To okno pokazuje wszystkie elementy w drzewie interfejsu użytkownika uruchomionej aplikacji, uporządkowane według relacji nadrzędny–podrzędny.

Wizualne wybieranie elementów

  1. Na pasku narzędzi Live Visual Tree (Dynamiczne drzewo wizualne) włącz opcję Wybierz element w uruchomionej aplikacji (przycisk celownika).
  2. Kliknij dowolny element w uruchomionej aplikacji — drzewo przejdzie do tego elementu, a Eksplorator właściwości na żywo wyświetli jego właściwości.

Jest to odpowiednik kliknięcia elementu w obszarze projektowym w czasie wykonywania, z tą różnicą, że dokładnie odzwierciedla to, co renderuje aplikacja, w tym elementy tworzone dynamicznie w kodzie.

Edytuj właściwości w czasie wykonywania

W Eksploratorze właściwości na żywo można zmieniać wartości właściwości w czasie rzeczywistym. Przykład:

  • Zmień wartość , Margin aby dostosować odstępy i natychmiast zobaczyć efekt.
  • Ustaw Visibility na Collapsed, aby sprawdzić, co się stanie, gdy element jest ukryty.
  • Dostosuj Height lub Width, aby przetestować responsywne układy.

Te edycje środowiska uruchomieniowego nie są zapisywane z powrotem do pliku XAML — są przeznaczone do eksperymentowania. Po znalezieniu podobnych wartości wpisz je w .xaml pliku (gdzie Przeładowywanie na gorąco pobiera je i sprawia, że są trwałe).

Krok 4. Używanie podglądu XAML na żywo

Podgląd XAML na żywo renderuje uruchomioną aplikację na karcie Visual Studio, dzięki czemu możesz wyświetlać aplikację i źródło XAML obok siebie bez przełączania okien.

Aby go otworzyć: Debugowanie>Windows>XAML na żywo w wersji zapoznawczej.

Jest to szczególnie przydatne w konfiguracjach z jednym monitorem, w których przełączanie się za pomocą Alt+Tab między aplikacją a Visual Studio jest niewygodne.

Aby uzyskać więcej informacji, zobacz XAML Live Preview.

Zalecane: Utwórz stronę testową interfejsu użytkownika

Utwórz dedykowaną stronę placu zabaw w projekcie — stronę, której jedynym celem jest eksperymentowanie z kontrolkami, stylami i układami. Zapewnia to podstawkę, która jest zawsze gotowa do iteracji wizualnej i jest szczególnie dobrze sparowana z powyższymi narzędziami środowiska uruchomieniowego.

Konfigurowanie placu zabaw

  1. Kliknij prawym przyciskiem myszy swój projekt w Eksplorator rozwiązań i wybierz Dodaj>Nowy element>. Nadaj mu nazwę UIPlayground.xaml.

  2. W UIPlayground.xamlpliku dodaj sekcje ScrollViewer z sekcjami dla każdej kontrolki lub wzorca, który chcesz wypróbować:

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

  3. Spraw, aby plac zabaw był łatwo dostępny. Podczas programowania ustaw ją jako stronę uruchamiania w pliku App.xaml.cs:

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

    Lub jeśli aplikacja używa elementu NavigationView, dodaj element menu, który jest wyświetlany tylko w kompilacjach debugowania. Na przykład w kodzie okna głównego:

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

    gdzie NavView to NavigationView kontrolki x:Name.

Jak korzystać z placu zabaw

  1. Naciśnij klawisz F5 , aby uruchomić aplikację i przejść do strony placu zabaw.
  2. .xaml Otwórz plik obok uruchomionej aplikacji (lub użyj podglądu XAML Na żywo).
  3. Dodaj lub zmodyfikuj formanty w edytorze XAML — funkcja Przeładowywanie na gorąco natychmiast wprowadza zmiany.
  4. Użyj dynamicznego drzewa wizualnego , aby kliknąć renderowane kontrolki i sprawdzić ich rzeczywiste wartości układu w Eksploratorze właściwości live.
  5. Gdy będziesz zadowolony z wyglądu kontrolki, skopiuj kod XAML do docelowej strony.

Ten schemat zapewnia cykl „type-reload-inspect” — a ponieważ uruchamia rzeczywisty kod, widzisz rzeczywiste szablony danych, style i animacje.

Porównywanie metod czasu projektowania i środowiska uruchomieniowego

Poniżej przedstawiono sposób mapowania typowych zadań projektowych interfejsu użytkownika na narzędzia środowiska uruchomieniowego:

Zadanie Narzędzie środowiska uruchomieniowego
Dodawanie kontrolki do strony Wpisz element XAML — funkcja IntelliSense uzupełnia tag i wymagane właściwości
Podgląd kontrolki Zobacz to na żywo w uruchomionej aplikacji dzięki funkcji Przeładowywanie na gorąco
Wybierz element do sprawdzenia Użyj Drzewa wizualnego na żywo>Wybierz element (celownik)
Wyświetlanie lub edytowanie właściwości Użyj Eksploratora właściwości na żywo
Dopasuj rozmiar lub położenie Edytuj Width, Margin, Height w XAML lub w Eksploratorze właściwości na żywo

Porady dotyczące wydajnego przepływu pracy

  • Użyj aplikacji z galerii WinUI 3. Zainstaluj go z Microsoft Store lub skompiluj go z GitHub. Przedstawia każdą kontrolkę WinUI 3 z interaktywnymi przykładami i gotowym do kopiowania językiem XAML. Pomyśl o nim jako wykaz wizualizacji, który można przeglądać przed napisaniem kodu XAML.
  • Pozostaw otwartą stronę środowiska testowego. Traktuj go jak przewodnik stylu życia dla aplikacji.
  • Użyj d:DesignHeight i d:DesignWidth. Nawet bez projektanta te atrybuty wspierają mechanizm IntelliSense i pomagają zachować jednolity rozmiar stron, gdy otwierasz je w edytorze.
  • Połącz z oknem Błędy powiązań XAML. Otwórz to z menu Debug>>, aby wykryć błędy powiązań, których projektant nigdy by nie pokazał.
  • Użyj zestawu narzędzi społeczności. Zestaw narzędzi Windows Community Toolkit udostępnia kontrolki i pomocniki, które zmniejszają ilość układu potrzebnego do ręcznego kodu.

Treści powiązane

  • Last updated on