看起来没用的 UWP Controls

最新推荐文章于 2019-02-19 11:26:21 发布

Troublor

最新推荐文章于 2019-02-19 11:26:21 发布

阅读量561

点赞数

分类专栏： UWP 文章标签： XAML UWP C#

本文链接：https://blog.csdn.net/troublor/article/details/79599266

版权

UWP 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Hub & ListView

看到Hub第一感觉就是Win8时代的横向滑动布局，那个时候就觉得很鸡肋，既不方便，又不符合使用习惯，于是就觉得这个控件没有用了，保留下来的原因也许是为了向前兼容把。

然后，被自己打脸了，刷IT之家UWP的时候，突然发现这个Hub不就正是用在了文章列表的最顶端的吗
这里写图片描述

不过话又说回来了，我也没看过IT之家UWP的源码，也不一定用的就是Hub控件，但至少Hub控件在功能上是满足这里的要求的

局部的Horizontal Scrolling，在主流使用习惯都是Vertical Scrolling的情况下，从原来的纵向一维，扩展到了二维，恰到好处地扩展了应用的展示空间。仔细想象iOS应用也很经常用这种方式，App Store首页上每一个小栏目就是类似于这里的Hub这样横向滑动。记着可能是Win10周年更新的时候，Windows Store首页里面的小栏目和App Store一样都是横向滑动的，但是后来忘了在哪一版就改成了，没有横向滑动，而是点一个按钮查看所有应用了，觉着还有一丝惋惜。。。

不过总体纵向滑动局部横向滑动的布局似乎会有一个问题（我猜也可能是Microsoft在Windows Store里取消这个布局的原因），就是在使用鼠标滚轮横向滚动的时候，横向滚动到最后回立刻进入纵向滚动，这一点非常恼人，让用户无法知道是不是横向滚动到最后了（没有其他内容了）。IT之家UWP现在还有这个问题，我刷文章的时候就异常难受。在触摸设备上这个问题倒不会出现，因为可以准确区分是横向滑动还是纵向滑动。前两天看到一个博主说希望Microsoft让横向滑动可以使用Ctrl+滚轮触发，我觉得这是一个解决方案，只不过稍微有点麻烦。或者我觉得也可以根据鼠标的焦点判断当前是否在横向滑动的区域，如果是，则永不触发纵向滑动。这个好像更直观一些，很多网站的首页也是这么处理的。

然后我就想再现一下这个问题。（准备被打脸）

<Page
    x:Class="HelloWorld.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HelloWorld"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="2*"></ColumnDefinition>
            <ColumnDefinition Width="3*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <ParallaxView Source="{Binding ElementName=listView}" VerticalShift="500">
            <Image Source="ms-appx:///Assets/cliff.jpg" />
        </ParallaxView>
        <ListView x:Name="listView">
            <ListView.Header>
                <Hub Grid.Row="0"
                        x:Name="NewsHub"
                        MinHeight="400"
                        Header="News"
                        IsTabStop="True"
                        UseSystemFocusVisuals="True" IsHoldingEnabled="True" IsRightTapEnabled="True" IsDoubleTapEnabled="False">
                    <HubSection MinWidth="600" Header="Latest">
                        <DataTemplate>
                            <Grid>
                                <TextBlock Style="{ThemeResource BodyTextBlockStyle}" Text="The most recent news goes here." />
                            </Grid>
                        </DataTemplate>
                    </HubSection>

                    <HubSection
                            MinWidth="250"
                            Background="#222222"
                            Header="Tech"
                            IsHeaderInteractive="True"
                            RequestedTheme="Dark">
                        <DataTemplate>
                            <StackPanel>
                                <TextBlock Style="{ThemeResource BodyTextBlockStyle}" Text="Rich content goes here." />
                                <TextBlock Style="{ThemeResource BodyTextBlockStyle}" Text="Click the &quot;See more&quot; button to go to the Tech news page." />
                            </StackPanel>
                        </DataTemplate>
                    </HubSection>

                    <HubSection
                            MinWidth="250"
                            Background="#444444"
                            Header="Sports"
                            IsHeaderInteractive="True">
                        <DataTemplate>
                            <StackPanel>
                                <TextBlock Style="{ThemeResource BodyTextBlockStyle}" Text="Rich content goes here." />
                                <TextBlock Style="{ThemeResource BodyTextBlockStyle}" Text="Click the &quot;See more&quot; button to go to the Sports news page." />
                            </StackPanel>
                        </DataTemplate>
                    </HubSection>

                    <HubSection
                            MinWidth="250"
                            Background="#333333"
                            Header="Local"
                            IsHeaderInteractive="True"
                            RequestedTheme="Dark">
                        <DataTemplate>
                            <StackPanel>
                                <TextBlock Style="{ThemeResource BodyTextBlockStyle}" Text="Rich content goes here." />
                                <TextBlock Style="{ThemeResource BodyTextBlockStyle}" Text="Click the &quot;See more&quot; button to go to the Local news page." />
                            </StackPanel>
                        </DataTemplate>
                    </HubSection>

                    <HubSection
                            MinWidth="250"
                            Background="#555555"
                            Header="World"
                            IsHeaderInteractive="True">
                        <DataTemplate>
                            <StackPanel>
                                <TextBlock Style="{ThemeResource BodyTextBlockStyle}" Text="Rich content goes here." />
                                <TextBlock Style="{ThemeResource BodyTextBlockStyle}" Text="Click the &quot;See more&quot; button to go to the World news page." />
                            </StackPanel>
                        </DataTemplate>
                    </HubSection>
                </Hub>
            </ListView.Header>
            <ListView.Items>
                <Rectangle Fill="Red" Height="100px" Width="500px"></Rectangle>
                <Rectangle Fill="Green" Height="100px" Width="500px"></Rectangle>
                <Rectangle Fill="Red" Height="100px" Width="500px"></Rectangle>
                <Rectangle Fill="Green" Height="100px" Width="500px"></Rectangle>
                <Rectangle Fill="Red" Height="100px" Width="500px"></Rectangle>
                <Rectangle Fill="Green" Height="100px" Width="500px"></Rectangle>
                <Rectangle Fill="Red" Height="100px" Width="500px"></Rectangle>
                <Rectangle Fill="Green" Height="100px" Width="500px"></Rectangle>
            </ListView.Items>
        </ListView>
    </Grid>
</Page>

上面是我用Grid+ListView+Hub按照IT之家UWP在桌面分辨率下布局构建的一个类似的布局，没做响应式什么的处理，只是想复现一下上面说的那个横向和纵向滑动的问题

这里写图片描述

结果，实现效果完美的和我上面说的：
这里写图片描述
方式一样，但根本就没有出现那个问题:(。

这下就尴尬了。也许是Microsoft更新了控件？也许也可能是IT之家UWP根本用的就不是ListView和Hub的组合！看不到源码我也就无从考证了。只是我总觉得IT之家UWP这样的交互方式有些反人类。不知道为什么他们更新这么频繁却总是不解决这个问题。

MediaElement & MediaPlayerElement

MediaPlayerElement is replacement for "old" MediaElement.

官网是这么写的。
但我试了试并没有发现有什么区别，可能是内部实现上有一些差别把
StackOverflow上有人是这么说的

Media Player element uses Media Playback Source in form of 
MediaSource class which has many methods so it can provide 
media source by several ways like

1. Streams
2. StorageFiles
3. Uri

MediaPlayerElement提供了更多的媒体文件来源的方式？难道MediaElement只有单一的文件来源方式？虽然看了看官网确实只有local file这么一个来源，但我还是持怀疑态度。

至于这个控件本身，我觉得功能挺多的，至少比iOS内置播放器功能多，只是，在全屏播放的时候，鼠标只要有移动便会打开播放控制栏，而这个控制栏高度还不小，即使有半透明的处理也还是会挡住一部分视频。关键是挡住就挡住把，还不能主动关闭，必须等鼠标无动作一段时间之后才会消失，这就会挡住很多东西尤其是字幕啊。

使用过好几个UWP的播放器，他们对这个问题都有不同的处理，有的是左键点击一下画面就会关闭控制栏，但是这个操作在触摸设备上没什么问题，毕竟智能手机出现以来我们都是这么用视频播放器的，但是在桌面端就和以往的体验不同了，以往都是点一下暂停，双击全屏，现在是点一下出控制栏，然后再点击暂停，总感觉很麻烦。但这可能也是Microsoft在统一桌面端和移动端之路上的痛点把。不同的设备本来有着不同的使用习惯，想统一起来就必定要有改变，而改变就是要有牺牲的。不过我觉得这个问题可以做的更好，比如探测设备以使用不同的使用方式等等，不过这还是要慢慢磨合把。
这里写图片描述

RelativePanel

官方的例子是这样的

<RelativePanel Width="300" Grid.Column="1">
            <Rectangle x:Name="Rectangle1" Fill="Red" Height="50" Width="50"/>
            <Rectangle x:Name="Rectangle2" Fill="Blue" Height="50" Width="50" RelativePanel.RightOf="Rectangle1" Margin="8,0,0,0"/>
            <Rectangle x:Name="Rectangle3" Fill="Green" Height="50" Width="50" RelativePanel.AlignRightWithPanel="True"/>
            <Rectangle x:Name="Rectangle4" Fill="Yellow" Height="50" Width="50" RelativePanel.Below="Rectangle3" RelativePanel.AlignHorizontalCenterWith="Rectangle3" Margin="0,8,0,0"/>
        </RelativePanel>

这里写图片描述

这个控件，的用法很诱人，给开发者一种精确定位很方便的感觉。只是，换作我在开发过程中，我是不会这么用的。这种类似于点对点的相对布局方式，在开发一个小应用程序的时候着实很方便，不用费尽心思地搭Grid，不用调位置，对齐。。。但是一个很有趣的现象是，CSS，作为一种应用非常广泛的样式表，从来没有这样的样式可供使用（网页做的多的我可能以后经常会拿XAML和HTML+CSS做比较）。

用这个控件（至少我目前觉得），眼前的工作确实方便快捷，可是布局的响应重构怎么办，以后应用布局要扩展怎么办，难道一个一个去写相对位置吗？这种方法绝对是不符合任何一种设计模式的，况且你这么做了，控件之间的耦合度会变得很高（自己造的概念），等应用做大了，xaml文件有上千行，你要修改了一个控件你怎么知道有没有其他控件的布局是相对与它的？这对于一个庞大的开发团队来说简直是灾难。

所以我觉得这个控件还是少用为好，毕竟用Grid以及其他布局控件完全可以实现这个功能。

RepeatButton & ToggleButton

<RepeatButton Content="Click and hold" Click="RepeatButton_Click" />

对于这个RepeatButton这个按钮一开始没有Get它的点，觉得和普通按钮没有什么不同，后来才发现他是按住不松手会周期性出发事件的，这里我就提一个小点把，希望这个控件可以设置触发时间的间隔时间。这好像是挺重要的一个点。

还有ToggleButton：

<ToggleButton Content="ToggleButton" Click="Button_Click"/>

这个我想了半天没明白它存在的意义是什么，觉得完全可以使用ToggleSwitch代替，而且ToggleSwitch还更加美观。反正我是没在什么应用中看到ToggleButton的使用，估计开发者们都和我想的一样把:)

——————————我是分割线——————————

（发布后的修改）这里更正一下，之前没仔细看RepeatButton的文档，现在发现里面其实是有Interval这个属性的。算是我错怪它了:P

ToggleButton

这里写图片描述
这个放在最后写，是比较玄乎的一个。其实这个控件很简单，就是一个开关，使用也非常广泛，在其他系统如iOS和Android中都非常常见。但是当你用鼠标狂点的时候:P，LOL，就会发现它会丢失一些点击事件，这似乎是个小Bug，但是和前段时间iOS11计算器的那个1+2+3=24的Bug如出一辙，都是在快速点击的时候会丢失一些Click事件。

虽然这不是什么大问题，毕竟没什么人回去这么暴力测试这个控件，这格式一个switch也不是计算机按钮，但是从一个程序员追求无bug的初衷出发，还是应该fix的

而且，吐槽一下windows设置中的ToggleSwitch经常卡住，不知道是ToggleSwitch本身的缺陷还是其他代码引起的延迟，经常会出现点了之后没反应的情况，其他系统如iOS的switch就没有这个情况。

总结一下

UWP的控件库还是挺丰富的，虽然有一些冗余的控件，但是基本功能还算完善。而且对于我们初学者来说，其实有时候你觉得一个控件有缺陷，很大的可能性是其实你并不了解这个控件。

顺便提一下，觉得原生控件样式单一以及功能不强的这种想法我觉得纯属是不（shua）对（liu）的（mang），开个玩笑:P，但是这只是原生控件啊，java的原生控件更丑。

原生控件不是要功能多丰富，效果多么炫酷。你需要的并不一定是别人需要的，基本功能提供的太多只能体现出臃肿。你有需求可以自己定制，xaml也提供样式表也可以扩展，原生控件只是提供一个快速的模板。就像Bootstrap一样，你要是真全靠他了，那就一千一万个应用都长得一样了，这样很好么。。。

Troublor

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
看起来没用的 UWP Controls

Hub &amp; ListView看到Hub第一感觉就是Win8时代的横向滑动布局，那个时候就觉得很鸡肋，既不方便，又不符合使用习惯，于是就觉得这个控件没有用了，保留下来的原因也许是为了向前兼容把。然后，被自己打脸了，刷IT之家UWP的时候，突然发现这个Hub不就正是用在了文章列表的最顶端的吗不过话又说回来了，我也没看过IT之家UWP的源码，也不一定用的就是Hub控件，但至少Hu...
复制链接

扫一扫