Share via

Hata ayıklama sırasında XAML özelliklerini denetleme

  • Makale

Canlı Görsel Ağaç ve Canlı Özellik Gezgini ile çalışan XAML kodunuzun gerçek zamanlı bir görünümünü elde edebilirsiniz. Bu araçlar, çalışan XAML uygulamanızın kullanıcı arabirimi öğelerinin ağaç görünümünü sağlar ve seçtiğiniz herhangi bir ui öğesinin çalışma zamanı özelliklerini gösterir.

Aşağıdaki yapılandırmalarda bu araçları kullanabilirsiniz:

Uygulama Türü İşletim Sistemi ve Araçlar
Windows Presentation Foundation (4.0 ve üzeri) uygulamaları Windows 7 ve üzeri
Evrensel Windows uygulamaları Windows 10 SDK ve üzeri ile Windows 10 ve üzeri
.NET Çok platformlu Uygulama Kullanıcı Arabirimi uygulamaları Windows 10 ve üzeri, .NET 8 ve üzeri, Visual Studio 2022 17.9 ve üzeri

Canlı Görsel Ağaçtaki Öğelere Bakın

Liste görünümü ve düğmesi olan çok basit bir WPF uygulamasını kullanmaya başlayalım. Düğmeye her tıkladığınızda, listeye başka bir öğe eklenir. Çift numaralı öğeler gri, tek numaralı öğeler sarı renktedir.

Proje oluşturma

  1. Yeni bir C# WPF uygulaması oluşturun (Dosya>Yeni>Projesi, "C# WPF" yazın, WPF Uygulaması proje şablonunu seçin, projeyi TestXAML olarak adlandırın ve ardından Hedef Çerçeve açılır listesinde doğru .NET sürümünün göründüğünü doğrulayın).

  2. MainWindow.xaml dosyasını aşağıdaki şekilde değiştirin:

    <Window x:Class="TestXAML.MainWindow"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   xmlns:local="clr-namespace:TestXAML"
   mc:Ignorable="d"
   Title="MainWindow" Height="350" Width="525">
   <Grid>
      <Button x:Name="button" Background="LightBlue" Content="Add Item" HorizontalAlignment="Left" Margin="216,206,0,0" VerticalAlignment="Top" Width="75" Click="button_Click"/>
      <ListBox x:Name="listBox" HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100" Margin="205,80,0,0"/>
   </Grid>
</Window>

  3. MainWindow.xaml.cs dosyasına aşağıdaki komut işleyicisini ekleyin:

    int count;

private void button_Click(object sender, RoutedEventArgs e)
{
   ListBoxItem item = new ListBoxItem();
   item.Content = "Item" + ++count;
   if (count % 2 == 0)
   {
      item.Background = Brushes.LightGray;
   }
   else
   {
      item.Background = Brushes.LightYellow;
   }
   listBox.Items.Add(item);
}

  4. Projeyi derleyin ve hata ayıklamaya başlayın. (Derleme yapılandırması Sürüm değil Hata Ayıklama olmalıdır. Derleme yapılandırmaları hakkında daha fazla bilgi için bkz . Derleme Yapılandırmalarını Anlama.)

    Pencere açıldığında, çalışan uygulamanızın içinde uygulama içi araç çubuğunun göründüğünü görmeniz gerekir.

    Main window of the app

  5. Şimdi, listeye yeni öğeler eklemek için Öğe Ekle düğmesine birkaç kez tıklayın.

XAML özelliklerini inceleme

  1. Ardından, uygulama içi araç çubuğunun soldaki düğmesine tıklayarak (veya Windows > Live Görsel Ağaçta Hata Ayıkla'ya > giderek) Canlı Görsel Ağaç penceresini açın. Açıldıktan sonra, bu pencereye ve Canlı Özellikler penceresine yan yana bakabilmemiz için yerleştirme konumundan uzağa sürükleyin.

  2. Canlı Görsel Ağaç penceresinde ContentPresenter düğümünü genişletin. Düğme ve liste kutusu için düğümler içermelidir. Liste kutusu öğelerini bulmak için liste kutusunu (ve ardından ScrollContentPresenter ve ItemsPresenter) genişletin.

    ContentPresenter düğümünü görmüyorsanız araç çubuğunda Yalnızca XAML'imi Göster simgesini açın. Visual Studio 2019 sürüm 16.4'den başlayarak, Just My XAML özelliği kullanılarak XAML öğelerinin görünümü varsayılan olarak basitleştirilmiştir. Ayrıca , tüm XAML öğelerini her zaman göstermek için seçeneklerde bu ayarı devre dışı bırakabilirsiniz.

    Pencere şu şekilde görünmelidir:

    ListBoxItems in the Live Visual Tree

  3. Uygulama penceresine geri dönün ve birkaç öğe daha ekleyin. Canlı Görsel Ağaç'ta daha fazla liste kutusu öğesi görmeniz gerekir.

  4. Şimdi liste kutusu öğelerinden birinin özelliklerine bakalım.

    Canlı Görsel Ağaç'ta ilk liste kutusu öğesini seçin ve araç çubuğunda Özellikleri Göster simgesine tıklayın. Canlı Özellik Gezgini görünmelidir. İçerik alanının "Öğe1" ve Arka Plan>Rengi alanının #FFFFFFE0 olduğunu unutmayın.

  5. Canlı Görsel Ağaç'a geri dönün ve ikinci liste kutusu öğesini seçin. Canlı Özellik Gezgini İçerik alanının "Öğe2" ve Arka Plan>Rengi alanının #FFD3D3D3 (temaya bağlı olarak) olduğunu göstermelidir.

    Not

    Canlı Özellik Gezgini'ndeki bir özelliğin etrafındaki sarı kenarlık, özellik değerinin gibi Color = {BindingExpression}bir bağlama aracılığıyla ayarlandığı anlamına gelir. Yeşil kenarlık, değerin gibi Color = {StaticResource MyBrush}bir kaynak kullanılarak ayarlandığı anlamına gelir.

    XAML'nin gerçek yapısında büyük olasılıkla doğrudan ilgilenmediğiniz birçok öğe vardır ve kodu iyi bilmiyorsanız aradığınızı bulmak için ağaçta gezinmekte zorlanabilirsiniz. Bu nedenle Canlı Görsel Ağaç, incelemek istediğiniz öğeyi bulmanıza yardımcı olmak için uygulamanın kullanıcı arabirimini kullanmanıza olanak sağlayan birkaç yönteme sahiptir.

    Çalışan Uygulama'da Öğe'yi seçin. Canlı Görsel Ağaç araç çubuğunda bu düğmeyi seçtiğinizde bu modu etkinleştirebilirsiniz. Bu mod açıkken, uygulamada bir kullanıcı arabirimi öğesi seçebilirsiniz ve Canlı Görsel Ağaç (ve Canlı Özellik Görüntüleyicisi) söz konusu öğeye ve özelliklerine karşılık gelen ağaçtaki düğümü gösterecek şekilde otomatik olarak güncelleştirilir. Visual Studio 2019 sürüm 16.4'den başlayarak, öğe seçiminin davranışını yapılandırabilirsiniz.

    Çalışan Uygulamada Düzen Donatıcılarını Görüntüleme. Öğe seç... düğmesinin hemen sağındaki düğmeyi seçtiğinizde bu modu etkinleştirebilirsiniz. Görüntü düzeni donatıcıları açık olduğunda, 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. Örneğin, hem Öğe seç hem de Görüntü düzeni'ni açın ve uygulamadaki Öğe Ekle metin bloğunu seçin. Canlı Görsel Ağaç'ta metin bloğu düğümünü ve Canlı Özellik Görüntüleyicisi'nde metin bloğu özelliklerini ve metin bloğunun sınırlarındaki yatay ve dikey çizgileri görmeniz gerekir.

    LivePropertyViewer in DisplayLayout

    Odaklanmış Öğeyi İzle. Canlı Görsel Ağaç araç çubuğunda bu düğmeyi seçerek bu modu etkinleştirebilirsiniz. Bu mod, uygulamanın kaynak koduna erişiminiz varsa öğenin bildirildiği XAML'yi gösterir. Öğe seç'i ve Odaklanmış Öğeyi İzle'yi seçin ve ardından test uygulamamızda düğmeyi seçin. MainWindow.xaml dosyası Visual Studio'da açılır ve imleç düğmenin tanımlandığı satıra yerleştirilir.

Çalışan uygulamalarla XAML araçlarını kullanma

Kaynak kodunuz olmasa bile bu XAML araçlarını kullanabilirsiniz. Çalışan bir XAML uygulamasına eklediğinizde, bu uygulamanın kullanıcı arabirimi öğelerinde de Canlı Görsel Ağaç'ı kullanabilirsiniz. Aşağıda, daha önce kullandığımız WPF test uygulamasının aynısının kullanıldığı bir örnek verilmiş.

  1. Yayın yapılandırmasında TestXaml uygulamasını başlatın. Hata ayıklama yapılandırmasında çalışan bir işleme ekleyemezsiniz.

  2. Visual Studio'nun ikinci bir örneğini açın ve İşleme Ekleme Hatalarını Ayıkla'ya > tıklayın. Kullanılabilir işlemler listesinde TestXaml.exe dosyasını bulun ve Ekle'ye tıklayın.

  3. Uygulama çalışmaya başlar.

  4. Visual Studio'nun ikinci örneğinde Canlı Görsel Ağaç'ı açın (Windows > Live Görsel Ağacı hatalarını ayıklama>). TestXaml kullanıcı arabirimi öğelerini görmeniz ve bunları uygulamada doğrudan hata ayıklarken yaptığınız gibi işleyebilmeniz gerekir.

İlgili içerik

XAML Çalışırken Yeniden Yükleme ile çalışan XAML kodunu yazma ve hata ayıklama