UWP Button 类控件——Button

 

　　自从图形界面交互式软件产生那一刻开始，button就成为与用户交互最重要的控件。button的产生来源现实生活中的按钮，可以通过最简单的“点击”方式来触发click事件,从而完成用户与软件的交互。所有基于事件的控件设计思想都源于button触发事件的机制，因此可以说button是交互式软件中的“控件鼻祖”。然而面对再熟悉不过的控件，想要写一篇关于button的随笔实在不知从何而下笔。仔细想想貌似从学习软件开发开始就从来没好好学习过button。。于是借助学习UWP重新学习一下，经过重新的梳理和学习，发现原来有好多重要知识都被忽略了，于是写一篇学习随笔，好好补充一下。

 

Button 交互方式

　　

　　触发click事件是button的核心交互方式。我们可以通过在触屏上用手指或触屏输入笔点击，或者在pc用鼠标指针单击button的方式触发click事件。如果button拥有当前焦点还可以通过按回车键或空格键来触发click事件。

　　click事件的触发模式包含三种，由ClickMode属性控制，分别为：Release 、Press和Hover。以pc端为例，Release表示当鼠标指针释放瞬间触发，Press代表按下鼠标时触发，最后一种是Hover有一种是鼠标悬停在button上时触发（脑中闪过一些流氓软件。。）。 如果不是极为特殊的需求，开发中不会去改变ClickMode的值。。

 

Button定义方式：

 

　　在xaml语法中Button的定义方式十分简单，但是如果想要真正明白定义方式的由来，就需要先了解button类的一个父类——ContentControl类。　　

　　ContentControl有一个官方定义：可以通过其所包含的单一子元素来将控件本身表示出来的控件，都属于ContentControl类（很苍白无力的定义）。常见的比如Button, CheckBox, 和ScrollViewer等类型的控件，都直接继承自ContentControl类。然而，从初学者角度看，不必纠结于定义本身，只需要明白一点：所有继承自ContentControl的控件都包含如下三种定义格式：

 

     
     
     
     
          singleObject
     
     
     
      stringContent
     

 

　　因为button类直接继承自contentControl类所以以button为例，实现三种定义格式如下：

         
           
        
     　　This is string content of a Button.

Button重要属性

 

　　在UWP中button新增了一个属性——Flyout，用于简化button与轻量级UI的交互。这种轻量级UI（被称为flyout控件）可以提供额外的提示信息或者要求用户进行额外的操作，而且这种控件能简单的通过单击其外部其他区域或者直接按ESC的方式取消，也可直接无视其存在，直接进行其他操作。

　　这种轻量级UI的产生源于一个关于改善用户体验的过程：在软件的开发过程中有时需要向用户提供额外的信息，比如对删除数据操作进行确认，无权限操作的警告，需要用户输入额外信息等等。。以前这些需求在软件中的解决方案比较一致：WPF里的dialog，和web开发中的alert曾为常用技术，基本效果就是突然弹出一个提示框，霸占整个屏幕，来实现相应提示功能，等待用户处理完之后才能进行下一步操作。 这种方式现在被认为有些不太友好，于是在后期为了改善用户体验出现了类似于模态框之类的解决方案。同样，在UWP中提供了一种被称为flyout的控件通过实现一个自定义的轻量级的ui以更友好的方式实现类似功能。而且将这种常用的功能内置于button类中的flyout属性之中。举一个官方的例子：

 xaml部分：

1 
      2  3     
      
        4         
       
         5 
         6             
        
          7                 
         
           8                     All items will be permanently removed from your cart. 9                 
         10                 
        
       
      11                     Empty my cart12                 13             14         15     16 

 

C#部分：

1 private void DeleteConfirmation_Click(object sender, RoutedEventArgs e)2 {3     // 确认之后隐藏flyout控件，自带淡出效果。4     DeleteButton.Flyout.Hide();5             6     // 真正清空购物车的逻辑代码。7 }

 

 

　　当然Flyout这种新兴控件涉及到很丰富的内容，值得好好学习一下，这里暂且介绍和button相关的使用。以上就是关于button类控件的阶段性学习笔记，不想篇幅太长。。To Be Continue。。