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