UWP开发入门（十二）——神器Live Visual Tree

　　很久以前，我们就有Snoop这样的工具实时修改、查看正在运行的WPF程序，那时候调个样式，修改个模板，相当滋润。随着历史的车轮陷进WP的泥潭中，无论WP7的Silverlight还是WP8.1的runtime，偶们都不能方便快捷的查看APP的可视化树（Visual Tree）了，呜呼哉，是可忍孰不可忍放下筷子就骂微软。没想到Visual Studio 2015倒是给了我们一个惊喜，自带了一套非常强大的调试工具Live Visual Tree。本篇我们用简单的例子讨论下该工具的使用。

　　首先我们看以下这段XAML，一个常见的ListView，定义了一个简单的ItemTemplate，希望在ListViewItem被点击时触发Tapped事件。哪里不会点哪里，So easy！

  <ListView ItemsSource="{Binding People}">    <ListView.ItemTemplate>      <DataTemplate>        <Grid Background="LightGray" Tapped="Grid_Tapped">          <TextBlock Text="{Binding}"></TextBlock>        </Grid>      </DataTemplate>    </ListView.ItemTemplate>  </ListView>

　　悲剧总是发生在莫名之间，你发现除了戳Grid设置成LightGray的一块区域有效，其他ListViewItem区域戳了也没什么卵用……于是你很聪明地给Grid添加了HorizontalAlignment="Stretch"，然后默念了一句“妈的智障”。

　　童鞋，怎么可能会有用呢？总不能本篇到此结束吧？

　　既然没有用，那自然是到我们祭出神器Live Visual Tree一窥究竟的时候了！在Visual Studio 2015中按下F5进入Debug模式，你会发现左侧区域出现了新窗口Live Visual Tree！有点类似于Document Line，不同之处这里列出了运行时的Visual Tree。

　　如果仅仅用来看结构层次的话，就和Document Outline窗口一样了。这里我们单击最左上角的按钮“Enable selection in the running application”，之后点击运行中ListView的ListViewItem（比如“赵六”），会看到APP中的ListViewItem被红色虚线选中，同时Live Visual Tree会展开到对应元素的位置。

　　同时也可以在右侧的Live Property Explorer中看到对应元素各项属性的当前值，并且还可以任意修改各个属性的值，同时立即反应到运行中的APP上。

　　比如我们在选中“赵六”后在右侧Live Property Explorer将ListViewItemPresenter的Content属性改为“王二麻子”看一下：

　　如果细心察看ListViewItemPresenter下包含的TextBlock，会发现TextBlock对应的Text属性也已被修改成了“王二麻子”。

　　是不是感觉打开了新世界的大门，要成为海贼王的男人（此处有歧义）……

　　接下来我们选中ListViewItemPresenter下的Grid，发现虚线红框真的只有灰色那么一小块，无论设不设置HorizontalAlignment="Stretch"，但是比较发现无论选中ListViewItemPresenter还是ListViewItem都是横向撑满的，那问题容易解决咯，设置ListViewItem的HorizontalContentAlignment="Stretch"即可。修改后效果如下：

　　取消选中最左上角的“Enable selection in the running application”，再点击一下王二麻子的右侧部分，发现如愿弹框了。

　　至此，问题已经定位并且找到了解决方案。我们需要通过ListView的ItemContainerStyle属性修改ListViewItem的样式，设置HorizontalContentAlignment="Stretch"属性。（妄图给ListViewItemPresenter的童鞋会收到以下报错信息：

　　Cannot apply a Style with TargetType 'Windows.UI.Xaml.Controls.Primitives.ListViewItemPresenter' to an object of type 'Windows.UI.Xaml.Controls.ListViewItem'）.

　　修改后的XAML如下：

  <ListView ItemsSource="{Binding People}">    <ListView.ItemTemplate>      <DataTemplate>        <Grid Background="LightGray" Tapped="Grid_Tapped">          <TextBlock Text="{Binding}"></TextBlock>        </Grid>      </DataTemplate>    </ListView.ItemTemplate>    <ListView.ItemContainerStyle>      <Style TargetType="ListViewItem">        <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>      </Style>    </ListView.ItemContainerStyle>  </ListView>

　　点击有效区域的问题基本得到解决，同时Live Visual Tree的基本操作也已介绍完毕，剩下的还请各位进一步学习研究。

  public sealed partial class MainPage : Page  {    public List<string> People { get; set; }    public MainPage()    {      this.InitializeComponent();      People = new List<string>      {        "张 三",        "李 四",        "王 五",        "赵 六"      };      this.DataContext = this;    }    private async void Grid_Tapped(object sender, TappedRoutedEventArgs e)    {      var text = (e.OriginalSource as TextBlock)?.Text;      MessageDialog dialog = new MessageDialog(text);      await dialog.ShowAsync();    }  }

　　GayHub：　　

　　https://github.com/manupstairs/UWPSamples

原标题：UWP开发入门（十二）——神器Live Visual Tree

关键词：