Xamarin.Forms Visuelle Livestruktur

  • Artikel

Sie können mit der visuellen Livestruktur eine Echtzeitansicht Ihres ausgeführten XAML-Codes erhalten. Es zeigt eine Strukturansicht der Ui-Elemente Ihrer ausgeführten Xamarin.Forms Anwendung.

Anforderungen

  • Verwenden Sie Xamarin.Forms 5.0 oder höher.
  • Nur Änderungen Hot Reload aktiviert (standardmäßig aktiviert).

Verwendung

Wenn die Anforderungen erfüllt sind, wird beim Debuggen Ihrer App und im Fenster "Live Visual Tree" die Laufzeit-UI-Hierarchie Ihrer App angezeigt.

  • Windows: Standardmäßig wird sie auf der linken Seite der IDE angezeigt. Wenn sie nicht angezeigt wird, verwenden Sie Debug > Windows > Live Visual Tree , um sie anzuzeigen.
  • Mac: Standardmäßig wird es auf der rechten Seite der IDE angezeigt. Wenn sie nicht angezeigt wird, verwenden Sie Die visuelle Windows > Live-Struktur zum Debuggen anzeigen>, um sie anzuzeigen.

Verwenden Sie die Strukturansicht, um die Benutzeroberflächenhierarchie der Laufzeit für Ihre App zu überprüfen, und erweitern/reduzieren Sie Knoten, um sich auf bestimmte Teile der Benutzeroberfläche zu konzentrieren.

Symbolleiste der visuellen Livestruktur

Die Ansicht von XAML-Elementen wird standardmäßig mithilfe des Features "Nur mein XAML" vereinfacht. Schalten Sie die Schaltfläche Show Just My XAML (Nur meine XAML anzeigen ) ganz rechts auf der Symbolleiste der visuellen Livestruktur um, um alle UI-Elemente anzuzeigen. Wenn Sie möchten, können Sie diese Einstellung in den Optionen deaktivieren, um immer alle XAML-Elemente anzuzeigen.

Hinweis

Visual Studio für Mac unterstützt derzeit nicht das Just My XAML-Feature.

Die Struktur des XAML enthält viele Elemente, die Sie wahrscheinlich nicht direkt interessieren, und wenn Sie den Code nicht gut kennen, können Sie in der Struktur nach dem gesuchten Element navigieren. Daher verfügt die visuelle Livestruktur über mehrere Ansätze, mit denen Sie die Benutzeroberfläche der Anwendung verwenden können, um das Element zu finden, das Sie untersuchen möchten.

Select-Element in der ausgeführten Anwendung (derzeit nur für UWP-Apps unterstützt). Sie können diesen Modus aktivieren, wenn Sie die Schaltfläche ganz links auf der Symbolleiste in Visuelle Echtzeitstruktur auswählen. Wenn dieser Modus aktiviert ist, können Sie ein Benutzeroberflächenelement in der Anwendung auswählen, und die visuelle Livestruktur wird automatisch aktualisiert, um den Knoten in der Struktur anzuzeigen, die diesem Element entspricht, und dessen Eigenschaften.

Anzeigen von Layout-Adornern in der ausgeführten Anwendung (derzeit nur für UWP-Apps unterstützt). Sie können diesen Modus aktivieren, wenn Sie die Schaltfläche auswählen, die sich direkt rechts neben der Schaltfläche „Auswahl aktivieren“ befindet. Wenn die Option zum Anzeigen der Layoutadorner aktiviert ist, zeigt das Anwendungsfenster horizontale und vertikale Linien entlang der Grenzen des ausgewählten Objekts an, sodass Sie sehen können, woran es ausgerichtet wird. Außerdem werden Rechtecke zur Darstellung der Ränder angezeigt.

Vorschau für Auswahl. Sie können diesen Modus aktivieren, indem Sie die dritte Schaltfläche von links auf der Live Visual Tree-Symbolleiste auswählen. Dieser Modus zeigt die XAML an, in der das Element deklariert wurde, wenn Sie über Zugriff auf den Quellcode der Anwendung verfügen.