.NET MAUI uygulamasının görsel ağacını inceleme

.NET Çok Platformlu Uygulama Kullanıcı Arabirimi (.NET MAUI) Canlı Görsel Ağaç, çalışan .NET MAUI uygulamanızdaki kullanıcı arabirimi öğelerinin ağaç görünümünü sağlayan bir Visual Studio özelliğidir.

.NET MAUI uygulamanız hata ayıklama yapılandırmasında çalışırken, hata ayıklayıcısı ekli olduğunda, Visual Studio menü çubuğundan Windows > Live Görsel Ağacı Hatalarını Ayıkla > seçilerek Canlı Görsel Ağaç penceresi açılabilir:

Çalışırken Yeniden Yükleme etkinleştirilmesi koşuluyla, Canlı Görsel Ağaç penceresi, uygulamanın kullanıcı arabiriminin XAML veya C# kullanılarak oluşturulmuş olmasına bakılmaksızın uygulamanızın kullanıcı arabirimi öğelerinin hiyerarşisini görüntüler. Ancak, C# kullanılarak oluşturulan URI'ler için uygulamanızın kullanıcı arabirimi öğelerinin hiyerarşisini görüntülemek için Just My XAML'yi devre dışı bırakmanız gerekir.

Yalnızca XAML'im

Kullanıcı arabirimi öğelerinin görünümü, Just My XAML adlı bir özellik kullanılarak varsayılan olarak basitleştirilmiştir. Visual Studio'da Yalnızca XAML'imi Göster düğmesine tıklanması özelliği devre dışı bırakır ve görsel ağacındaki tüm kullanıcı arabirimi öğelerini gösterir:

Visual Studio menü çubuğundan Hata Ayıklama > Seçenekleri > XAML Çalışırken Yeniden Yükleme seçilerek yalnızca My XAML kalıcı olarak devre dışı bırakılabilir. Ardından, Seçenekler iletişim kutusunda Canlı Görsel Ağaçta Yalnızca XAML'imi Etkinleştir seçeneğinin devre dışı bırakıldığından emin olun:

Kullanıcı arabirimi öğesi bulma

Bir XAML kullanıcı arabiriminin yapısında ilgilenmeyebilecek birçok öğe vardır ve uygulamanın kaynak kodunu tam olarak bilmiyorsanız, aradığınız kullanıcı arabirimi öğesini bulmak için görsel ağaçta gezinmekte zorlanabilirsiniz. Bu nedenle, Windows'da Canlı Görsel Ağaç penceresinde, incelemek istediğiniz öğeyi bulmanıza yardımcı olmak için uygulamanın kullanıcı arabirimini kullanmanıza olanak sağlayan birden çok yaklaşım vardır:

• Çalışan uygulamada öğesini seçin. Bu modu etkinleştirmek için Canlı Görsel Ağaç araç çubuğundaki Uygulama Çalıştırılıyor düğmesinde Öğe Seç'e tıklayabilirsiniz:

  

  Bu mod etkinleştirildiğinde, uygulamada bir kullanıcı arabirimi öğesi seçebildiğinizde Canlı Görsel Ağaç penceresi, söz konusu öğeye karşılık gelen ağaçtaki düğümü gösterecek şekilde otomatik olarak güncelleştirilir.

• Çalışan uygulamada düzen donatıcılarını görüntüleyin. Canlı Görsel Ağaç araç çubuğundaki Uygulama Çalıştırılıyor düğmesinde Görüntü Düzeni Donatıcıları'na tıklayarak bu modu etkinleştirebilirsiniz:

  

  Bu mod etkinleştirildiğinde, uygulama penceresinin seçili nesnenin sınırları boyunca yatay ve dikey çizgiler göstermesine neden olur, böylece neyle hizalanmış olduğunu ve kenar boşluklarını gösteren dikdörtgenleri görebilirsiniz.

• Önizleme Seçimi. Canlı Görsel Ağaç araç çubuğunda Seçili Öğeyi Önizle düğmesine tıklayarak bu modu etkinleştirebilirsiniz:

  

  Bu mod, uygulama kaynak koduna erişiminiz olması koşuluyla öğenin bildirildiği XAML kaynak kodunu gösterir.