Xaml Live Preview: Zachycení a úprava uživatelského rozhraní desktopové aplikace

Ve službě XAML Live Preview můžete zachytit uživatelské rozhraní (UI) desktopové aplikace a přenést ho do ukotveného okna v sadě Visual Studio, což usnadňuje použití XAML Hot Reload ke změně aplikace a následnému zobrazení těchto změn v reálném čase při jejich provádění.

Animace, která zobrazuje dynamický náhled XAML v akci

Okno dynamického náhledu XAML

Během ladění je k dispozici okno dynamického náhledu XAML. Otevřete ho tak, že přejdete na Ladění>Windows>XAML Live Preview.

Počínaje verzí 17.14 Visual Studio 2022 jsou okamžité náhledy XAML a XAML Hot Reload dostupné při návrhu v aplikacích .NET MAUI, a nejen během ladicí relace. Podporují se také zařízení a emulátory Androidu.

Snímek obrazovky možnosti dynamického náhledu XAML z panelu nabídky Ladění.

Nebo na panelu nástrojů aplikace vyberte tlačítko Zobrazit v dynamickém náhledu XAML .

Snímek obrazovky s možností Dynamický náhled XAML z panelu nástrojů aplikace

Snímek obrazovky s možností Dynamický náhled XAML z panelu nástrojů aplikace

Posouvání a přiblížení

Kromě posouvání pomocí posuvníků můžete také použít následující interakce:

  • Kolečko myši, svislé i vodorovné (pokud ho myš podporuje).
  • Posouvání touchpadu dvěma prsty, svisle i vodorovně.
  • Stiskněte klávesu Ctrl spárovanou s akcí přetažení myší.

Pokud jde o přiblížení, můžete také použít následující interakce:

  • Tlačítka Přiblížit nebo oddálit v levém dolním rohu
  • Klávesová zkratka ctrl+plus (+) nebo Ctrl+minus (-) stiskněte, pokud chcete použít klávesnici.
  • Klávesa Ctrl stisknutá s akcí kolečka myši nebo šipka pro přiblížení akce pomocí touchpadu Dalším bonusem při používání myši je udržování oblasti řízení.

Animace akcí posouvání a přiblížení v dynamickém náhledu XAML

Výběr elementu

Výběr elementu v dynamickém náhledu XAML je podobný výběru ve spuštěné aplikaci. Umožňuje najít prvky ve stromu živého vizuálu nebo ve zdrojovém kódu XAML.

Animace akce výběru elementu v dynamickém náhledu XAML

Výběr prvku je řízen prvními dvěma tlačítky panelu nástrojů (zleva doprava).

Snímek obrazovky s tlačítky panelu nástrojů Dynamický náhled XAML pro výběr elementu

Tlačítka panelu nástrojů vytvářejí následující akce:

  • Zobrazit informace o prvku během výběru je přepínací tlačítko, které řídí zobrazení velikosti, barvy a písma informace o prvku pod myší.
  • Show Just My XAML je přepínací tlačítko, které ovládá, které prvky se mají zvýraznit: buď všechny, nebo pouze ty prvky, pro které je ve řešení dostupný zdrojový XAML. Toto chování je stejné jako v živém vizuálním stromu.

Výběr prvků je řízen prvními čtyřmi tlačítky panelu nástrojů (zleva doprava).

Snímek obrazovky s tlačítky panelu nástrojů Dynamický náhled XAML pro výběr elementu

Tlačítka panelu nástrojů vytvářejí následující akce:

  • Výběr elementu spustí akci výběru elementu; Jinými slovy, zvýrazňuje prvky při přesouvání myši na obsah aplikace v XAML Live Preview. Když kliknete na prvek, vybere se v dynamickém vizuálním stromu. Přejde také ke zdroji, pokud je povolený náhled vybraného elementu a zdrojový kód XAML je k dispozici. Toto chování je stejné jako v živém vizuálním stromu.
  • Zobrazit informace o prvku během výběru je přepínací tlačítko, které řídí zobrazení velikosti, barvy a písma informace o prvku pod myší.
  • Just My XAML je přepínací tlačítko, které řídí, které prvky se mají zvýraznit: všechny nebo jenom ty prvky se zdrojovým XAML dostupným v řešení. Toto chování je stejné jako v živém vizuálním stromu.
  • Náhled vybrané položky je přepínací tlačítko, které řídí navigaci na zdrojový XAML, když je vybrán prvek. Ve výchozím nastavení je vypnutý. Toto chování je stejné jako v živém vizuálním stromu.

Vládci

Pravítka pomáhají zarovnat prvky v aplikaci. Zobrazují vzdálenost v jednotkách aplikace k předchozímu pravítku. Tímto způsobem pomáhají ověřit vzdálenosti mezi různými částmi aplikace.

A animace pravítka v akci.

Druhá skupina tlačítek panelu nástrojů řídí pravítka následujícím způsobem (zleva doprava):

Snímek obrazovky druhé skupiny tlačítek na panelu nástrojů pravítek ve funkci Live Preview XAML.

  • Vyberte barvu pravítka. Změní barvu pravítek.
  • Přidejte svislé pravítko. Přidá jedno svislé pravítko. Pokud na toto tlačítko kliknete několikrát v řádku, umístí se nová pravítka tak, aby nepřekrývaly stávající pravítka.
  • Přidejte vodorovné pravítko. Přidá jedno vodorovné pravítko, podobně jako svislé pravítko.
  • Odeberte všechna pravítka. Odebere všechna pravítka najednou.
  • Přepnutí viditelnosti pravítka Skryje nebo zobrazí všechna pravítka jediným kliknutím.

Snímek obrazovky druhé skupiny tlačítek na panelu nástrojů pravítek ve funkci Live Preview XAML.

  • Přidejte svislé pravítko. Přidá jedno svislé pravítko. Pokud na toto tlačítko kliknete několikrát v řádku, umístí se nová pravítka tak, aby nepřekrývaly stávající pravítka.
  • Přidejte vodorovné pravítko. Přidá jedno vodorovné pravítko, podobně jako svislé pravítko.
  • Odeberte všechna pravítka. Odebere všechna pravítka najednou.
  • Vyberte barvu pravítka. Změní barvu pravítek.
  • Přepnutí viditelnosti pravítka Skryje nebo zobrazí všechna pravítka jediným kliknutím.

Pravítka jsou kompatibilní s klávesnicí. Můžete kolem nich přejít pomocí klávesy Tab. Pomocí kláves se šipkami můžete přesouvat pravítka o jeden pixel najednou nebo je můžete přesouvat o 10 jednotek aplikace současně stisknutím kombinace kláves Ctrl . Klávesa Del odstraní aktuálně vybrané pravítko. Pravítko můžete odstranit také myší tak, že vyberete tlačítko Odstranit pravítko u popisku.

Při použití výběru elementu můžete také přidat pravítka kolem elementu. Kliknutí pravým tlačítkem umožňuje přidat svislá pravítka. Pokud chcete přidat vodorovná pravítka, vyberte a podržte klávesu Shift a klikněte pravým tlačítkem myši.

A animaci toho, jak můžete přidat pravítka do osnovy obrázku v dynamickém náhledu XAML.

Aplikace s více okny

Pokud má vaše aplikace více oken, můžete zvolit, které okno se má zobrazit pomocí pole se seznamem Okno. Nebo použijte tlačítko Zobrazit v dynamickém náhledu XAML na panelu nástrojů aplikace, které je v okně, ve kterém chcete zobrazit náhled.

Animace funkce aplikace s více okny v dynamickém náhledu XAML

Podporované platformy

Počáteční verze sady Visual Studio 2022 podporuje následující platformy a scénáře ladění.

Platforma Tip k výběru elementů a informací Vládci
WPF (Windows Presentation Foundation) Ano Ano
UPW Ano Ano
Desktopová verze WinUI3 Ano Ano
.NET MAUI Ano Ano
Xamarin 5.0+ (emulátor Androidu) Ne Ano (px*)

Poznámka:

V předchozí tabulce označuje (px*) pravítka, která se zobrazují v pixelech; všechny ostatní platformy zobrazují informace v jednotkách platformy, které závisí na DPI monitoru.

Omezení

Dynamický náhled XAML funguje tak, že několikrát zachytí snímek obrazovky aplikace a používá dostupná rozhraní API, jako je PrintWindow. Podléhá následujícím omezením:

  • Pokud je část okna aplikace mimo obrazovku, pravděpodobně se neprojeví změny při živém načítání XAML.
  • Okno se může odhlásit ze zachytávání snímků obrazovky ( a stát se nedostupným pro dynamický náhled XAML) pomocí SetWindowDisplayAffinity s WDA_EXCLUDEFROMCAPTURE nebo DwmSetWindowAttribute s DWMWA_CLOAK.

Další kroky

Přečtěte si další informace o opětovném načítání XAML za provozu, které úzce spáruje s dynamickým náhledem XAML.

Související obsah

Poznámky k verzi aplikace Visual Studio 2022

  • Last updated on