Xamarin.Forms canlı görsel ağaç

  • Makale
  • Okumak için 2 dakika

Canlı görsel ağaçIle çalışan xaml kodunuzun gerçek zamanlı bir görünümünü alabilirsiniz. Çalışan uygulamanızın kullanıcı arabirimi öğelerinin ağaç görünümünü gösterir Xamarin.Forms .

Gereksinimler

  • Xamarin.Forms5,0 veya daha yeni bir sürüm kullanın.
  • Değişiklikler yalnızca dinamik yeniden yükleme etkin (varsayılan olarak etkindir).

Kullanım

Gereksinimler karşılandıktan sonra, uygulamanızın ve canlı görsel ağaç pencerenizin hata ayıklaması uygulamanızın çalışma zamanı kullanıcı arabirimi hiyerarşisini gösterir.

  • Windows: varsayılan olarak ıde 'nin sol tarafında görünür. bunu görmüyorsanız, hata ayıkla Windows > canlı görsel ağaç kullanarak görüntüleyin.
  • Mac: varsayılan olarak, IDE 'nin sağ tarafta görüntülenir. bunu görmüyorsanız, görüntülemek için hata ayıkla Windows > canlı görsel ağacı ' nı kullanın.

Uygulamanızın çalışma zamanı UI hiyerarşisini incelemek için ağaç görünümünü kullanın, düğümleri genişleterek/daraltarak Kullanıcı arabiriminin belirli bölümlerine odaklayın.

Canlı görsel ağaç araç çubuğu

XAML öğelerinin görünümü, varsayılan olarak yalnızca XAML 'IM özelliği kullanılarak basitleştirilmiştir. Tüm Kullanıcı arabirimi öğelerini göstermek için, canlı görsel ağaç araç çubuğunda yalnızca kendı xaml 'Mi göster düğeni açın. İsterseniz, tüm XAML öğelerini her zaman göstermek için Seçenekler ' de Bu ayarı devre dışı bırakabilirsiniz.

Not

Mac için Visual Studio şu anda yalnızca XAML özelliğini desteklemiyor.

XAML yapısının, muhtemelen doğrudan ilgilenmediğiniz çok sayıda öğesi vardır ve kodun iyi olduğunu bilmiyorsanız, aradığınızı bulmak için ağaca göz atan bir zaman olabilir. Bu nedenle, canlı görsel ağaçta , incelemek istediğiniz öğeyi bulmanıza yardımcı olmak için uygulamanın kullanıcı arabirimini kullanmanıza olanak tanıyan birden çok yaklaşım vardır.

Çalışan uygulamadaki öğesini seçin (Şu anda yalnızca UWP uygulamaları için desteklenir). Canlı görsel ağaç araç çubuğunda en soldaki düğmeyi seçtiğinizde bu modu etkinleştirebilirsiniz. Bu mod üzerinde, uygulamada bir UI öğesi seçebilirsiniz ve canlı görsel ağaç , düğümü ilgili öğeye ve özelliklerine karşılık gelen ağaçta göstermek için otomatik olarak güncelleştirilir.

Çalışan uygulamada düzen donatıcıları görüntüleme (Şu anda yalnızca UWP uygulamaları için desteklenmektedir). Seçimi Etkinleştir düğmesinin hemen sağında bulunan düğmeyi seçtiğinizde bu modu etkinleştirebilirsiniz. Görüntüleme düzeni donatıcıları açık olduğunda, uygulama penceresinin seçili nesnenin sınırları üzerinde yatay ve dikey çizgiler görüntülemesine neden olur, böylece neyin ne kadar hizalanacağını görebilir ve kenar boşluklarını gösteren dikdörtgenler de gösterilir.

Önizleme seçimi. Canlı görsel ağaç araç çubuğunda sol taraftaki üçüncü düğmeyi seçerek bu modu etkinleştirebilirsiniz. Bu mod, uygulamanın kaynak koduna erişiminiz varsa, öğenin bildirildiği XAML 'yi gösterir.