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

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

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

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