XAML Canlı Önizleme: Masaüstü uygulaması kullanıcı arabirimini yakalama ve düzenleme

XAML Canlı Önizleme ile bir masaüstü uygulamasının kullanıcı arabirimini (UI) yakalayabilir ve Visual Studio'da yerleşik bir pencereye getirebilirsiniz, bu da XAML Çalışırken Yeniden Yükleme'yi kullanarak uygulamayı değiştirmeyi ve ardından bu değişiklikleri yaparken gerçek zamanlı olarak görüntülemeyi kolaylaştırır.

XAML Canlı Önizleme'yi çalışırken gösteren bir animasyon.

XAML Canlı Önizleme penceresi

XAML Canlı Önizleme penceresi hata ayıklama sırasında kullanılabilir. Bunu açmak için Hata Ayıkla>Pencereler>XAML Canlı Önizleme seçeneğine gidin.

Visual Studio 2022 sürüm 17.14'den başlayarak, XAML Live Preview ve XAML Çalışırken Yeniden Yükleme yalnızca hata ayıklama oturumu sırasında değil .NET MAUI uygulamalarında tasarım zamanında kullanılabilir. Android cihazlar ve öykünücüler de desteklenir.

Hata Ayıklama menü çubuğundan XAML Canlı Önizleme seçeneğinin ekran görüntüsü.

Alternatif olarak, uygulama araç çubuğunda XAML Canlı Önizleme'de Göster düğmesini seçin.

Uygulama araç çubuğundan XAML Canlı Önizleme seçeneğinin ekran görüntüsü.

Uygulama araç çubuğundan XAML Canlı Önizleme seçeneğinin ekran görüntüsü.

Kaydırma ve yakınlaştırma

Kaydırma çubuklarıyla kaydırmanın yanı sıra, aşağıdaki etkileşimleri de kullanabilirsiniz:

  • Hem dikey hem de yatay bir fare tekerleği (fareniz destekliyorsa).
  • Dokunmatik yüzeyde iki parmakla hem dikey hem de yatay kaydırma.
  • Fareyi sürükleme eylemiyle eşleştirilmiş Ctrl tuşuna basma.

Yakınlaştırmaya gelince, aşağıdaki etkileşimleri de kullanabilirsiniz:

  • Sol alt köşedeki Yakınlaştır/uzaklaştır düğmeleri.
  • Klavye kullanmayı tercih ediyorsanız, Ctrl+artı işareti (+) veya Ctrl+eksi işareti (-) klavye kısayoluna basın.
  • Mouse tekerleği hareketiyle veya dokunmatik yüzeyde yakınlaştırmak için kıstırma hareketiyle birleştirilen Ctrl tuşuna basma. Fare kullanmanın ekstra bir avantajı, bir kontrol alanını korumaktır.

XAML Canlı Önizleme'deki kaydırma ve yakınlaştırma eylemlerinin animasyonu.

Eleman seçimi

XAML Canlı Önizleme'deki öğe seçimi, çalışan bir uygulamadaki seçime benzer. Öğeleri Canlı Görsel Ağaç'ta veya kaynak XAML'de bulmanızı sağlar.

XAML Canlı Önizleme'deki öğe seçme eyleminin animasyonu.

Öğe seçimi, ilk iki araç çubuğu düğmesi (soldan sağa) tarafından denetlenmektedir.

Öğe seçimi için XAML Canlı Önizleme araç çubuğu düğmelerinin ekran görüntüsü.

Araç çubuğu düğmeleri aşağıdaki eylemleri oluşturur:

  • Seçim sırasında öğe bilgilerini göster , farenizin altındaki öğeyle ilgili boyut, renk ve yazı tipi bilgilerinin görüntülenmesini kontrol eden bir geçiş düğmesidir.
  • Yalnızca XAML'imi Göster, hangi öğelerin vurgulanacağını denetleyen iki durumlu bir düğmedir: tüm öğeler veya yalnızca çözümde kaynak XAML'i bulunan öğeler. Bu davranış, Canlı Görsel Ağaç'taki davranışla aynıdır.

Öğe seçimi, ilk dört araç çubuğu düğmesi (soldan sağa) tarafından kontrol edilir.

Öğe seçimi için XAML Canlı Önizleme araç çubuğu düğmelerinin ekran görüntüsü.

Araç çubuğu düğmeleri aşağıdaki eylemleri oluşturur:

  • Öğe seçimi , öğe seçimi eylemini başlatır; başka bir deyişle, XAML Canlı Önizleme'de farenizi uygulama içeriğinin üzerine getirdiğinizde öğeleri vurgular. Bir öğeye tıkladığınızda, Canlı Görsel Ağaç'ta seçilir. Ayrıca, Seçili Öğeyi Önizle etkinleştirilmişse ve kaynak XAML kullanılabiliyorsa kaynağa gider. Bu davranış, Canlı Görsel Ağaç'taki davranışla aynıdır.
  • Seçim sırasında öğe bilgilerini göster , farenizin altındaki öğeyle ilgili boyut, renk ve yazı tipi bilgilerinin görüntülenmesini kontrol eden bir geçiş düğmesidir.
  • Yalnızca Benim XAML'im hangi öğelerin vurgulanacağını denetleyen bir açma/kapama düğmesidir: tüm öğeler veya yalnızca çözümde bulunan kaynak XAML olan öğeler. Bu davranış, Canlı Görsel Ağaç'taki davranışla aynıdır.
  • Seçili Öğeyi Önizle , bir öğe seçildiğinde kaynak XAML'ye gezinmeyi kontrol eden bir açma/kapatma düğmesidir. Varsayılan olarak kapalıdır. Bu davranış, Canlı Görsel Ağaç'taki davranışla aynıdır.

Cetveller

Cetveller, uygulamanızdaki öğeleri hizalamanıza yardımcı olur. Uygulama birimlerinde önceki cetvelle aradaki mesafeyi gösterirler. Bu şekilde, uygulamanızın farklı bölümleri arasındaki mesafeleri doğrulamaya yardımcı olurlar.

Ve kılavuzların hareket ederken animasyonu.

Araç çubuğundaki ikinci düğme grubu, cetvelleri aşağıdaki gibi (soldan sağa) yönetir:

XAML Canlı Önizleme'deki ikinci cetvel grubu araç çubuğu düğmelerinin ekran görüntüsü.

  • Cetvel rengini seçin. Cetvellerin rengini değiştirir.
  • Dikey cetvel ekleyin. Tek bir dikey cetvel ekler. Bu düğmeyi arka arkaya birkaç kez tıklarsanız, mevcut cetvellerle çakışmamaları için yeni cetveller yerleştirir.
  • Yatay cetvel ekleyin. Dikey cetvele benzer şekilde tek bir yatay cetvel ekler.
  • Tüm cetvelleri kaldırın. Tüm cetvelleri aynı anda kaldırır.
  • Cetvel görünürlüğünü değiştirin. Tek bir tıklatmayla tüm cetvelleri gizler veya gösterir.

XAML Canlı Önizleme'deki ikinci cetvel grubu araç çubuğu düğmelerinin ekran görüntüsü.

  • Dikey cetvel ekleyin. Tek bir dikey cetvel ekler. Bu düğmeyi arka arkaya birkaç kez tıklarsanız, mevcut cetvellerle çakışmamaları için yeni cetveller yerleştirir.
  • Yatay cetvel ekleyin. Dikey cetvele benzer şekilde tek bir yatay cetvel ekler.
  • Tüm cetvelleri kaldırın. Aynı anda tüm cetvelleri kaldırır.
  • Cetvel rengini seçin. Cetvellerin rengini değiştirir.
  • Cetvel görünürlüğünü değiştirin. Tek bir tıklatmayla tüm cetvelleri gizler veya gösterir.

Cetveller klavye uyumludur. Bunların etrafında sekme yapabilirsiniz. Cetvelleri her seferinde bir piksel taşımak için ok tuşlarını kullanabilir veya bir kerede 10 uygulama birimi taşımak için ok tuşlarıyla eşleştirilmiş Ctrl tuşuna basabilirsiniz. Del tuşu, o anda seçili olan cetveli siler. Etiketin yanındaki Cetveli Sil düğmesini seçerek de cetveli fareyle silebilirsiniz.

Öğe Seçimi'ni kullanırken bir öğenin çevresine cetveller de ekleyebilirsiniz. Sağ tıklama, cetvelleri dikey olarak ekler. Yatay cetveller eklemek için, sağ tıklatırken Shift tuşunu seçin ve basılı tutun.

Ve XAML Canlı Önizleme'de bir görüntünün anahattına nasıl cetvel ekleyebileceğinizi gösteren animasyon.

Çoklu pencere uygulamaları

Uygulamanızın birden çok penceresi varsa, Pencere birleşik giriş kutusunu kullanarak hangi pencerenin görüntüleneceğini seçebilirsiniz. Alternatif olarak, önizlemek istediğiniz pencerede bulunan uygulama araç çubuğunda bulunan XAML Canlı Önizleme'de Göster düğmesini kullanın.

XAML Canlı Önizleme'deki çok pencereli uygulama özelliğinin bir animasyonu.

Desteklenen platformlar

Visual Studio 2022'nin ilk sürümü aşağıdaki platformları ve hata ayıklama senaryolarını destekler.

Platforma Eleman Seçimi ve Bilgi İpucu Cetveller
WPF (Windows Presentation Foundation) Evet Evet
Evrensel Windows Platformu (UWP) Evet Evet
WinUI3 masaüstü Evet Evet
.NET MAUI Evet Evet
Xamarin 5.0+ (Android Emülatörü) Hayı Evet (px*)

Uyarı

Yukarıdaki tabloda, (px*) piksel cinsinden görüntülenen cetvelleri belirtir; diğer tüm platformlar, bilgileri monitörün DPI'sına bağlı olan platform birimlerinde görüntüler.

Sınırlamalar

XAML Canlı Önizleme, bir uygulamanın ekran görüntüsünü saniyede birkaç kez yakalayarak çalışır ve PrintWindow gibi kullanılabilir API'leri kullanır. Aşağıdaki sınırlamalara tabidir:

  • Uygulama penceresinin bir bölümü ekranın dışındaysa, bu bölümün XAML Sıcak Yeniden Yükleme değişikliklerini görüntülememe olasılığı yüksektir.
  • Bir pencere, WDA_EXCLUDEFROMCAPTURE ile SetWindowDisplayAffinity veya DWMWA_CLOAK ile DwmSetWindowAttribute kullanarak ekran görüntüsü yakalamayı geri çevirebilir ve XAML Canlı Önizleme için kullanılamaz hale gelebilir.

Sonraki Adımlar

XAML Canlı Önizleme ile yakından eşleşen XAML Çalışırken Yeniden Yükleme hakkında daha fazla bilgi edinin.

İlgili içerik

Visual Studio 2022 sürüm notları

  • Last updated on