UWP Button 类控件——Button

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的控件都包含如下三种定义格式：

 

<!--直接通过自闭包标签格式定义，包含规定必须初始化的属性值即可-->
<ContentControl .../>

<!--其中singleObject经常为布局容器，通过singleObject表示出控件的功能 -->
<contentControl>
    singleObject
</contentControl>

<!--只包含单一的字符串值，用户控件的初始化，对于不同的控件代表的含义不同，比如对于button即为其中的文字，
对于checkbox则为其说明标签-->
<contentControl>stringContent</contentControl>

 

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

<!--通过直接为Content属性赋值来初始化按钮 。对于按钮来讲Content内容即为按钮中的文字。
（初学时疑惑过为啥不用Text属性。。）-->
  <Button Content="This is string content of a Button"/>

  <!--用户自定义一个UI 元素充当按钮的功能，而不是传统的按钮形状。
在这种情况下button更像是一个布局面板，其中的内容整体呈现为一个按钮。-->
  <Button>
    <Rectangle Height="40" Width="40" Fill="Blue"/>
  </Button>

<!--只包含一个简单的字符串元素，来负责初始化按钮中的文字 -->
<Button>
　　This is string content of a Button.
</Button>

Button重要属性

 

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

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

 xaml部分：

<!--此按钮模仿清空购物车的操作，单击后会触发其中的flyout控件，并不包含业务逻辑内容 -->
<Button x:Name="DeleteButton" Content="Empty cart">
    <Button.Flyout>
        <Flyout>
<!--flyout控件，包含对用户清空购物车提示信息，以及包含DeleteConfirmation_Click事件的功能性button -->
            <StackPanel>
                <TextBlock Style="{StaticResource BaseTextBlockStyle}">
                    All items will be permanently removed from your cart.
                </TextBlock>
                <Button Click="DeleteConfirmation_Click" Margin="0,5,0,0">
                    Empty my cart
                </Button>
            </StackPanel>
        </Flyout>
    </Button.Flyout>
</Button>

 

C#部分：

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

 

 

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