你的位置:首页 > ASP.net教程

[ASP.net教程]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