正文

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

IP云
IP云V管理员/3 阅读
12/02
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

很久以前，我们就有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

相关阅读

目录[+]