Sprawdzanie właściwości XAML podczas debugowania

Artykuł
12/09/2023

Możesz uzyskać widok w czasie rzeczywistym działającego kodu XAML przy użyciu dynamicznego drzewa wizualnego i Eksploratora właściwości na żywo. Te narzędzia udostępniają widok drzewa elementów interfejsu użytkownika uruchomionej aplikacji XAML i przedstawiają właściwości środowiska uruchomieniowego dowolnego wybranego elementu interfejsu użytkownika.

Możesz użyć tych narzędzi w następujących konfiguracjach:

Typ aplikacji	System operacyjny i narzędzia
Aplikacje Windows Presentation Foundation (4.0 lub nowsze)	System Windows 7 lub nowszy
Aplikacje uniwersalne systemu Windows	System Windows 10 lub nowszy z zestawem Windows 10 SDK lub nowszym
Wieloplatformowe aplikacje interfejsu użytkownika aplikacji platformy .NET	System Windows 10 lub nowszy, .NET 8 i nowsze wersje, Visual Studio 2022 17.9 lub nowszy

Przyjrzyj się elementom w dynamicznym drzewie wizualnym

Zacznijmy od bardzo prostej aplikacji WPF, która ma widok listy i przycisk. Za każdym razem, gdy klikniesz przycisk, do listy zostanie dodany inny element. Elementy numerowane parzyste są kolorami szarymi, a elementy numerowane nieparzyste są kolorami żółtymi.

Tworzenie projektu

Utwórz nową aplikację WPF języka C# (Plik>nowy>projekt, wpisz "C# WPF", wybierz szablon projektu aplikacji WPF, nadaj projektowi nazwę TestXAML, a następnie sprawdź, czy poprawna wersja platformy .NET jest wyświetlana na liście rozwijanej Platforma docelowa).

Zmień plik MainWindow.xaml na następujący:

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

Dodaj następującą procedurę obsługi poleceń do pliku MainWindow.xaml.cs:

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);
}

Skompiluj projekt i rozpocznij debugowanie. (Konfiguracja kompilacji musi być debugowania, a nie wydania. Aby uzyskać więcej informacji na temat konfiguracji kompilacji, zobacz Understanding Build Configurations (Omówienie konfiguracji kompilacji).

Po wyświetleniu okna powinien zostać wyświetlony pasek narzędzi w aplikacji w uruchomionej aplikacji.
Teraz kliknij przycisk Dodaj element kilka razy, aby dodać nowe elementy do listy.