重新想象 Windows 8 Store Apps (2) - 控件之按钮控件: Button, HyperlinkButton, RepeatButton, ToggleButton, RadioButton, CheckBox, ToggleSwitch

原文:重新想象 Windows 8 Store Apps (2) - 控件之按钮控件: Button, HyperlinkButton, RepeatButton, ToggleButton, RadioButton, CheckBox, ToggleSwitch

[源码下载]

重新想象 Windows 8 Store Apps (2) - 控件之按钮控件: Button, HyperlinkButton, RepeatButton, ToggleButton, RadioButton, CheckBox, ToggleSwitch

作者：webabcd

介绍

重新想象 Windows 8 Store Apps 之按钮控件

• Button - 按钮控件
• HyperlinkButton - 超链按钮
• RepeatButton - 按住后会重复执行单击操作的按钮
• ToggleButton - 可切换状态的按钮
• RadioButton - 单选框控件
• CheckBox - 复选框控件
• ToggleSwitch - 状态切换控件

示例
1、Button 的 Demo
ButtonDemo.xaml.cs

/*
 * Button - 按钮控件
 */

using System;
using Windows.UI.Popups;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;

namespace XamlDemo.Controls
{
    public sealed partial class ButtonDemo : Page
    {
        public ButtonDemo()
        {
            this.InitializeComponent();
        }

        protected override void OnNavigatedTo

(NavigationEventArgs e)
        {
            /*
             * Button - 按钮控件，其全部功能是通过其基类 ButtonBase 提供的
             *     ClickMode - 引发 Click 事件的模式：ClickMode.Release（默认值）, ClickMode.Press, ClickMode.Hover
             *     IsPointerOver - 设备指针（鼠标或手指等）是否在按钮上
             *     IsPressed - 当前按钮是否处于按下的状态
             *     Command 和 CommandParameter 等写到 MVVM 的时候再详细写
             */

            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();
        }
    }
}

2、HyperlinkButton 的 Demo
HyperlinkButtonDemo.xaml

<Page
    x:Class="XamlDemo.Controls.HyperlinkButtonDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">
        <StackPanel Margin="120 0 0 0">

            <!--
                HyperlinkButton - 带超链接的按钮
                    NavigateUri - 按钮要导航到的 Uri
            -->
            <HyperlinkButton Name="btnLink" Content="webabcd blog" FontSize="36" Foreground="Blue" NavigateUri="http://webabcd.cnblogs.com" />

        </StackPanel>
    </Grid>
</Page>

HyperlinkButtonDemo.xaml.cs

/*
 * HyperlinkButton - 超链按钮
 */

using Windows.UI.Xaml.Controls;

namespace XamlDemo.Controls
{
    public sealed partial class HyperlinkButtonDemo : Page
    {
        public HyperlinkButtonDemo()
        {
            this.InitializeComponent();

            this.Loaded += HyperlinkButtonDemo_Loaded;
        }

        void HyperlinkButtonDemo_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs 

e)
        {
            // 为 HyperlinkButton 加上鼠标移入变手型的功能
            btnLink.PointerEntered += btnLink_PointerEntered;
            btnLink.PointerExited += btnLink_PointerExited;
        }

        void btnLink_PointerEntered(object sender, 

Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
        {
            // 鼠标移入 HyperlinkButton 变手型
            Windows.UI.Core.CoreWindow.GetForCurrentThread().PointerCursor = new Windows.UI.Core.CoreCursor(Windows.UI.Core.CoreCursorType.Hand, );
        }

        void btnLink_PointerExited(object sender, 

Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
        {
            // 鼠标移出 HyperlinkButton 变箭头
            Windows.UI.Core.CoreWindow.GetForCurrentThread().PointerCursor = new Windows.UI.Core.CoreCursor(Windows.UI.Core.CoreCursorType.Arrow, );
        }
    }
}

3、RepeatButton 的 Demo
RepeatButtonDemo.xaml

<Page
    x:Class="XamlDemo.Controls.RepeatButtonDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">
        <StackPanel Margin="120 0 0 0">

            <TextBlock Name="lblMsg" TextWrapping="Wrap" />

            <!--
                RepeatButton - 按住后会重复执行单击操作的按钮
                    Delay - 按住按钮后，会先执行一次单击操作，然后在此属性指定的时间后开始重复执行单击操作，单位毫秒，默认值 250
                    Interval - 重复执行单击操作时，这个重复时间的间隔，单位毫秒，默认值 250

                注：Button 的 ClickMode 默认为 Release，而 RepeatButton 的 ClickMode 默认为 Press
            -->
            <RepeatButton Name="aa" Content="click me" Delay="1000" Interval="250" Click="RepeatButton_Click_1" Margin="0 10 0 0" />

        </StackPanel>
    </Grid>
</Page>

RepeatButtonDemo.xaml.cs

/*
 * RepeatButton - 按住后会重复执行单击操作的按钮
 */

using Windows.UI.Xaml.Controls;

namespace XamlDemo.Controls
{
    public sealed partial class RepeatButtonDemo : Page
    {
        public RepeatButtonDemo()
        {
            this.InitializeComponent();
        }

        private void RepeatButton_Click_1(object 

sender, Windows.UI.Xaml.RoutedEventArgs e)
        {
            lblMsg.Text += "a";
        }
    }
}

4、ToggleButton 的 Demo
ToggleButtonDemo.xaml.cs

/*
 * ToggleButton - 可切换状态的按钮
 */

using System;
using Windows.UI.Popups;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;

namespace XamlDemo.Controls
{
    public sealed partial class ToggleButtonDemo : Page
    {
        public ToggleButtonDemo()
        {
            this.InitializeComponent();

            this.Loaded += ToggleButtonDemo_Loaded;
        }

        void ToggleButtonDemo_Loaded(object sender, RoutedEventArgs e)
        {
            /*
             * ToggleButton - 可切换状态的 Button
             *     IsThreeState - 是否支持 3 状态
             *     IsChecked - 按钮的选中状态: false, true, null
             *     Checked - 按钮变为选中状态后所触发的事件
             *     Unchecked - 按钮变为未选中状态后所触发的事件
             *     Indeterminate - 按钮变为不确定状态后所触发的事件
             */

            ToggleButton btn = new ToggleButton();
            btn.Content = "可切换状态的按钮";
            btn.Checked += btn_Checked;
            btn.Unchecked += btn_Unchecked;

            root.Children.Add(btn);
        }

        async void btn_Unchecked(object sender, 

RoutedEventArgs e)
        {
            await new MessageDialog("按钮为未选中

状态").ShowAsync();
        }

        async void btn_Checked(object sender, 

RoutedEventArgs e)
        {
            await new MessageDialog("按钮为选中状

态").ShowAsync();
        }
    }
}

5、RadioButton 的 Demo
RadioButtonDemo.xaml

<Page
    x:Class="XamlDemo.Controls.RadioButtonDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">
        <StackPanel Name="root" Margin="120 0 0 0">

            <!--
                RadioButton - 单选框控件（继承自 ToggleButton）
                    GroupName - 单选框的组名，同一组单选框只能有一个为选中状态
            -->
            <RadioButton GroupName="groupName" IsChecked="True" Content="RadioButton1" />
            <RadioButton GroupName="groupName" Content="RadioButton2" />

        </StackPanel>
    </Grid>
</Page>

6、CheckBox 的 Demo
CheckBoxDemo.xaml

<Page
    x:Class="XamlDemo.Controls.CheckBoxDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">
        <StackPanel Name="root" Margin="120 0 0 0">

            <!--
                CheckBox -  复选框控件（继承自 ToggleButton）
            -->
            <CheckBox IsChecked="True" Content="CheckBox1" />

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

        </StackPanel>
    </Grid>
</Page>

7、ToggleSwitch 的 Demo
ToggleSwitchDemo.xaml

<Page
    x:Class="XamlDemo.Controls.ToggleSwitchDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">
        <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>

        <StackPanel Name="root" Margin="120 0 0 0">

            <!--
                ToggleSwitch - 状态切换控件
                    Header - 标题内容
                    OffContent - 关闭状态的显示内容
                    OnContent - 打开状态的显示内容
                    IsOn - 是否是 On 的状态
                    Toggled - 状态改变后所触发的事件
            -->
            <ToggleSwitch OffContent="off" Header="wifi" IsOn="True" Style="{StaticResource MyToggleSwitchStyle}">
                <!--
                    自定义打开状态的显示内容
                -->
                <ToggleSwitch.OnContent>
                    <StackPanel Background="Blue">
                        <TextBlock Text="on" TextAlignment="Right" />
                    </StackPanel>
                </ToggleSwitch.OnContent>
            </ToggleSwitch>
        </StackPanel>
    </Grid>
</Page>

OK
[源码下载]