Nástroje pro návrh modulu runtime XAML pro WinUI 3

Visual Studio obsahuje sadu nástrojů modulu runtime, které umožňují navrhovat, iterovat a kontrolovat xaml WinUI 3, když je aplikace spuštěná. Společně vám poskytují rychlý cyklus edit-reload-inspect, který zobrazí skutečné uživatelské rozhraní – skutečné styly, skutečné datové šablony, skutečné animace – nikoli statické přiblížení.

Note

Návrhář XAML Visual Studio (karta Návrh s přetažením) v současné době nepodporuje projekty WinUI 3. Pokud jste otevřeli .xaml soubor a viděli jste jenom editor XML, instalace není poškozená – návrhář není k dispozici pro WinUI 3. Žádost o funkci se sleduje na Developer Community: Přidání podpory Návrháře XAML pro desktopové aplikace WinUI 3. Základní informace o technickém úsilí najdete v diskuzi o WindowsAppSDK č. 4710.

Nástroje modulu runtime popsané v tomto článku jsou cenné bez ohledu na to, jestli je návrhář dostupný. Tento článek vás provede pracovním postupem.

Co budete používat

nástroj Jak funguje Jak ho otevřít
opětovné načítání XAML za provozu Přenese změny XAML do spuštěné aplikace bez nutnosti restartování. Automatické – úprava libovolného .xaml souboru při ladění
Živý vizuální strom Zobrazuje úplný strom prvků za běhu a umožňuje vybírat prvky v aplikaci. Ladění>Windows>Živý strom vizuálů
Live Property Explorer Zobrazí a umožní upravit každou vlastnost vybraného prvku za běhu. Ladění>Windows>Průzkumník živých vlastností
Dynamický náhled XAML Vykreslí spuštěnou aplikaci uvnitř Visual Studio, abyste mohli zkontrolovat bez přepínání oken. Ladění>Windows>živý náhled XAML

Tip

Ukotvěte Live Visual Tree a Live Property Explorer vedle sebe. Společně vám poskytnou podrobný náhled pro kontrolu, který zobrazuje skutečné hodnoty za běhu.

Prerequisites

Krok 1: Spuštění aplikace v ladicím programu

Stiskněte F5 (nebo Ladění>Spustit ladění). XAML Opětovné načítání za provozu se automaticky aktivuje při připojení ladicího programu.

Panel nástrojů XAML Opětovné načítání za provozu se zobrazí v překryvné vrstvě aplikace. Pokud ho nevidíte, ověřte, že je nastavení povolené:

  1. Přejděte na Nástroje>Možnosti>Ladění>XAML Opětovné načítání za provozu.
  2. Ověřte, že je zaškrtnuté políčko Povolit Opětovné načítání za provozu XAML.

Important

XAML Opětovné načítání za provozu vyžaduje debugger. Spuštění bez ladění (Ctrl+F5) vypne funkce Opětovné načítání za provozu, Live Visual Tree a Live Property Explorer.

Krok 2: Úprava XAML a okamžité zobrazení změn

Když máte spuštěnou aplikaci, přepněte do libovolného .xaml souboru v editoru a proveďte změnu – například změňte Background barvu nebo přidejte novou Button. Spuštěná aplikace se aktualizuje během sekundy nebo dvou bez restartování.

Co Opětovné načítání za provozu může a nemůže dělat

Opětovné načítání za provozu zpracovává nejběžnější úpravy:

  • Přidání, odebrání nebo změna pořadí prvků
  • Změna hodnot vlastností (barvy, okraje, text, velikosti)
  • Přidání nebo úprava stylů a slovníků zdrojů
  • Změna obsahu šablony dat

Některé změny vyžadují restartování:

  • Přidání nových tříd, obslužných rutin událostí v souboru code-behind nebo změn v x:Class
  • Úprava App.xaml sloučených slovníků (někdy)
  • Změna x:Bind výrazů, které odkazují na nové vlastnosti

Když funkce Opětovné načítání za provozu nemůže použít změnu, na panelu nástrojů se zobrazí oznámení. Stačí restartovat aplikaci, aby se tyto změny projevily.

Další informace najdete v tématu Opětovné načítání za provozu XAML.

Krok 3: Kontrola vizuálního stromu a vlastností

Otevřete okno živého vizuálního stromu (Ladění>Windows>Live Visual Tree). V tomto okně se zobrazí všechny prvky ve stromu uživatelského rozhraní spuštěné aplikace uspořádané podle vztahů nadřazenosti a podřízenosti.

Vizuální výběr prvků

  1. Na panelu nástrojů Aktivní vizuální strom povolte možnost Vybrat prvek ve spuštěné aplikaci (tlačítko se zaměřovačem).
  2. Klikněte na libovolný prvek spuštěné aplikace – strom přejde na tento prvek a Průzkumník živých vlastností zobrazí jeho vlastnosti.

Toto je obdoba kliknutí na prvek na návrhové ploše za běhu aplikace, jen s tím rozdílem, že přesně odráží to, co vaše aplikace skutečně vykresluje, včetně prvků dynamicky vytvářených v kódu.

Upravit vlastnosti za běhu

V Live Property Exploreru můžete změnit hodnoty vlastností v reálném čase. Příklady:

  • Změňte Margin, upravte rozestupy a výsledek uvidíte okamžitě.
  • Nastavte Visibility na Collapsed pro otestování, co se stane, když je prvek skrytý.
  • Upravte Width nebo Height, abyste otestovali responzivní rozvržení.

Tyto úpravy modulu runtime se neuloží zpět do souboru XAML – jsou určené k experimentování. Jakmile najdete hodnoty, které se vám líbí, zadejte je do .xaml souboru (kde je Opětovné načítání za provozu vybere a vytvoří je trvalým).

Krok 4: Použití dynamického náhledu XAML

Dynamický náhled XAML vykresluje spuštěnou aplikaci na kartě Visual Studio, abyste mohli zobrazit aplikaci a zdroj XAML vedle sebe bez přepínání oken.

Otevřete ho: Ladění>Windows>XAML Live Preview.

To je obzvlášť užitečné na sestavách s jedním monitorem, kde je přepínání pomocí Alt+Tab mezi aplikací a Visual Studiem nepraktické.

Další informace najdete v tématu Dynamický náhled XAML.

Doporučeno: Vytvořte stránku pro testování uživatelského rozhraní

Vytvořte ve svém projektu vyhrazenou stránku dětského hřiště – stránku, jejíž jediným účelem je umožnit experimentovat s ovládacími prvky, styly a rozloženími. Získáte tak pracovní plochu, která je vždy připravená na vizuální iterace a obzvlášť dobře funguje s výše uvedenými runtime nástroji.

Nastavení dětského hřiště

  1. Klikněte pravým tlačítkem myši na projekt v Průzkumník řešení a vyberte Přidat>Nová položka>Prázdná stránka (WinUI 3). Pojmenujte ho UIPlayground.xaml.

  2. V UIPlayground.xaml aplikaci přidejte ScrollViewer se sekcemi pro každý ovládací prvek nebo vzor, který chcete vyzkoušet:

    <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. Usnadnit přístup k dětskému hřišti. Během vývoje ji nastavte jako úvodní stránku v App.xaml.cs:

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

    Nebo pokud vaše aplikace používá NavigationView, přidejte položku nabídky, která se zobrazí pouze v ladicích sestaveních. Například v souboru code-behind vašeho hlavního okna:

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

    kde NavView je x:Name vašeho NavigationView ovládacího prvku.

Jak používat hřiště

  1. Stisknutím klávesy F5 spusťte aplikaci a přejděte na stránku dětského hřiště.
  2. .xaml Otevřete soubor vedle spuštěné aplikace (nebo použijte XAML Live Preview).
  3. Přidání nebo úprava ovládacích prvků v editoru XAML – Opětovné načítání za provozu okamžitě odešle změny.
  4. Pomocí dynamického vizuálního stromu klikněte na vykreslované ovládací prvky a zkontrolujte jejich skutečné hodnoty rozložení v Live Property Exploreru.
  5. Až budete spokojení se vzhledem ovládacího prvku, zkopírujte XAML na skutečnou stránku.

Tento vzor vám poskytuje cyklus „napsat–znovu načíst–zkontrolovat“ — a protože spouští skutečný kód, uvidíte skutečné datové šablony, skutečné styly a skutečné animace.

Porovnání přístupů v době návrhu a za běhu

Zde je, jak se běžné úlohy návrhu uživatelského rozhraní přiřazují k nástrojům běhového prostředí:

Task Nástroj runtime
Přidání ovládacího prvku na stránku Zadejte element XAML – IntelliSense dokončí značku a požadované vlastnosti.
Zobrazení náhledu ovládacího prvku Podívejte se na to naživo ve spuštěné aplikaci pomocí Opětovné načítání za provozu
Výběr prvku, který chcete zkontrolovat Použijte Live Visual Tree>Vybrat prvek (zaměřovač)
Zobrazení nebo úprava vlastností Použití Live Property Exploreru
Úprava velikosti nebo pozice Upravte Width, Height, Margin v jazyce XAML nebo v Průzkumníku živých vlastností

Tipy pro efektivní pracovní postup

  • Použijte aplikaci Galerie WinUI 3. Nainstalujte ho z Microsoft Store nebo ho sestavte z GitHub. Zobrazuje každý ovládací prvek WinUI 3 s interaktivními příklady a xaml připravenými ke kopírování. Představte si ho jako vizuální katalog, který si můžete projít před zápisem XAML.
  • Nechte stránku dětského hřiště otevřenou. Berte to jako živý stylový manuál pro svou aplikaci.
  • Použijte d:DesignHeight a d:DesignWidth. I bez návrháře tyto atributy pomáhají technologii IntelliSense a při otevření v editoru zachovávají konzistentní velikost stránek.
  • Sloučit s oknem Selhání datových vazeb XAML. Otevřete jej v nabídce Ladění>Windows>Selhání vazeb XAML, abyste zachytili chyby vazeb, které by vám návrhář nikdy nezobrazil.
  • Použijte komunitní sadu nástrojů. Sada Windows Community Toolkit poskytuje ovládací prvky a pomocné rutiny, které snižují množství rozložení, které potřebujete k ručnímu psaní kódu.

Související obsah

  • Last updated on