原文:重新想象 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
[源码下载]

最新文章

  1. C#文件相同性判断
  2. 实现memcpy
  3. 时间，闰秒，及NTP
  4. 泛型转Datatable
  5. Unity3D 之UGUI 切换开关(toggle)
  6. SSE &amp;&amp; WebSockets
  7. Mina2 研究总结
  8. jenkins 配置qq邮箱
  9. ubuntu tomcat 8.5.33 开启https
  10. 国内可访问的稳定docker镜像
  11. sublime 使用链接
  12. String类中的equals()方法：
  13. 【Unity】Protobuf的使用与常见问题
  14. Tomcat -- 启动错误 -- 解决锦集
  15. MFC窗口阴影
  16. black-hole《XSS的原理分析与解剖》阅读笔记
  17. python基础学习1-随机验证码
  18. Python小功能汇总
  19. nginx详解反向代理、负载均衡、LNMP架构上线动态网站
  20. PRML-Chapter3 Linear Models for Regression

热门文章

  1. span标签可以使用hide()方法隐藏吗？
  2. jquery 设置select的默认值
  3. C++经典笔试题及参考答案-趋势科技
  4. Swift 编程语言新手教程
  5. Spring配置DataSource数据源
  6. Python使用cx_Oracle模块连接操作Oracle数据库
  7. &lt;Win32_17&gt;集音频和视频播放功能于一身的简易播放器
  8. Unity3D游戏开发之开发游戏带来的问题
  9. 算法起步之动态规划LCS
  10. GC日志分析