web前端组件PK XAML组件 一个前端萌新眼中有所不足的XAML组件

    在我刚刚接触到XAML和C#的时候，我就立即想起了另一对关系相似兄弟，HTML和JavaScript，继续学习之后，我发现二者有着极大的相似之处，作为一个web前端萌新，在了解XAML的组件的时候，自然的就会将这些组件与HTML中的标签——更准确地说是与许多前端框架封装好的组件联系起来。那么下面我将这些组件与现在流行的前端框架material-ui中相似的组件进行比对，来说说我觉得XAML不足的地方。

一.XAML中的CalendarDataPicker  VS material-ui中的CalendarDataPicker

       这次被我拿来与XAML中CalendarDataPicker比较的是前端框架material-ui中的CalendarDataPicker。首先，为了给大家一个直观的感受，我们先上图：

                                                                           

        且不说外观和配色给人带来的直观感受，单是日历的弹出方式和显示位置，就是material-ui组件的完胜，首先是文本的选择框，uwp的组件给人一种过于紧凑的，狭窄的感觉，其次是日历的弹出方式，出现在这个选择框的弹出对用户不太友好，而material-ui的蒙版实现方式给人一种在选择的感觉，并且有效的突出了当前用户应该关注的主体。

        接下我们要思考，如果我们不想能用这个我们很丑的控件，我们能不能用其余的控件来实现类似于material-ui的日历选择效果呢？如果要实现类似于material-ui的效果，我们自然需要一个文本输入框和一个蒙版效果的控件，一个类似于上面日历时间选择的控件。循着这个思路，我们很快就找到了Acrylic控件，我们可以利用这个很炫的蒙版效果来作为容器，承装CalendarView控件，也可以直接使用ContentDialog ，之后根据在CalendarView中用户做出的选择，在文本框内填入相同的内容，我想就能在一定程度上模仿出material-ui的效果了。

二.XAML中的Border组件 VS CSS中的border和background标签 

        关于XAML的Border组件，令我惊讶的是Border组件并不单单指一个组件的边框，它还兼职做这个组件的背景（background），与之相对应的就是css中的border和background了，首先说最基本的边框功能，XAML在边框的样式上远远不及css中的border属性，比如虚线框，点框等等，并且XAML中的border只能包含一个子对象，这就会导致在一些视图上比较复杂的情况下会导致代码嵌套层数过多，不利于代码的维护，如：

                                             

                                                                                       东北大学先锋网上的一个小列表                                                                     

        这是我在开发先锋网时遇到的一个实例，在html代码中中，你看到的将会仅仅是一个list和两个为img的列表成员，对于外侧的红色边框，就交给css来处理了，这样不会影响这部分的html结构，代码会给人以一种清晰明了之感。

        然而如果使用XAML的Border组件，会带来更多层次的嵌套，在小心翼翼的嵌套下还要小心是否嵌套的是单独的一个子对象，这样的开发体验明显是较差的。在李京懋同学的博客下，老师给出了这样的说法和评论，Border单独做为一个组件，是因为这样做嵌套方便，然而我觉得，Border作为单独的一个组件被拿出来是因为在windows应用中，我们可能会出现对于边框的操作，比如拖动窗口，放大和缩小某些元素，所以将Border单独拿出来作为一个组件方便其进行交互，也就是说，在html中，border单纯地起到展示的作用，而在windows开发中，Border是作为一个能够提供交互的组件存在的。那么为了Border的交互而将Border单独作为一个组件是否可取呢，我觉得不是很好，因为像点击，滑动这些交互是属于比较基本的交互，但是拖动边框，移动组件位置，改变组件大小，这些交互都会使整个布局发生变化，会增加开发难度，也不利于界面布局的设计，更何况，代码的嵌套层数变多了，结构也变得复杂了。

        另外Border组件也负责background属性，对比css中的background，它的功能上只能简单的填充颜色，这样有很多很棒的设计无法实现，而css的background的属性允许一个元素的背景可以是图片。所以我觉得在功能完备性上，Border是不及css属性中的background和border的。

三. XAML中的Canvas(ink canvas) VS HTML5中的canvas标签

        提到Canvas，作为一个web前端的萌新自然而然会联想的HTML5中的canvas以及由它衍生出来的丰富多彩的交互如：众多基于canvas的众多小游戏，一些被用在数据可视化的库，如Echarts。但是XAML中的canvas与之完全不同，XAML中的canvas更多的是一个容器，用来绝对定位容器内的组件，但是我认为，这样对于Canvas这个有着极强交互能力的组件来说，颇有些大材小用了，而实现XAML交互功能的，我觉得就是ink Canvas组件了，但是在使用之后，我又不禁有些失望，ink Canvas能提供的功能就略微有限了，感觉和HTML5中的Canvas标签还是有一定差距的，也许是web开发和windows开发的侧重点不尽相同吧，不过我还是不太能找的到非要用canvas进行布局的理由。

        https://codepen.io/NightSiesta/pen/EZMPVb（基于HTML5中canvas的小画板，展现出了很强的交互能力）

四.XAML中的TextBox&Lable VS Material-UI中的TextField组件

        作为最最基本的TextBox，我觉得它提供的功能有些过于简单，比如我想实现带有错误提示的输入框，例如：

像这种错误提示或提醒，在我们日常开发的时候是很常见的，只要你的作品中能够提供输入功能（无论是输入用户名，密码还是评论），都需要对这些用户的输入加以限制，而material-ui在text-feild组件中直接加入了errorText属性，再使用JS根据用户输入控制errorText，这样做非常简洁，并且较为美观，与整体风格相符。而如果我想在XAML实现这样一个输入错误提示，我们不仅要用到TextBox组件，还要与Label进行配合（我没有在Gallery中找到Label，但是却在官方文档中发现了它）使用，Label的字体大小，样式还需要自己进行调整，之后还需要使用Label的target来制定判断错误的规则，不免有些繁琐。我觉得作为最基本也是最常用的一些功能，像用户输入这种使用的较为频繁的组件，可定制性应该尽可能强，这样省去了不少繁琐的步骤。

五.XAML中的MediaPlayer VS HTML5中的video标签

        在视频播放的方面，HTML5中的video标签提供了丰富的功能，比如加速视频，减速视频

                                                                                     你和打开新世界大门只有一个1.5x的距离                                                                                       

除了功能上更加丰富，在视频格式的兼容上，只需在video标签中提供多种视频格式的source就能解决视频格式和用户设备的兼容性问题，更何况浏览器是一个巨大的市场，打开浏览器，再也不需要加载什么视频播放插件，有浏览器就能看视频，这使得HTML5播放器有着天然的市场优势，也就更会有人愿意投入到它功能的完善和开发上。

        在“精心”地挑选出这五处不足之处之后，我渐渐地发现了一个问题和现象，我们所发现的这些不足和问题，可能仅仅是当初设计时考虑到很多我们接触不到或者在我们眼中基本被淘汰的技术，或者我们在进行平日开发中考虑不到的情况而作出的妥协，让步以及兼容性。这一点在我发现Border是一个组件的时候尤为突出。起初习惯了将border作为一个css样式的我也不能够理解为什么要这么做，直到我在查阅资料的时候看到了某个Windows应用能够进行窗口的拖动以及整体的放大与缩小，我才恍然大悟，原来Border在Windows开发的时候，是存在拖动事件的，这与我在css中使用的Border是两种完全不同的东西，其实并没有那么的不合理，只是我们没有相关经验，没有去详细的，从多角度了解我们认为有问题的这些组件，这些事物。也让我理解了，开发平台的不同，会导致组件的风格和功能上极大的不同。

        所以我觉得，当我真正的进行过Windows的开发之后，再回来看这些我觉得不合理的组件的时候，能够发现这些设计所包含的那些深意。