UWP开发入门(十二)——神器Live Visual Tree

本文涉及的产品
视频直播,500GB 1个月
简介: 原文:UWP开发入门(十二)——神器Live Visual Tree  很久以前,我们就有Snoop这样的工具实时修改、查看正在运行的WPF程序,那时候调个样式,修改个模板,相当滋润。随着历史的车轮陷进WP的泥潭中,无论WP7的Silverlight还是WP8.1的runtime,偶们都不能方便快捷的查看APP的可视化树(Visual Tree)了,呜呼哉,是可忍孰不可忍放下筷子就骂微软。
原文: UWP开发入门(十二)——神器Live Visual Tree

  很久以前,我们就有Snoop这样的工具实时修改、查看正在运行的WPF程序,那时候调个样式,修改个模板,相当滋润。随着历史的车轮陷进WP的泥潭中,无论WP7Silverlight还是WP8.1runtime,偶们都不能方便快捷的查看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”,之后点击运行中ListViewListViewItem(比如“赵六”),会看到APP中的ListViewItem被红色虚线选中,同时Live Visual Tree会展开到对应元素的位置。

  

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

  比如我们在选中“赵六”后在右侧Live Property ExplorerListViewItemPresenterContent属性改为“王二麻子”看一下:

  

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

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

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

  

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

  

  至此,问题已经定位并且找到了解决方案。我们需要通过ListViewItemContainerStyle属性修改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

目录
相关文章
|
2月前
|
缓存 视频直播 Linux
FFmpeg开发笔记(四十三)使用SRS开启SRT协议的视频直播服务
《FFmpeg开发实战》书中介绍了轻量级流媒体服务器MediaMTX,适合测试但不适用于生产环境。SRS是一款国产开源服务器,支持RTMP、SRT等协议,适合生产使用。要启用SRS的SRT推流,需配置`srt.conf`,开启SRT服务并配置端口。在确保FFmpeg集成libsrt后,拉流则使用类似但带有`m=request`的地址。在Windows上,同样需要集成libsrt的FFmpeg来使用ffplay拉流。SRS的日志确认了推拉流的成功。书中提供更深入的FFmpeg开发知识。
104 2
FFmpeg开发笔记(四十三)使用SRS开启SRT协议的视频直播服务
|
3月前
|
Web App开发 缓存 Linux
FFmpeg开发笔记(三十六)Linux环境安装SRS实现视频直播推流
《FFmpeg开发实战》书中第10章提及轻量级流媒体服务器MediaMTX,适合测试RTSP/RTMP协议,但不适合生产环境。推荐使用SRS或ZLMediaKit,其中SRS是国产开源实时视频服务器,支持多种流媒体协议。本文简述在华为欧拉系统上编译安装SRS和FFmpeg的步骤,包括安装依赖、下载源码、配置、编译以及启动SRS服务。此外,还展示了如何通过FFmpeg进行RTMP推流,并使用VLC播放器测试拉流。更多FFmpeg开发内容可参考相关书籍。
86 2
FFmpeg开发笔记(三十六)Linux环境安装SRS实现视频直播推流
|
2月前
|
视频直播 Linux Windows
FFmpeg开发笔记(四十二)使用ZLMediaKit开启SRT视频直播服务
《FFmpeg开发实战》书中介绍了使用MediaMTX测试RTSP/RTMP,但该工具简单,不适合生产环境。ZLMediaKit,一个支持RTSP/RTMP/SRT的国产流媒体服务器,是更好的选择。要通过ZLMediaKit和FFmpeg实现SRT推流,需确保FFmpeg已集成libsrt。ZLMediaKit默认配置文件中,SRT监听9000端口。日志显示推流和拉流成功。ZLMediaKit支持多种音视频编码,如H264、AAC等。要了解更多FFmpeg开发信息,可参考该书。
78 0
FFmpeg开发笔记(四十二)使用ZLMediaKit开启SRT视频直播服务
|
5月前
|
Linux C++
【VS Code开发】使用Live Server搭建MENJA小游戏并发布至公网远程访问
【VS Code开发】使用Live Server搭建MENJA小游戏并发布至公网远程访问
66 0
|
视频直播
详解!视频直播源码平台搭建开发:录制功能
视频直播源码平台的录制功能能够为用户提供更多方便、灵活性,同时也增加了直播内容的传播和价值,这也使录制功能成为布谷科技视频直播源码平台的必备功能之一。
详解!视频直播源码平台搭建开发:录制功能
|
数据建模 C++ Windows
live555开发笔记(一):live555介绍、windows上msvc2017编译和工程模板
live555开发笔记(一):live555介绍、windows上msvc2017编译和工程模板
live555开发笔记(一):live555介绍、windows上msvc2017编译和工程模板
|
存储 缓存 NoSQL
开发视频直播系统,视频直播系统源码是核心技术
了解视频直播行业的朋友应该清楚,对于开发视频直播系统而言,视频直播系统源码是真正的核心技术
开发视频直播系统,视频直播系统源码是核心技术
|
视频直播 运维 人工智能
视频直播开发直播软件开发需要多少钱
在现在生活中,直播可以说是我们都每天都接触的社交娱乐项目。我们对于直播开发背后的知识可能了解的不多,对于“直播+短视频”和“短视频+直播”,从字面意思来看可能没什么区别,都是两者的相结合,但是却有着内在本质的区别。
1490 0
|
视频直播 前端开发 Android开发
直播源码开发视频直播平台,不得不了解的流程
随着直播行业的不断发展,直播平台市场已基本稳定,诸如斗鱼、虎牙等头部直播平台都已选择上市之路。如今开发视频直播平台还有市场吗?答案是“有”。现在的视频直播平台在垂直细分领域的发展越来越迅速,因此在垂直细分领域视频直播平台还是大有可为的。
2006 0