.NET學習紀錄: [WPF] 新的UI Debugging Tools for XAML簡介

前幾天發佈的Visual Studio 2015 CTP 6版本中，新增了一項很棒的功能UI Debugging Tools for XAML，這功能讓開發者在debug時馬上就可以即時看到當時介面的Visual Tree結構以及property，馬上就做個簡單範例來試用一下
介面的xaml如下:

	<Window x:Class="WpfApplication1.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:WpfApplication1"
	mc:Ignorable="d"
	Title="MainWindow" Height="350" Width="525">
	<Grid>
	<TextBlock x:Name="textBlock" HorizontalAlignment="Left" Height="47" Margin="110,63,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Width="159"/>
	<Button x:Name="button" Content="Button" HorizontalAlignment="Left" Height="38" Margin="110,110,0,0" VerticalAlignment="Top" Width="96"/>
	<Rectangle Fill="#FF3B3BDC" HorizontalAlignment="Left" Height="46" Margin="90,171,0,0" Stroke="Black" VerticalAlignment="Top" Width="126"/>
	<ListBox Name="TestListBox" Width="70" Margin="274,50,193,0">
	<ListBox.ItemTemplate>
	<DataTemplate>
	<TextBlock Text="{Binding}"/>
	</DataTemplate>
	</ListBox.ItemTemplate>
	</ListBox>
	</Grid>
	</Window>

view raw XAMLDebuggingTool.xaml hosted with ❤ by GitHub

然後在程式中簡單的給予ListBox幾個數字binding

	using System.Collections.Generic;
	using System.Windows;

	namespace WpfApplication1
	{
	/// <summary>
	/// Interaction logic for MainWindow.xaml
	/// </summary>
	public partial class MainWindow : Window
	{
	public MainWindow()
	{
	InitializeComponent();
	List<int> numbers = new List<int>();
	for (int i = 0; i < 5; i++)
	{
	numbers.Add(i);
	}
	TestListBox.ItemsSource = numbers;
	}
	}
	}

view raw XAMLDebuggingTool.cs hosted with ❤ by GitHub

直接執行debug後，VS介面左右邊會出現Live Visual Tree跟Live Property Explorer兩個panel，Live Visual Tree顯示的就是當時介面的Visual Tree結構，而panel中框起來的數字可以知道裡面的節點個數，右邊的Live Property Explorer則會顯示選到物件的屬性