Podgląd na żywo XAML: przechwytywanie i edytowanie interfejsu użytkownika aplikacji desktopowej

Dzięki funkcji Podgląd na Żywo XAML można uchwycić interfejs użytkownika aplikacji pulpitowej (UI) i przenieść go do zadokowanego okna w programie Visual Studio, co ułatwia używanie XAML Hot Reload w celu zmiany aplikacji, a następnie wyświetlania tych zmian w czasie rzeczywistym podczas ich wprowadzania.

Okno podglądu kodu XAML na żywo

Okno XAML Live Preview jest dostępne podczas debugowania. Aby go otworzyć, przejdź do Debug>Windows>XAML Live Preview.

Począwszy od programu Visual Studio 2022 w wersji 17.14, Podgląd na żywo XAML i przeładowywanie kodu XAML na gorąco są dostępne w czasie projektowania w aplikacjach .NET MAUI i nie tylko podczas sesji debugowania. Obsługiwane są również urządzenia z systemem Android i emulatory.

Możesz też wybrać przycisk Pokaż w podglądzie na żywo XAML na pasku narzędzi aplikacji.

Przewijanie i powiększanie

Oprócz przewijania za pomocą pasków przewijania można również użyć następujących interakcji:

• Kółko myszy, zarówno pionowe, jak i poziome (jeśli mysz go obsługuje).
• Przewijanie dwoma palcami na panelu dotykowym, zarówno pionowo, jak i poziomo.
• Naciśnięcie Ctrl sparowane z akcją przeciągania myszy.

Jeśli chodzi o powiększanie, możesz również użyć następujących interakcji:

• Przyciski powiększania/pomniejszania w lewym dolnym rogu.
• Naciśnięcie skrótu klawiaturowego Ctrl+plus (+) lub Ctrl+minus (-), jeśli wolisz używać klawiatury.
• Naciśnięcie klawisza Ctrl w połączeniu z ruchem kółka myszy lub szczypnięcie w celu powiększenia za pomocą touchpadu. Dodatkową zaletą korzystania z myszy jest utrzymanie obszaru kontroli.

Wybór elementów

Wybór elementu w podglądzie na żywo XAML jest podobny do wyboru w uruchomionej aplikacji. Umożliwia ona znajdowanie elementów w dynamicznym drzewie wizualnym lub w źródłowym języku XAML.

Wybór elementów jest kontrolowany przez pierwsze cztery przyciski paska narzędzi (od lewej do prawej).

Przyciski paska narzędzi tworzą następujące akcje:

• Zaznaczenie elementu uruchamia akcję zaznaczenia elementu; innymi słowy, wyróżnia elementy podczas przenoszenia myszy nad zawartością aplikacji w podglądzie na żywo XAML. Po kliknięciu elementu zostanie on wybrany w dynamicznym drzewie wizualnym. Spowoduje to również przejście do źródła, jeśli jest włączony podgląd wybranego elementu , a źródłowy kod XAML jest dostępny. To zachowanie jest takie samo jak w dynamicznym drzewie wizualnym.
• Pokaż informacje o elementach podczas wyboru to przycisk przełącznika, który steruje wyświetlaniem informacji o rozmiarze, kolorze oraz czcionce elementu pod myszą.
• Tylko mój kod XAML to przycisk przełącznika, który kontroluje, które elementy mają być wyróżniane: wszystkie lub tylko te elementy ze źródłowym kodem XAML dostępnym w rozwiązaniu. To zachowanie jest takie samo jak w dynamicznym drzewie wizualnym.
• Podgląd wybranego elementu to przycisk przełącznika, który steruje nawigacją do źródłowego kodu XAML po wybraniu elementu. Domyślnie jest wyłączona. To zachowanie jest takie samo jak w dynamicznym drzewie wizualnym.

Linijki

Linijki pomagają wyrównywać elementy w Twojej aplikacji. Wyświetlają odległość w jednostkach aplikacji od poprzedniej linijki. W ten sposób pomagają zweryfikować odległości między różnymi częściami aplikacji.

Druga grupa przycisków na pasku narzędzi kontroluje miarki w następujący sposób (od lewej do prawej).

• Dodaj liniję pionową. Dodaje pojedynczą linijkę pionową. Kliknięcie tego przycisku kilka razy z rzędu spowoduje umieszczenie nowych linijek tak, aby nie nakładały się na istniejące linijki.
• Dodaj liniję poziomą. Dodaje pojedynczą linijkę poziomą podobną do linijki pionowej.
• Usuń wszystkie linijki. Usuwa wszystkie linijki jednocześnie.
• Wybierz kolor linijki. Zmienia kolor linijek.
• Przełącz widoczność linijki. Ukrywa lub pokazuje wszystkie linijki jednym kliknięciem.

Elementy sterujące są przyjazne dla klawiatury. Możesz je obejść. Możesz użyć klawiszy strzałek, aby przenieść linijki o jeden piksel naraz, lub nacisnąć Ctrl sparowane z klawiszami strzałek, aby przenieść je o 10 jednostek aplikacji naraz. Del usuwa aktualnie wybraną liniję. Możesz również usunąć linijkę za pomocą myszy, wybierając przycisk Usuń linijkę w pobliżu etykiety.

Można również dodawać linijki wokół elementu przy użyciu zaznaczenia elementu. Kliknięcie prawym przyciskiem myszy powoduje dodanie linijek pionowych. Aby dodać linijki poziome, wybierz i przytrzymaj klawisz Shift, klikając prawym przyciskiem myszy.

Aplikacje z wieloma oknami

Jeśli aplikacja ma wiele okien, możesz wybrać, które okno wyświetlić, używając pola kombi. Możesz też użyć przycisku Pokaż w podglądzie na żywo W języku XAML na pasku narzędzi aplikacji, który znajduje się w oknie, w którym chcesz wyświetlić podgląd.

Obsługiwane platformy

Początkowa wersja programu Visual Studio 2022 obsługuje następujące platformy i scenariusze debugowania.

Ograniczenia

Podgląd XAML na żywo działa, przechwytując zrzut ekranu aplikacji kilka razy na sekundę i używa dostępnych interfejsów API, takich jak PrintWindow. Podlega on następującym ograniczeniom:

• Jeśli część okna aplikacji jest poza ekranem, ta część prawdopodobnie nie będzie wyświetlać zmian w XAML Hot Reload.
• Okno może zrezygnować z przechwytywania zrzutów ekranu — i stać się niedostępne dla podglądu na żywo XAML — używając funkcji SetWindowDisplayAffinity z parametrem WDA_EXCLUDEFROMCAPTURE lub DwmSetWindowAttribute z parametrem DWMWA_CLOAK.

Dalsze kroki

Dowiedz się więcej na temat XAML Hot Reload, który ściśle łączy się z wersją zapoznawczą języka XAML na żywo.

Treści powiązane

Informacje o wydaniu programu Visual Studio 2022