Windows app için doğru görsel ağaç görüntüleyiciyi seçin

Ui görselleştiricisi olarak da bilinen görsel ağaç görüntüleyicisi, çalışma zamanında bir Windows app kullanıcı arabirimi bileşenlerini incelemek ve bunlarla etkileşime geçmek için kullanılan bir araçtır.

Bu, bileşen hiyerarşisini görüntüleme ve geçiş yapma, bileşen vurgulama, durumu alma ve ayarlama ve ilişkili koda ayrıntılı bağlama gibi özellikler aracılığıyla prototip oluşturma, kullanıcı deneyimlerini iyileştirme ve kullanıcı arabirimi sorunlarının hatalarını ayıklama konusunda yararlı olabilir.

Önerilen araçlar

Aşağıdaki tabloda, desteklenen çeşitli UI görselleştirme araçları ve kullanıcı arabirimi çerçeveleri ile Windows app platformları tanımlanmaktadır. Her bir aracın özeti tablodan sonra bulunabilir.

UI platformu/çerçevesi	Visual Studio - Live Visual Tree	Spy++	Erişilebilirlik İçgörüleri	Chromium UI Geliştirici Araçları
WinUIWindows App SDK'de	Supported	Desteklenmez	Supported	Desteklenmez
WPF	Supported	Desteklenmez	Supported	Desteklenmez
React Native Masaüstü için	Supported	Desteklenmez	Supported	Supported
.NET MAUI	Supported	Desteklenmez	Supported	Desteklenmez
WinForms	Supported	Supported	Supported	Desteklenmez
UWP için WinUI için UWP	Supported	Desteklenmez	Supported	Desteklenmez
Classic Visual Basic uygulamaları	Desteklenmez	Supported	Desteklenmez	Desteklenmez
Klasik Win32 uygulamaları	Desteklenmez	Supported	Desteklenmez	Desteklenmez
Chromium tabanlı uygulamalar	Desteklenmez	Desteklenmez	Desteklenmez	Supported

Visual Studio - Canlı Görsel Ağaç

Canlı Görsel Ağaç ve Canlı Özellik Gezgini özellikleri Visual Studio ile birlikte sunulur ve uygulamanızdaki kullanıcı arabirimi öğelerinin etkileşimli çalışma zamanı görünümünü sağlamak için birlikte çalışır.

Canlı Görsel Ağaç ne zaman kullanılır?

`WinUI 3'ü Windows App SDK ile, UWP için WinUI, WPF, .NET MAUI, WinForms veya Masaüstü için React Native kullanarak uygulama oluştururken bu araçları kullanın.`

• Windows App SDK, UWP için WinUI ve WPF hakkında daha fazla bilgi için bkz. Hata ayıklama sırasında XAML özelliklerini inceleyin.
• .NET MAUI hakkında daha fazla bilgi için bkz. .NET MAUI uygulamasının görsel ağacına göz atın.

Uyarı

WPF Ağaç Görselleştiricisi eski bir özelliktir ve etkin geliştirme aşamasında değildir. WPF Ağacı görselleştiricisini kullanarak bir WPF nesnesinin görsel ağacını keşfedebilir ve bu ağaçta bulunan nesnelerin WPF bağımlılık özelliklerini görüntüleyebilirsiniz.

Canlı Görsel Ağaç Kullanımı

Canlı Görsel Ağaç'ı görüntülemek için XAML Hot Reload etkinleştirilmelidir (bu özellik Visual Studio 2019 ve sonraki sürümlerde varsayılan olarak etkindir).

XAML Hot Reload etkinleştirilip etkinleştirilmediğini denetlemek için uygulamanızı ekli Visual Studio hata ayıklayıcısıyla (F5 veya Debug -> Hata Ayıklamayı Başlat) çalıştırın. Uygulama başlatıldığında, XAML Hot Reload kullanılabilir olduğunu onaylayan uygulama içi araç çubuğunu görmeniz gerekir (aşağıdaki görüntüde gösterildiği gibi).

Uygulama içi araç çubuğunu görmüyorsanız, Visual Studio menü çubuğundan Debug > Seçenekleri > XAML Hot Reload seçin. Options iletişim kutusunda XAML Hot Reload seçeneğinin belirlendiğinden emin olun.

Uygulamanız hata ayıklama yapılandırmasında (hata ayıklayıcı ekli olarak) çalışmaya başladığında, Visual Studio menü çubuğuna (Debug > Windows > Canlı Görsel Ağaç) gidin. Bu, XAML kodunuzun gerçek zamanlı görünümünü içeren Canlı Görsel Ağaç bölmesini açar.

Varsayılan olarak, Canlı Görsel Ağaç için Yalnızca Benim XAML seçeneği seçilidir. Bu, uygulamanızdaki XAML öğesi koleksiyonunun basitleştirilmiş bir görünümünü sağlar ve aşağıdaki görüntüde gösterildiği gibi Yalnızca XAML'imi Göster düğmesi aracılığıyla açılıp kapatılabilir.

Canlı Görsel Ağacın Özellikleri

Canlı Görsel Ağaç araç çubuğu, çalışma zamanında uygulamanızın kullanıcı arabiriminde inceleyecek öğeleri seçmek için çeşitli seçenekler sağlar.

• Çalışan Uygulama'da Öğe'yi seçin. Bu mod açıkken, uygulamada bir kullanıcı arabirimi öğesi seçtiğinizde, Canlı Görsel Ağaç düğümü ve bu öğeye karşılık gelen ağaçtaki özelliklerini gösterecek şekilde otomatik olarak güncelleştirilir.

  

• Çalışan Uygulamada Düzen Donatıcılarını Görüntüleme. Bu mod açıkken, uygulama penceresi seçili nesnenin sınırları boyunca yatay ve dikey çizgiler ve kenar boşluklarını gösteren bir dikdörtgen gösterir.

  

• Önizleme seçimi. Bu mod açıkken, Visual Studio öğenin bildirildiği XAML'yi gösterir (uygulama kaynak koduna access varsa).

  

Spy++

Spy++ (SPYXX.EXE) Visual Studio ile birlikte gelen ve sistemin işlemlerinin, iş parçacıklarının, pencerelerin ve pencere iletilerinin grafik görünümünü sağlayan Win32 tabanlı bir yardımcı programdır.

Spy++ ne zaman kullanılır?

Klasik bir Win32 uygulaması oluştururken veya Win32 API'lerini kullanarak WinForms ve Classic Visual Basic uygulamaları gibi kullanıcı arabirimi öğelerini çizmek için Spy++ kullanın.

Uyarı

.NET Framework uygulamaları için, Spy++'ın faydası sınırlıdır çünkü Spy++ tarafından kesilen pencere iletileri ve sınıflar yönetilen olaylara ve özellik değerlerine karşılık gelmez.

Spy++ nasıl kullanılır?

Spy++, ya Visual Studio'dan ya da Visual Studio için Geliştirici Komut İstemi'nden başlatılabilir.

Spy++'ı Visual Studio başlatmak için:

• Visual Studio yüklemenizin C++ iş yüküyle Desktop geliştirme bölümünden C++ temel masaüstü özellikleri bileşenini içerdiğini onaylayın. (Bu, varsayılan olarak Visual Studio 2022 ile yüklenir.)
• Yüklendiğinde, Araçlar menüsünden Spy++ kullanılabilir.
• Spy++ artık gerekli değilse kapatılabilen Visual Studio bağımsız olarak çalışır.

Spy++ öğesini Visual Studio için Geliştirici Komut İsteminden başlatmak için:

• Windows Başlat menüsünden Visual Studio için Geliştirici Komut İstemi'ni başlatın.
• Komut isteminde spyxx.exe (veya 64 bit sürüm için spyxx_amd64.exe) girin ve Enter tuşuna basın.

Visual Studio spy++ kullanma hakkında daha ayrıntılı bilgi için bkz. Spy++ Toolbar.

Spy++ Özellikleri

Spy++, sistem nesneleri arasındaki ilişkileri gösteren, geçerli masaüstü penceresi ağacın en üstünde yer alan ve alt düğümler standart pencere hiyerarşisine göre listelenip diğer tüm pencereleri temsil eden grafiksel bir ağaç yapısını görüntüler. Visual C++ hata ayıklayıcısı aracılığıyla kullanılamayan bir uygulamanın davranışı hakkında değerli içgörüler sağlayabilir.

Spy++ ile yapabilecekleri:

• Belirli pencereleri, iş parçacıklarını, işlemleri veya iletileri arayın.
• Seçili iş parçacıklarının işlemlerinin veya iletilerinin özelliklerini görüntüleyin.
• Doğrudan ağaç görünümünde bir pencere, iş parçacığı, işlem veya ileti seçin.
• Fare işaretçisini kullanarak bir pencere seçmek için Bulucu Aracı'nı kullanın (Arama -> Pencere Bul).
• Karmaşık bir ileti günlüğü seçim parametresi kullanarak bir ileti seçeneği ayarlayın.

Spy++ belgeleri için bkz. Spy++ Yardımı.

Windows için Erişilebilirlik İçgörüleri - Live Inspect

windows için Accessibility Insights - Live Inspect, geliştiricilerin UI Automation destekleyen Windows uygulamalarında erişilebilirlik sorunlarını bulmasına ve düzeltmelerine yardımcı olabilecek indirilebilir bir Microsoft uygulamasıdır. Geliştiricilerin yalnızca öğenin üzerine gelerek veya klavye odağını buna ayarlayarak uygulamadaki bir öğenin doğru UI Automation özelliklerine sahip olduğunu doğrulamasına yardımcı olur.

Erişilebilirlik İçgörüleri ne zaman kullanılır - Live Inspect

Live Inspect, genellikle Windows App SDK içinde WinUI ile uygulama oluştururken Canlı Görsel Ağacı, Spy++ ve diğer araçlarla birlikte kullanılır. UWP için WinUI, UWP, WPF, .NET MAUI, WinForms veya Masaüstü için React Native.

Erişilebilirlik İçgörüleri'ni Kullanma - Canlı İnceleme

Erişilebilirlik İçgörüleri, Erişilebilirlik İçgörülerini İndir'den indirilmeli ve yüklenmelidir.

Erişilebilirlik İçgörülerinin Özellikleri - Canlı İnceleme

Live Inspect, seçilen öğeye karşılık gelen UI Automation özelliklerini ve desenlerini içeren ayrıntı bölmeleriyle sistem nesneleri arasındaki ilişkilerin grafik ağacını görüntüler. Geçerli masaüstü penceresi, standart pencere hiyerarşisine göre listelenen diğer tüm pencereleri temsil eden ağaç ve alt düğümlerin en üstünde görüntülenir.

Live Inspect ile yapabilecekleri:

• Bir uygulamadaki bir öğenin yalnızca öğenin üzerine gelerek veya klavye odağını üzerine getirerek doğru UI Automation özelliklerine sahip olduğunu doğrulayın.
• Hedef uygulamadaki öğeleri görsel olarak vurgular.
• Çok sayıda erişilebilirlik kuralı ve yönergesiyle uyumluluk için el ile veya otomatik denetimlerle denetimleri veya desenleri test edin.

UI Automation hakkında daha fazla bilgi edinmek için bkz. UI Automation Genel Bakış.

Erişilebilirlik İçgörüleri hakkında daha fazla bilgi edinmek için bkz. Windows için Erişilebilirlik İçgörüleri

Windows için Chromium UI Geliştirici Araçları

Windows için Chromium UI DevTools , Google'ın ön uç Geliştirici Araçları Denetçisi'ni kullanarak ui sistemini web sayfası gibi incelemenize olanak tanıyan bir araçtır.

Windows için Chromium UI Geliştirici Araçları ne zaman kullanılır?

Aşamalı web apps veya Electron masaüstü uygulamaları da dahil olmak üzere bir Chromium project geliştiriyorsanız Chrome UI Geliştirici Araçları'nı kullanın. Electron hakkında daha fazla bilgi için GitHub'da DevTools uzantısı bakın.

Windows için Chromium UI Geliştirici Araçlarını kullanma

Windows kod tabanı için Chromium UI Geliştirici Araçları GitHub'dan indirilmeli ve Visual Studio ile derlenmelidir. Daha fazla bilgi için bkz. UI Geliştirici Araçlarına Genel Bakış.

Windows için Chromium UI Geliştirici Araçlarının Özellikleri

Windows için Chromium UI DevTools; görünümleri, pencereleri ve diğer kullanıcı arabirimi öğelerini görüntülemek ve çapraz geçiş yapmak için bir web sayfası ön ucu kullanır.

Windows için Chromium UI DevTools ile aşağıdakileri yapabilirsiniz:

• Kullanıcı arabirimi öğelerini ve özelliklerini incelemek için hiyerarşik ui öğesi ağacı kullanın.
• Üzerine geldiğinizde bir UI öğesini vurgulayan ve bu öğenin düğümlerini UI öğesi ağacında gösteren İnceleme modunu kullanın.
• Öğeler panelini kullanarak bir arama çubuğu açın ve kullanıcı arabirimi öğesi ağacında ad, etiket ve stil özelliklerini kullanarak bir öğe bulun.
• Sınıf üst bilgisi dosyasını Chromium kod aramasında açmak ve kodu yerel dosyalardan çekmek için Kaynaklar panelini kullanın.

İlgili içerik