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。。