Share via

Kontrola vlastností XAML při ladění

  • Článek

Zobrazení spuštěného kódu XAML v reálném čase můžete získat pomocí dynamického vizuálního stromu a Průzkumníka živých vlastností. Tyto nástroje poskytují stromové zobrazení prvků uživatelského rozhraní spuštěné aplikace XAML a zobrazí vlastnosti modulu runtime libovolného prvku uživatelského rozhraní, který vyberete.

Tyto nástroje můžete použít v následujících konfiguracích:

Typ aplikace Operační systém a nástroje
Aplikace Windows Presentation Foundation (4.0 a novější) Windows 7 a novější
Univerzální aplikace pro Windows Windows 10 a novější se sadou Windows 10 SDK a novějšími
Aplikace uživatelského rozhraní více platforem .NET Windows 10 a novější, .NET 8 a novější, Visual Studio 2022 17.9 a novější

Zobrazení elementů ve stromu živého vizuálu

Začněme velmi jednoduchou aplikací WPF, která má zobrazení seznamu a tlačítko. Pokaždé, když kliknete na tlačítko, přidá se do seznamu další položka. Sudé položky jsou barevně šedé a liché položky jsou barevné.

Vytvoření projektu

  1. Vytvořte novou aplikaci C# WPF (Soubor>nový>projekt, zadejte C# WPF, zvolte šablonu projektu APLIKACE WPF, pojmenujte projekt TestXAML a ověřte, že se v rozevíracím seznamu Cílové rozhraní zobrazí správná verze .NET).

  2. Změňte MainWindow.xaml na následující:

    <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. Do souboru MainWindow.xaml.cs přidejte následující obslužnou rutinu příkazu:

    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. Sestavte projekt a spusťte ladění. (Konfigurace sestavení musí být Debug, nikoli Release. Další informace o konfiguracích sestavení najdete v tématu Principy konfigurací sestavení.)

    Po zobrazení okna by se měl v běžící aplikaci zobrazit panel nástrojů v aplikaci.

    Main window of the app

  5. Teď několikrát klikněte na tlačítko Přidat položku a přidejte do seznamu nové položky.

Vlastnosti jazyka XAML

  1. Potom otevřete okno Dynamický vizuální strom kliknutím na tlačítko úplně vlevo na panelu nástrojů v aplikaci (nebo přejděte do ladění > vizuálního stromu Windows > Live). Jakmile je otevřený, přetáhněte ho pryč z dokovací polohy, abychom se mohli podívat na toto okno a okno Živé vlastnosti vedle sebe.

  2. V okně Live Visual Tree rozbalte uzel ContentPresenter. Měl by obsahovat uzly pro tlačítko a seznam. Rozbalte seznam (a pak ScrollContentPresenter a ItemsPresenter) vyhledejte položky seznamu.

    Pokud nevidíte uzel ContentPresenter , přepněte na panelu nástrojů ikonu Zobrazit jenom můj XAML . Počínaje sadou Visual Studio 2019 verze 16.4 je zobrazení elementů XAML ve výchozím nastavení zjednodušené pomocí funkce Just My XAML. Toto nastavení můžete také zakázat v možnostech, aby se vždy zobrazovaly všechny elementy XAML.

    Okno by mělo vypadat takto:

    ListBoxItems in the Live Visual Tree

  3. Vraťte se do okna aplikace a přidejte několik dalších položek. V dynamickém vizuálním stromu by se měly zobrazit další položky seznamu.

  4. Teď se podíváme na vlastnosti jedné z položek seznamu.

    Vyberte první položku seznamu ve stromu živého vizuálu a klikněte na ikonu Zobrazit vlastnosti na panelu nástrojů. Měl by se zobrazit Live Property Explorer. Všimněte si, že pole Obsah je Položka1 a pole Barva pozadí>je #FFFFFFE0.

  5. Vraťte se do živého vizuálního stromu a vyberte druhou položku seznamu. Průzkumník živých vlastností by měl zobrazit, že pole Obsah je Položka2 a pole Barva pozadí>je #FFD3D3D3 (v závislosti na motivu).

    Poznámka:

    Žluté ohraničení kolem vlastnosti v Live Property Exploreru znamená, že hodnota vlastnosti je nastavena vazbou, například Color = {BindingExpression}. Zelené ohraničení znamená, že hodnota je nastavena pomocí prostředku, například Color = {StaticResource MyBrush}.

    Skutečná struktura XAML obsahuje mnoho prvků, které pravděpodobně přímo nezajímáte, a pokud neznáte kód dobře, může být obtížné procházet strom, abyste našli to, co hledáte. Živý vizuální strom má několik způsobů, jak vám umožní pomocí uživatelského rozhraní aplikace najít prvek, který chcete prozkoumat.

    Vyberte prvek ve spuštěné aplikaci. Tento režim můžete povolit, když vyberete toto tlačítko na panelu nástrojů Dynamický vizuální strom . V tomto režimu můžete v aplikaci vybrat prvek uživatelského rozhraní a dynamický vizuální strom (a prohlížeč živých vlastností) se automaticky aktualizuje, aby se uzel ve stromu, který odpovídá danému prvku, a jeho vlastnosti. Počínaje sadou Visual Studio 2019 verze 16.4 můžete nakonfigurovat chování výběru prvků.

    Zobrazit doplňky rozložení ve spuštěné aplikaci Tento režim můžete povolit, když vyberete tlačítko, které je hned napravo od tlačítka Vybrat prvek... Když je rozložení zobrazení zapnuté , způsobí, že okno aplikace zobrazí vodorovné a svislé čáry podél hranic vybraného objektu, abyste viděli, k čemu se zarovná, a také obdélníky znázorňující okraje. Například zapněte možnost Vybrat prvek i rozložení Zobrazení a vyberte blok textu Přidat položku v aplikaci. Uzel bloku textu by se měl zobrazit ve stromu živého vizuálu a ve vlastnostech bloku textu v prohlížeči živých vlastností a také vodorovné a svislé čáry na hranici bloku textu.

    LivePropertyViewer in DisplayLayout

    Sledování prioritního prvku Tento režim můžete povolit výběrem tohoto tlačítka na panelu nástrojů Dynamický vizuální strom. Tento režim zobrazuje XAML, ve kterém byl element deklarován, pokud máte přístup ke zdrojovému kódu aplikace. Vyberte element Select a Track Focused Element a pak vyberte tlačítko v naší testovací aplikaci. Soubor MainWindow.xaml se otevře v sadě Visual Studio a kurzor se umístí na řádek, kde je tlačítko definováno.

Použití nástrojů XAML se spuštěnými aplikacemi

Tyto nástroje XAML můžete použít i v případě, že zdrojový kód nemáte. Když se připojíte ke spuštěné aplikaci XAML, můžete také použít dynamický vizuální strom v prvech uživatelského rozhraní této aplikace. Tady je příklad použití stejné testovací aplikace WPF, jakou jsme použili dříve.

  1. Spusťte aplikaci TestXaml v konfiguraci vydané verze. Nelze se připojit k procesu, který běží v konfiguraci ladění .

  2. Otevřete druhou instanci sady Visual Studio a klikněte na Tlačítko Připojit k procesu ladění>. Vyhledejte TestXaml.exe v seznamu dostupných procesů a klepněte na tlačítko Připojit.

  3. Aplikace se spustí.

  4. Ve druhé instanci sady Visual Studio otevřete dynamický vizuální strom (ladění > vizuálního stromu Windows > Live). Měli byste vidět prvky uživatelského rozhraní TestXaml a měli byste být schopni s nimi manipulovat stejně, jako jste to udělali při přímém ladění aplikace.

Související obsah

Psaní a ladění spuštěný kód XAML pomocí Opětovné načítání za provozu XAML