XAML-Laufzeitdesigntools für WinUI 3

Visual Studio enthält eine Reihe von Laufzeittools, mit denen Sie Ihre WinUI 3-XAML entwerfen, durchlaufen und prüfen können, während ihre App ausgeführt wird. Zusammen ermöglichen sie Ihnen einen schnellen Ablauf zum Bearbeiten, Neuladen und Prüfen, der Ihre echte Benutzeroberfläche zeigt – echte Styles, echte Datenvorlagen, echte Animationen – statt einer bloßen statischen Näherung.

Note

Der Visual Studio XAML-Designer (die Registerkarte "Entwurf ziehen und ablegen") unterstützt derzeit keine WinUI 3-Projekte. Wenn Sie eine .xaml Datei geöffnet haben und nur den XML-Editor sehen, ist Die Installation nicht fehlerhaft – der Designer ist für WinUI 3 nicht verfügbar. Die Featureanforderung wird auf Entwicklercommunity nachverfolgt: Hinzufügen der XAML-Designerunterstützung für WinUI 3-Desktop-Apps. Hintergrundinformationen zum Technischen Aufwand finden Sie in der WindowsAppSDK-Diskussion #4710.

Die in diesem Artikel beschriebenen Laufzeittools sind hilfreich, unabhängig davon, ob ein Designer verfügbar ist. In diesem Artikel wird der Workflow erläutert.

Was Sie verwenden werden

Tool Was es bewirkt So öffnen Sie es
XAML Hot Reload Überträgt XAML-Änderungen an Ihre laufende App, ohne sie neu zu starten Automatisch – Bearbeiten einer Datei .xaml beim Debuggen
Visuelle Echtzeitstruktur Zeigt die vollständige Laufzeitelementstruktur an und ermöglicht ihnen das Auswählen von Elementen in der App. Debug>Windows>Live Visual Tree
Echtzeit-Eigenschaften-Explorer Zeigt jede Eigenschaft des ausgewählten Elements an und lässt Sie diese zur Laufzeit bearbeiten. Debuggen>WindowsLive-Eigenschaften-Explorer>
XAML-Livevorschau Rendert Ihre ausgeführte App in Visual Studio, sodass Sie ohne Wechseln von Fenstern prüfen können. Debug>Windows>XAML Live Preview

Tip

Docken Sie Live Visual Tree und Live Property Explorer nebeneinander an. Zusammen ergeben sie eine detaillierte Inspektionsansicht, in der tatsächliche Laufzeitwerte angezeigt werden.

Voraussetzungen

  • Visual Studio 2022, Version 17.0 oder höher (XAML-Hot Reload und Live Visual Tree sind enthalten).
  • Ein WinUI 3-Projekt mit dem Windows App SDK. Informationen zum Erstellen eines Projekts finden Sie unter Erstellen und Ausführen eines WinUI 3-Projekts.
  • Ihr Projekt sollte auf .NET 6 oder höher (C#) abzielen oder C++/WinRT verwenden.

Schritt 1: Starten Sie Ihre App im Debugger

Drücken Sie F5 (oder Debuggen>Debugging starten). XAML Hot Reload wird automatisch aktiviert, wenn der Debugger verbunden wird.

Die Symbolleiste XAML Hot Reload wird im In-App-Overlay angezeigt. Wenn sie nicht angezeigt wird, überprüfen Sie, ob die Einstellung aktiviert ist:

  1. Wechseln Sie zu tools Options>>Debugging>XAML Hot Reload.
  2. Vergewissern Sie sich, dass "XAML-Hot Reload aktivieren" aktiviert ist.

Important

Für XAML-Hot Reload ist der Debugger erforderlich. Wird ohne Debugging ausgeführt (STRG+F5) deaktiviert Hot Reload, Live Visual Tree und Live Property Explorer.

Schritt 2: Bearbeiten von XAML und sofortiges Anzeigen von Änderungen

Wenn Ihre App ausgeführt wird, wechseln Sie zu einer beliebigen .xaml Datei im Editor, und nehmen Sie eine Änderung vor , z. B. ändern Sie eine Background Farbe, oder fügen Sie eine neue Buttonhinzu. Die laufende App wird innerhalb von ein oder zwei Sekunden aktualisiert, ohne Neustart.

Was Hot Reload tun kann und was nicht möglich ist

Hot Reload behandelt die am häufigsten verwendeten Bearbeitungen:

  • Hinzufügen, Entfernen oder Neuanordnen von Elementen
  • Ändern von Eigenschaftswerten (Farben, Ränder, Text, Größen)
  • Hinzufügen oder Ändern von Formatvorlagen und Ressourcenwörterbüchern
  • Ändern von Datenvorlageninhalten

Einige Änderungen erfordern einen Neustart:

  • Hinzufügen neuer Klassen, Code-Behind-Ereignishandler oder Änderungen an x:Class
  • Ändern von App.xaml zusammengeführten Wörterbüchern (manchmal)
  • Ändern von x:Bind Ausdrücken, die auf neue Eigenschaften verweisen

Wenn Hot Reload keine Änderung anwenden kann, zeigt die Symbolleiste eine Benachrichtigung an. Starten Sie die App einfach neu, um diese Änderungen aufzunehmen.

Weitere Informationen finden Sie unter XAML-Hot Reload.

Schritt 3: Überprüfen Sie den visuellen Strukturbaum und die Eigenschaften

Öffnen Sie das Fenster Live Visual Tree (Debug>Windows>Live Visual Tree). Dieses Fenster zeigt alle Elemente im UI-Baum Ihrer laufenden App, geordnet nach Eltern-Kind-Beziehungen.

Visuelles Auswählen von Elementen

  1. Aktivieren Sie in der „Live Visual Tree“-Symbolleiste„Element in der laufenden Anwendung auswählen“ (die Fadenkreuzschaltfläche).
  2. Klicken Sie auf ein beliebiges Element in Ihrer ausgeführten App – die Struktur navigiert zu diesem Element, und der Echtzeit-Eigenschaften-Explorer zeigt dessen Eigenschaften an.

Dies ist die Laufzeitentsprechung des Klickens auf ein Element auf einer Entwurfsoberfläche, mit der Ausnahme, dass sie genau widerspiegelt, was Ihre App rendert, einschließlich der elemente, die dynamisch im Code erstellt wurden.

Eigenschaften zur Laufzeit bearbeiten

Im Live-Eigenschafteneditor können Sie Eigenschaftswerte in Echtzeit ändern. Beispiel:

  • Ändern Sie einen Margin Abstand, um den Abstand anzupassen und den Effekt sofort anzuzeigen.
  • Setzen Sie Visibility auf Collapsed, um zu prüfen, was passiert, wenn ein Element ausgeblendet wird.
  • Passen Sie Width oder Height an, um responsive Layouts zu testen.

Diese Laufzeitbearbeitungen werden nicht in Ihrer XAML-Datei gespeichert – sie dienen zum Experimentieren. Sobald Sie Werte gefunden haben, die Ihnen gefallen, geben Sie sie in Ihre .xaml-Datei ein (wo Hot Reload sie übernimmt und dauerhaft speichert).

Schritt 4: Verwenden der XAML-Livevorschau

Xaml Live Preview rendert Ihre ausgeführte App auf einer Visual Studio Registerkarte, sodass Sie die App und Ihre XAML-Quelle nebeneinander anzeigen können, ohne Fenster zu wechseln.

So öffnen Sie sie: Debug>Windows>XAML Live Preview.

Dies ist besonders hilfreich bei Einzelmonitor-Setups, bei denen das Wechseln mit Alt+Tab zwischen der App und Visual Studio unpraktisch ist.

Weitere Informationen finden Sie unter XAML Live Preview.

Empfohlen: Erstellen einer Ui-Playground-Seite

Erstellen Sie eine dedizierte Playground-Seite in Ihrem Projekt – eine Seite, deren einziger Zweck Es ist, mit Steuerelementen, Stilen und Layouts zu experimentieren. Dadurch erhalten Sie ein Scratchpad, das jederzeit für visuelle Iterationen bereit ist und besonders gut mit den oben beschriebenen Laufzeit-Tools harmoniert.

Einrichten des Spielplatzes

  1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf Ihr Projekt, und wählen Sie Hinzufügen>Neues Element>Leere Seite (WinUI 3) aus. Nennen Sie es UIPlayground.xaml.

  2. Fügen Sie in UIPlayground.xaml ein ScrollViewer mit Abschnitten für jedes Steuerelement oder Muster hinzu, das Sie ausprobieren möchten:

    <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. Machen Sie den Spielplatz leicht zu erreichen. Legen Sie sie während der Entwicklung in App.xaml.cs als Startseite fest:

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

    Oder, wenn Ihre App ein NavigationView verwendet, fügen Sie einen Menüpunkt hinzu, der nur in Debug-Builds angezeigt wird. Zum Beispiel im Code-Behind des Hauptfensters:

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

    wobei NavView das x:Name Ihres NavigationView-Steuerelements ist.

So verwenden Sie den Spielplatz

  1. Drücken Sie F5 , um die App zu starten und zur Playground-Seite zu navigieren.
  2. Öffnen Sie die .xaml Datei nebeneinander mit der ausgeführten App (oder verwenden Sie XAML Live Preview).
  3. Steuerelemente im XAML-Editor hinzufügen oder ändern – Hot Reload übernimmt Änderungen sofort.
  4. Verwenden Sie die Live Visual Tree , um auf gerenderte Steuerelemente zu klicken und ihre tatsächlichen Layoutwerte im Live Property Explorer zu überprüfen.
  5. Wenn Sie mit dem Aussehen eines Steuerelements zufrieden sind, kopieren Sie den XAML-Code in Ihre echte Seite.

Mit diesem Muster erhalten Sie einen "Type-reload-inspect"-Zyklus – und da es echten Code ausführt, werden echte Datenvorlagen, echte Stile und echte Animationen angezeigt.

Vergleich von Entwurfszeit- und Laufzeitansätzen

Hier erfahren Sie, wie allgemeine Benutzeroberflächenentwurfsaufgaben den Laufzeittools zugeordnet werden:

Aufgabe Laufzeittool
Hinzufügen eines Steuerelements zur Seite Geben Sie das XAML-Element ein – IntelliSense vervollständigt das Tag und die erforderlichen Eigenschaften.
Vorschau des Steuerelements Erleben Sie es live in der laufenden App über Hot Reload
Auswählen eines zu prüfenden Elements Live Visual Tree>Element auswählen verwenden (Fadenkreuz)
Anzeigen oder Bearbeiten von Eigenschaften Verwenden Sie den Live Property Explorer
Anpassen der Größe oder Position Bearbeiten Sie Width, Height, Margin in XAML oder im Live Property Explorer

Tipps für einen effizienten Workflow

  • Verwenden Sie die WinUI 3 Gallery-App. Installieren Sie sie aus dem Microsoft Store, oder erstellen Sie sie aus GitHub. Es zeigt jedes WinUI 3-Steuerelement mit interaktiven Beispielen und kopierbereiten XAML-Code. Stellen Sie sich dies als visuellen Katalog vor, den Sie durchsuchen können, bevor Sie XAML schreiben.
  • Lassen Sie Ihre Playground-Seite geöffnet. Behandeln Sie es wie einen lebendigen Styleguide für Ihre App.
  • Verwenden Sie d:DesignHeight und d:DesignWidth. Auch ohne den Designer helfen diese Attribute IntelliSense und behalten Ihre Seiten beim Öffnen im Editor eine konsistente Größe bei.
  • Mit dem Fenster für XAML-Bindungsfehler kombinieren. Öffnen Sie es über Debug>Windows>XAML-Bindungsfehler, um Bindungsfehler abzufangen, die der Designer ihnen nie angezeigt hätte.
  • Verwenden Sie das Community-Toolkit. Das Windows Community Toolkit stellt Steuerelemente und Hilfsprogramme bereit, die die Menge des Layouts verringern, das Sie zum Handcode benötigen.

Verwandte Inhalte

  • Last updated on