Windows 8 Store Apps 開發教學 (2)：按鈕家族全方位解析

前言

按鈕是使用者互動的核心入口。Windows 8 Store Apps 提供豐富的按鈕家族：Button、HyperlinkButton、RepeatButton、ToggleButton、RadioButton、CheckBox、ToggleSwitch。本篇逐一拆解其特性、屬性、事件與最佳實踐範例。

一、Button - 基礎按鈕

繼承自 ButtonBase，核心在於 Click 事件與 ClickMode (Release/Press/Hover)。支援 Command 綁定 (MVVM)。

程式碼動態建立並設定 Hover 觸發

protected override void OnNavigatedTo(NavigationEventArgs e) {
    Button btn = new Button();
    btn.Content = "我是按鈕";
    btn.ClickMode = ClickMode.Hover;
    btn.Click += btn_Click;
    root.Children.Add(btn);
}
async void btn_Click(object sender, RoutedEventArgs e) {
    await new MessageDialog("觸發了按鈕的 Click 事件").ShowAsync();
}

二、HyperlinkButton - 超連結按鈕

內建 NavigateUri 導航功能，外觀像連結。需自行處理滑鼠進入/離開游標變化以提升使用者體驗。

<HyperlinkButton Name="btnLink" Content="webabcd blog" FontSize="36" Foreground="Blue"
                 NavigateUri="https://webabcd.cnblogs.com" />

游標切換 (後台)

void HyperlinkButtonDemo_Loaded(object sender, RoutedEventArgs e) {
    btnLink.PointerEntered += btnLink_PointerEntered;
    btnLink.PointerExited += btnLink_PointerExited;
}
void btnLink_PointerEntered(object sender, PointerRoutedEventArgs e) {
    CoreWindow.GetForCurrentThread().PointerCursor = new CoreCursor(CoreCursorType.Hand, 1);
}
void btnLink_PointerExited(object sender, PointerRoutedEventArgs e) {
    CoreWindow.GetForCurrentThread().PointerCursor = new CoreCursor(CoreCursorType.Arrow, 1);
}

三、RepeatButton - 長按重複觸發

按住不放會依 Delay (首次延遲) 與 Interval (重複間隔) 連續引發 Click。預設 ClickMode=Press。

<RepeatButton Name="aa" Content="click me" Delay="1000" Interval="250"
              Click="RepeatButton_Click_1" Margin="0 10 0 0" />

private void RepeatButton_Click_1(object sender, RoutedEventArgs e) {
    lblMsg.Text += "a";
}

四、ToggleButton - 可切換狀態按鈕

具備 IsChecked (true/false/null 三態)，IsThreeState 啟用第三態。事件：Checked/Unchecked/Indeterminate。

ToggleButton btn = new ToggleButton();
btn.Content = "可切換狀態的按鈕";
btn.Checked += btn_Checked;
btn.Unchecked += btn_Unchecked;
root.Children.Add(btn);

五、RadioButton - 單選按鈕

繼承 ToggleButton，透過 GroupName 分組，同組僅一可選。

<RadioButton GroupName="groupName" IsChecked="True" Content="RadioButton1" />
<RadioButton GroupName="groupName" Content="RadioButton2" />

六、CheckBox - 複選框

繼承 ToggleButton，獨立切換，無分組概念。

<CheckBox IsChecked="True" Content="CheckBox1" />
<CheckBox IsChecked="False" Content="CheckBox2" />

七、ToggleSwitch - 開關切換控件

現代 App 常用的視覺化開關，支援 Header、OnContent/OffContent 自訂顯示內容與樣式。

<Grid.Resources>
    <Style x:Key="MyToggleSwitchStyle" TargetType="ToggleSwitch">
        <Setter Property="OffContentTemplate">
            <Setter.Value>
                <DataTemplate><Grid Background="Red"><TextBlock Text="{Binding}" /></Grid></DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Grid.Resources>
<ToggleSwitch OffContent="off" Header="wifi" IsOn="True" Style="{StaticResource MyToggleSwitchStyle}">
    <ToggleSwitch.OnContent>
        <StackPanel Background="Blue"><TextBlock Text="on" TextAlignment="Right" /></StackPanel>
    </ToggleSwitch.OnContent>
</ToggleSwitch>

總結

按鈕家族各有分工：Button 執行命令、HyperlinkButton 導航、RepeatButton 長按加速、ToggleButton/RadioButton/CheckBox 處理布林/單選/多選、ToggleSwitch 提供觸控友善的開關體驗。熟練運用其屬性與事件，能構建直覺且高效的互動介面。完整原始碼請參考 源碼下載。