XAML futtatókörnyezeti tervezőeszközök a WinUI 3-hoz

Visual Studio olyan futtatókörnyezeti eszközöket tartalmaz, amelyekkel megtervezheti, iterálhatja és megvizsgálhatja a WinUI 3 XAML-t, miközben az alkalmazás fut. Együtt használva gyors szerkesztési-újrabetöltési-vizsgálati ciklust biztosítanak, amely a valós felhasználói felületet – valós stílusokat, valós adatsablonokat, valós animációkat – jeleníti meg statikus közelítés helyett.

Note

Az Visual Studio XAML Designer (a húzással történő tervezés lap) jelenleg nem támogatja a WinUI 3-projekteket. Ha megnyitott egy .xaml fájlt, és csak az XML-szerkesztőt látja, a telepítés nem hibás – a tervező nem érhető el a WinUI 3-hoz. A funkciókérés nyomon követhető a következő Developer Community: XAML Designer-támogatás hozzáadása WinUI 3 asztali alkalmazásokhoz. A mérnöki munka hátteréről a WindowsAppSDK 4710-et ismertető vitafórumában olvashat.

A cikkben ismertetett futtatókörnyezeti eszközök értékesek, függetlenül attól, hogy elérhető-e tervező. Ez a cikk végigvezeti a munkafolyamaton.

Mit fog használni?

Eszköz Mire szolgál? A megnyitás menete
XAML gyorstöltési XAML-módosítások leküldése a futó alkalmazásba újraindítás nélkül Automatikus – bármely .xaml fájl szerkesztése hibakeresés közben
Élő vizualizációs fa Megjeleníti a teljes futásidejű elemfát, és lehetővé teszi az elemek kiválasztását az alkalmazásban Hibakeresés>> Windows Vizualizációs fa megjelenítése
Valós idejű tulajdonságböngésző Megjeleníti és lehetővé teszi a kijelölt elem minden tulajdonságának szerkesztését futásidőben Hibakeresés>Windows>Élő tulajdonságböngésző
XAML élő előnézet Megjeleníti a futó alkalmazást a Visual Studio belül, hogy ablakváltás nélkül is megvizsgálhassa Hibakeresés>Windows>XAML élő előnézet

Tip

Rögzítse egymás mellett a Élő vizuális fát és az Élő tulajdonságböngészőt. Ezek együttesen részletes ellenőrzési nézetet biztosítanak, amely a tényleges futásidejű értékeket jeleníti meg.

Prerequisites

  • Visual Studio 2022 17.0-s vagy újabb verziója (XAML-Hot Reload és élő vizualizációs fa).
  • WinUI 3-projekt a Windows App SDK használatával. Lásd : WinUI 3-projekt létrehozása és futtatása a létrehozáshoz.
  • A projektnek a .NET 6 vagy újabb verziót kell céloznia (C#), vagy a C++/WinRT-t kell használnia.

1. lépés: Az alkalmazás indítása a hibakereső alatt

Nyomja meg az F5 billentyűt (vagy Hibakeresés>Hibakeresés indítása). Az XAML Hot Reload automatikusan aktiválódik, amikor a hibakereső kapcsolódik.

Az XAML Hot Reload eszköztár megjelenik az alkalmazáson belüli átfedésen. Ha nem látja, ellenőrizze, hogy engedélyezve van-e a beállítás:

  1. Lépjen a Eszközök>Beállítások>Hibakeresés> menüpontra.
  2. Győződjön meg arról, hogy az XAML-Hot Reload engedélyezése be van jelölve.

Important

Az XAML-Hot Reload a hibakeresőt igényli. A hibakeresés nélküli futtatás (Ctrl+F5) letiltja a Hot Reload, az Élő vizuális fa és az Élő tulajdonságböngésző funkciót.

2. lépés: Az XAML szerkesztése és a módosítások azonnali megtekintése

Ha az alkalmazás fut, váltson a szerkesztő bármely .xaml fájljához, és végezze el a módosítást – például módosítsa a színt Background vagy adjon hozzá egy újat Button. A futó alkalmazás egy-két másodpercen belül frissül, újraindítás nélkül.

Mit tehet Hot Reload és mit nem?

Hot Reload kezeli a leggyakoribb módosításokat:

  • Elemek hozzáadása, eltávolítása vagy átrendezése
  • Tulajdonságértékek (színek, margók, szöveg, méretek) módosítása
  • Stílusok és erőforrás-szótárak hozzáadása vagy módosítása
  • Adatsablon tartalmának módosítása

Egyes módosítások újraindítást igényelnek:

  • Új osztályok, kód mögötti eseménykezelők vagy x:Class módosítások hozzáadása
  • App.xaml Egyesített szótárak módosítása (néha)
  • Új tulajdonságokra hivatkozó kifejezések módosítása x:Bind

Ha Hot Reload nem tud módosítást alkalmazni, az eszköztár értesítést jelenít meg. Csak indítsa újra az alkalmazást a módosítások felvételéhez.

További információ: XAML Hot Reload.

3. lépés: A vizualizációfa és a tulajdonságok vizsgálata

Nyissa meg az Élő vizuális fa ablakot (Hibakeresés>Windows>Élő vizuális fa). Ez az ablak a futó alkalmazás felhasználói felületi fájának minden elemét megjeleníti, szülő-gyermek kapcsolatok szerint rendezve.

Elemek kijelölése vizuálisan

  1. Az Élő vizualizációfa eszköztáron engedélyezze az Elem kijelölése lehetőséget a futó alkalmazásban (a célkereszt gomb).
  2. Kattintson a futó alkalmazás bármely elemére – a fa erre az elemre lép, és az Élő tulajdonságkezelő megjeleníti annak tulajdonságait.

Ez a futtatókörnyezet megfelelője, ha egy tervezőfelületen egy elemre kattint, kivéve, hogy pontosan tükrözi az alkalmazás által megjelenített elemeket, beleértve a kódban dinamikusan létrehozott elemeket is.

Tulajdonságok szerkesztése futásidőben

Az Élő tulajdonságkezelőben valós időben módosíthatja a tulajdonságértékeket. Például:

  • Módosítsa a Margin elemet a térköz beállításához, és azonnal lássa a hatását.
  • Állítsa a(z) Visibility értékét erre: Collapsed, hogy tesztelje, mi történik, ha egy elem rejtve van.
  • A reszponzív elrendezések teszteléséhez módosítsa a(z) Width vagy Height elemet.

Ezeket a futtatókörnyezeti módosításokat a rendszer nem menti vissza az XAML-fájlba – kísérletezéshez. Miután megtalálta a kívánt értékeket, írja be őket a .xaml fájlba (ahol Hot Reload felveszi őket, és állandóvá teszi őket).

4. lépés: Az XAML Live Preview használata

Az XAML Live Preview egy Visual Studio lapon jeleníti meg a futó alkalmazást, így az ablakváltás nélkül egymás mellett tekintheti meg az alkalmazást és az XAML-forrást.

A megnyitáshoz: Hibakeresés>Windows>XAML Live Preview.

Ez különösen olyan egyszeri monitorozási beállítások esetén hasznos, ahol az alkalmazás és a Visual Studio közötti Alt-Tabbing kényelmetlen.

További információ: XAML Live Preview.

Ajánlott: Felhasználói felületi játszótéri oldal létrehozása

Hozzon létre egy dedikált játszótéri lapot a projektben – egy olyan lapot, amelynek egyetlen célja, hogy kísérletezzen vezérlőkkel, stílusokkal és elrendezésekkel. Ez egy olyan vázlatfelületet biztosít, amely mindig készen áll a vizuális iterációra, és különösen jól működik együtt a fenti futásidejű eszközökkel.

A játszótér beállítása

  1. Kattintson a jobb gombbal a projektre a Megoldáskezelő ablakban, majd válassza a Hozzáadás>Új elem>Üres oldal (WinUI 3) lehetőséget. Nevezze el a következőképpen: UIPlayground.xaml.

  2. A(z) UIPlayground.xaml területen adjon hozzá egy ScrollViewer elemet, amely szakaszokat tartalmaz minden kipróbálni kívánt vezérlőhöz vagy mintához:

    <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. A játszótér könnyen megközelíthető. A fejlesztés során állítsa be indítási oldalként a következő helyen App.xaml.cs:

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

    Vagy ha az alkalmazásod NavigationView használ, adj hozzá egy menüelemet, amely csak hibakeresési verziókban jelenik meg. Például a főablak mögötti kódban:

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

    ahol a NavigationView vezérlőelem x:Name-je: NavView

A játszótér használata

  1. Nyomja le az F5 billentyűt az alkalmazás elindításához, és lépjen a játszótér lapjára.
  2. Nyissa meg a .xaml fájlt egymás mellett a futó alkalmazással (vagy használja az XAML Live Preview szolgáltatást).
  3. Vezérlők hozzáadása vagy módosítása az XAML-szerkesztőben – Hot Reload azonnal leküldi a módosításokat.
  4. Az Élő vizualizációs fa használatával kattintson a renderelt vezérlőkre, és vizsgálja meg a tényleges elrendezési értékeket az Élő tulajdonságkezelőben.
  5. Ha elégedett a vezérlő megjelenésével, másolja az XAML-t a valódi oldalára.

Ez a minta egy "type-reload-inspect" ciklust biztosít, és mivel valós kódot futtat, valós adatsablonokat, valós stílusokat és valódi animációkat láthat.

A tervezési idejű és a futásidejű megközelítések összehasonlítása

Így feleltethetők meg a gyakori felhasználóifelület-tervezési feladatok a futásidejű eszközöknek:

tevékenység Futtatási eszköz
Vezérlőelem hozzáadása a laphoz Írja be az XAML-elemet – Az IntelliSense kitölti a címkét és a szükséges tulajdonságokat
A vezérlő előnézete Élőben tekintheti meg a futó alkalmazásban Hot Reload
Jelöljön ki egy vizsgálandó elemet Használja a Live Visual Tree>Elem kijelölése elemet (szálkereszt)
Tulajdonságok megtekintése vagy szerkesztése A Élő tulajdonságböngésző használata
Méret vagy pozíció beállítása Szerkessze a(z) Width, Height, Margin elemet XAML-ben vagy az Élő tulajdonságböngészőben

Tippek a hatékony munkafolyamathoz

  • Használja a WinUI 3 Katalógus alkalmazást. Telepítse a Microsoft Store, vagy hozza létre GitHub. Interaktív példákkal és másolásra kész XAML-vel jeleníti meg az összes WinUI 3 vezérlőt. Tekintsen rá úgy, mint egy vizuális katalógusra, amelyet az XAML írása előtt böngészhet.
  • Tartsa nyitva a játszótér oldalát. Kezelje úgy, mint egy élő stílusú útmutatót az alkalmazásához.
  • Használja d:DesignHeight és d:DesignWidth. A tervező nélkül is ezek az attribútumok segítenek az IntelliSense-nek, és konzisztens méretben tartani az oldalakat, amikor megnyitja őket a szerkesztőben.
  • Kombinálás az XAML-kötéshibák ablakkal. Nyissa meg innen: Hibakeresés>Windows>XAML-kötési hibák, hogy elkaphassa azokat a kötési hibákat, amelyeket a tervezőfelület soha nem mutatott volna meg.
  • Használja a közösségi eszközkészletet. A Windows közösségi eszközkészlet vezérlőket és segédeket biztosít, amelyek csökkentik a kézi kódoláshoz szükséges elrendezés mennyiségét.

Kapcsolódó tartalom

  • Last updated on