Share via

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

  • Makale

.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:

Screenshot of the Live Visual Tree window in Visual Studio.

Ç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. Yalnızca XAML'imi Göster düğmesine tıklanması özelliği devre dışı bırakır ve görsel ağaçtaki tüm kullanıcı arabirimi öğelerini gösterir:

Screenshot of all UI elements in the Live Visual Tree window.

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:

Screenshot of Just My XAML button disabled in the Live Visual Tree window in Visual Studio.

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:

    Screenshot of the Select Element in the Running Application button in the Live Visual Tree toolbar.

    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:

    Screenshot of the Display Layout Adorners in the Running Application button in the Live Visual Tree toolbar.

    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:

    Screenshot of the Preview Selected Item button in the Live Visual Tree toolbar.

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