重新想象 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, 1);

        }



        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, 1);

        }

    }

}

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
[源码下载]