背水一战 Windows 10 (31) - 控件(按钮类): ButtonBase, Button, HyperlinkButton, RepeatButton, ToggleButton, App

【背水一战 Windows 10 (31) - 控件(按钮类): ButtonBase, Button, HyperlinkButton, RepeatButton, ToggleButton, App】五陵年少金市东,银鞍白马渡春风。这篇文章主要讲述背水一战 Windows 10 (31) - 控件(按钮类): ButtonBase, Button, HyperlinkButton, RepeatButton, ToggleButton, App相关的知识,希望能为你提供帮助。
原文:背水一战 Windows 10 (31) - 控件(按钮类): ButtonBase, Button, HyperlinkButton, RepeatButton, ToggleButton, AppBarButton, AppBarToggleButton[源码下载]



背水一战 Windows 10 (31) - 控件(按钮类): ButtonBase, Button, HyperlinkButton, RepeatButton, ToggleButton, AppBarButton, AppBarToggleButton

作者:webabcd


介绍
背水一战 Windows 10 之 控件(按钮类)

  • ButtonBase
  • Button
  • HyperlinkButton
  • RepeatButton
  • ToggleButton
  • AppBarButton
  • AppBarToggleButton


示例
1、ButtonBase(基类) 的示例
Controls/ButtonControl/ButtonBaseDemo.xaml
< Page x:Class="Windows10.Controls.ButtonControl.ButtonBaseDemo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Windows10.Controls.ButtonControl" 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="10 0 10 10" Name="root"> < !-- Button - 按钮控件,继承自 ButtonBase,下面介绍 ButtonBase 的相关知识点 Click - 单击事件 ClickMode - 引发 Click 事件的模式:ClickMode.Release(默认值), ClickMode.Press, ClickMode.Hover IsPointerOver - 设备指针(鼠标或手指等)是否在按钮上 IsPressed - 当前按钮是否处于按下的状态 Command - 参见“ 绑定” 部分 CommandParameter - 参见“ 绑定” 部分 --> < Button Name="button1" Content="我是 button1" ClickMode="Release" Click="button1_Click" Margin="5" /> < Button Name="button2" Content="我是 button2" ClickMode="Press" Click="button2_Click" Margin="5" /> < Button Name="button3" Content="我是 button3" ClickMode="Hover" Click="button3_Click" Margin="5" /> < TextBlock Name="lblMsg1" Margin="5" /> < TextBlock Name="lblMsg2" Margin="5" /> < /StackPanel> < /Grid> < /Page>

Controls/ButtonControl/ButtonBaseDemo.xaml.cs
/* * ButtonBase(基类) - 按钮控件基类(继承自 ContentControl, 请参见 /Controls/BaseControl/ContentControlDemo/) */using System; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; namespace Windows10.Controls.ButtonControl { public sealed partial class ButtonBaseDemo : Page { public ButtonBaseDemo() { this.InitializeComponent(); this.Loaded += ButtonBaseDemo_Loaded; }private void ButtonBaseDemo_Loaded(object sender, RoutedEventArgs e) { DispatcherTimer dTimer = new DispatcherTimer(); dTimer.Interval = TimeSpan.Zero; dTimer.Tick += DTimer_Tick; dTimer.Start(); }private void DTimer_Tick(object sender, object e) { lblMsg1.Text = $"button1 IsPointerOver:{button1.IsPointerOver}, IsPressed:{button1.IsPressed}"; lblMsg1.Text += Environment.NewLine; lblMsg1.Text += $"button2 IsPointerOver:{button2.IsPointerOver}, IsPressed:{button2.IsPressed}"; lblMsg1.Text += Environment.NewLine; // 鼠标移动到 button3 上时,其 IsPointerOver 和 IsPressed 均为 true,因为其 ClickMode 为 Hover lblMsg1.Text += $"button3 IsPointerOver:{button3.IsPointerOver}, IsPressed:{button3.IsPressed}"; }// ClickMode.Release - 鼠标按下并抬起即触发 Click 事件(默认值) private void button1_Click(object sender, RoutedEventArgs e) { lblMsg2.Text += "button1 ClickMode.Release"; lblMsg2.Text += Environment.NewLine; }// ClickMode.Press - 鼠标按下即触发 Click 事件 private void button2_Click(object sender, RoutedEventArgs e) { lblMsg2.Text += "button2 ClickMode.Press"; lblMsg2.Text += Environment.NewLine; }// ClickMode.Hover - 鼠标经过即触发 Click 事件 private void button3_Click(object sender, RoutedEventArgs e) { lblMsg2.Text += "button3 ClickMode.Hover"; lblMsg2.Text += Environment.NewLine; } } }


2、Button 的示例
Controls/ButtonControl/ButtonDemo.xaml
< Page x:Class="Windows10.Controls.ButtonControl.ButtonDemo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Windows10.Controls.ButtonControl" 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="10 0 10 10" Name="root"> < !-- Button - 按钮控件 Flyout - 按钮控件关联的 FlyoutBase 控件 --> < Button Name="button1" Content="按我弹出 Flyout" Margin="5"> < Button.Flyout> < Flyout> < StackPanel> < TextBlock> 我是 Flyout 中的内容< /TextBlock> < /StackPanel> < /Flyout> < /Button.Flyout> < /Button> < /StackPanel> < /Grid> < /Page>

Controls/ButtonControl/ButtonDemo.xaml.cs
/* * Button - 按钮控件(继承自 ButtonBase, 请参见 /Controls/ButtonControl/ButtonBaseDemo.xaml) */using Windows.UI.Xaml.Controls; namespace Windows10.Controls.ButtonControl { public sealed partial class ButtonDemo : Page { public ButtonDemo() { this.InitializeComponent(); } } }


3、HyperlinkButton 的示例
Controls/ButtonControl/HyperlinkButtonDemo.xaml
< Page x:Class="Windows10.Controls.ButtonControl.HyperlinkButtonDemo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Windows10.Controls.ButtonControl" 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="10 0 10 10"> < !-- HyperlinkButton - 带超链接的按钮 NavigateUri - 按钮要导航到的 Uri --> < HyperlinkButton Name="btnLink" Content="webabcd blog" FontSize="36" Foreground="Blue" NavigateUri="http://webabcd.cnblogs.com" /> < /StackPanel> < /Grid> < /Page>

Controls/ButtonControl/HyperlinkButtonDemo.xaml.cs
/* * HyperlinkButton - 超链按钮(继承自 ButtonBase, 请参见 /Controls/ButtonControl/ButtonBaseDemo.xaml) */using Windows.UI.Xaml.Controls; namespace Windows10.Controls.ButtonControl { public sealed partial class HyperlinkButtonDemo : Page { public HyperlinkButtonDemo() { this.InitializeComponent(); } } }


4、RepeatButton 的示例
Controls/ButtonControl/RepeatButtonDemo.xaml
< Page x:Class="Windows10.Controls.ButtonControl.RepeatButtonDemo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Windows10.Controls.ButtonControl" 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="10 0 10 10"> < TextBlock Name="lblMsg" TextWrapping="Wrap" Margin="5" /> < !-- RepeatButton - 按住后会重复触发 Click 事件的按钮 Delay - 按住按钮后,会先触发一次 Click 事件,然后在此属性指定的时间后开始重复触发 Click 事件,单位毫秒,默认值 250 Interval - 重复触发 Click 事件时,这个重复时间的间隔,单位毫秒,默认值 250注:Button 的 ClickMode 默认为 Release,而 RepeatButton 的 ClickMode 默认为 Press --> < RepeatButton Name="repeatButton" Content="按住" Delay="1000" Interval="250" Click="repeatButton_Click" Margin="5" /> < /StackPanel> < /Grid> < /Page>

Controls/ButtonControl/RepeatButtonDemo.xaml.cs
/* * RepeatButton - 按住后会重复触发 Click 事件的按钮(继承自 ButtonBase, 请参见 /Controls/ButtonControl/ButtonBaseDemo.xaml) */using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; namespace Windows10.Controls.ButtonControl { public sealed partial class RepeatButtonDemo : Page { public RepeatButtonDemo() { this.InitializeComponent(); }private void repeatButton_Click(object sender, RoutedEventArgs e) { lblMsg.Text += "x"; } } }


5、ToggleButton 的示例
Controls/ButtonControl/ToggleButtonDemo.xaml
< Page x:Class="Windows10.Controls.ButtonControl.ToggleButtonDemo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Windows10.Controls.ButtonControl" 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="10 0 10 10"> < TextBlock Name="lblMsg" Margin="5" /> < !-- ToggleButton - 可切换状态的按钮 IsThreeState - 是否支持 3 状态(默认值: false) IsChecked - 按钮的选中状态: false, true, null(修改此属性后会触发 Checked 事件或 Unchecked 事件或 Indeterminate 事件) Checked - 按钮变为选中状态后所触发的事件 Unchecked - 按钮变为未选中状态后所触发的事件 Indeterminate - 按钮变为不确定状态后所触发的事件 --> < ToggleButton Name="toggleButton1" Content="可切换状态的按钮" Margin="5" IsThreeState="False" Checked="toggleButton1_Checked" Unchecked="toggleButton1_Unchecked" Indeterminate="toggleButton1_Indeterminate" /> < ToggleButton Name="toggleButton2" Content="可切换状态的按钮" Margin="5" IsThreeState="True" Checked="toggleButton2_Checked" Unchecked="toggleButton2_Unchecked" Indeterminate="toggleButton2_Indeterminate" /> < !-- 此处文本框显示的结果如下: toggleButton3_Checked toggleButton3_Loaded Page_Loaded --> < TextBlock Name="lblToggleButton3" Margin="5 20 0 0" /> < !-- 对于 IsChecked="True" 的 ToggleButton 控件来说,在它触发 Loaded 事件之前会先触发 Checked 事件 --> < ToggleButton Name="toggleButton3" Content="可切换状态的按钮" IsChecked="True" Loaded="toggleButton3_Loaded" Checked="toggleButton3_Checked" Margin="5" /> < /StackPanel> < /Grid> < /Page>

Controls/ButtonControl/ToggleButtonDemo.xaml.cs
/* * ToggleButton - 可切换状态的按钮(继承自 ButtonBase, 请参见 /Controls/ButtonControl/ButtonBaseDemo.xaml) */using System; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; namespace Windows10.Controls.ButtonControl { public sealed partial class ToggleButtonDemo : Page { public ToggleButtonDemo() { this.InitializeComponent(); this.Loaded += ToggleButtonDemo_Loaded; }private void toggleButton1_Checked(object sender, RoutedEventArgs e) { lblMsg.Text = $"toggleButton1_Checked, IsChecked:{toggleButton1.IsChecked}"; }private void toggleButton1_Unchecked(object sender, RoutedEventArgs e) { lblMsg.Text = $"toggleButton1_Unchecked, IsChecked:{toggleButton1.IsChecked}"; }// 这个事件不会被触发,因为 toggleButton1 的 IsThreeState 的值为 false private void toggleButton1_Indeterminate(object sender, RoutedEventArgs e) { lblMsg.Text = $"toggleButton1_Indeterminate, IsChecked:{toggleButton1.IsChecked}"; }private void toggleButton2_Checked(object sender, RoutedEventArgs e) { lblMsg.Text = $"toggleButton2_Checked, IsChecked:{toggleButton2.IsChecked}"; }private void toggleButton2_Unchecked(object sender, RoutedEventArgs e) { lblMsg.Text = $"toggleButton2_Unchecked, IsChecked:{toggleButton2.IsChecked}"; }private void toggleButton2_Indeterminate(object sender, RoutedEventArgs e) { lblMsg.Text = $"toggleButton2_Indeterminate, IsChecked:{toggleButton2.IsChecked}"; }private void ToggleButtonDemo_Loaded(object sender, RoutedEventArgs e) { lblToggleButton3.Text += "Page_Loaded"; lblToggleButton3.Text += Environment.NewLine; }private void toggleButton3_Loaded(object sender, RoutedEventArgs e) { lblToggleButton3.Text += "toggleButton3_Loaded"; lblToggleButton3.Text += Environment.NewLine; }private void toggleButton3_Checked(object sender, RoutedEventArgs e) { lblToggleButton3.Text += "toggleButton3_Checked"; lblToggleButton3.Text += Environment.NewLine; } } }


6、AppBarButton 的示例
Controls/ButtonControl/AppBarButtonDemo.xaml
< Page x:Class="Windows10.Controls.ButtonControl.AppBarButtonDemo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Windows10.Controls.ButtonControl" 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="10 0 10 10"> < !-- AppBarButton - 程序栏按钮控件(关于此控件的应用场景请参见:/Controls/NavigationControl/AppBarDemo.xaml 和 /Controls/NavigationControl/CommandBarDemo.xaml) Label - 显示的文本 Icon - 显示的图标(IconElement 类型,关于 IconElement 请参见 /Controls/IconControl/IconElementDemo.xaml) IsCompact - 是否是紧凑模式,即是否不显示 Label 指定的文本(默认值 false) --> < !-- 直接指定 Icon 为一个 Symbol 枚举值,此时所设置的是 SymbolIcon --> < AppBarButton Name="appBarButton1" Icon="Accept" Label="accept" Margin="5" /> < !-- 需要设置 Icon 为一个 SymbolIcon 或 FontIcon 或 PathIcon 或 BitmapIcon 类型的话,可以这样设置 --> < AppBarButton Name="appBarButton2" Label="find" IsCompact="True" Margin="5"> < AppBarButton.Icon> < FontIcon Name="fontIcon1" FontFamily="Segoe UI Emoji" Glyph="& #x2713; " /> < /AppBarButton.Icon> < /AppBarButton> < !-- AppBarButton 是支持 Flyout 的 --> < AppBarButton Icon="Add" Label="Add" Margin="5"> < AppBarButton.Flyout> < MenuFlyout> < MenuFlyoutItem Text="MenuFlyout Item 1"/> < MenuFlyoutItem Text="MenuFlyout Item 2"/> < MenuFlyoutItem Text="MenuFlyout Item 3"/> < /MenuFlyout> < /AppBarButton.Flyout> < /AppBarButton> < /StackPanel> < /Grid> < /Page>

Controls/ButtonControl/AppBarButtonDemo.xaml.cs
/* * AppBarButton - 程序栏按钮控件(继承自 ButtonBase, 请参见 /Controls/ButtonControl/ButtonBaseDemo.xaml) */using Windows.UI.Xaml.Controls; namespace Windows10.Controls.ButtonControl { public sealed partial class AppBarButtonDemo : Page { public AppBarButtonDemo() { this.InitializeComponent(); } } }


7、AppBarToggleButton 的示例
Controls/ButtonControl/AppBarToggleButtonDemo.xaml
< Page x:Class="Windows10.Controls.ButtonControl.AppBarToggleButtonDemo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Windows10.Controls.ButtonControl" 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="10 0 10 10"> < !-- AppBarToggleButton - 程序栏可切换状态的按钮控件(关于此控件的应用场景请参见:/Controls/NavigationControl/AppBarDemo.xaml 和 /Controls/NavigationControl/CommandBarDemo.xaml) Label - 显示的文本 Icon - 显示的图标(IconElement 类型,关于 IconElement 请参见 /Controls/IconControl/IconElementDemo.xaml) IsCompact - 是否是紧凑模式,即是否不显示 Label 指定的文本(默认值 false) --> < !-- 直接指定 Icon 为一个 Symbol 枚举值,此时所设置的是 SymbolIcon --> < AppBarToggleButton Name="appBarToggleButton1" Icon="Accept" Label="accept" Margin="5" /> < !-- 需要设置 Icon 为一个 SymbolIcon 或 FontIcon 或 PathIcon 或 BitmapIcon 类型的话,可以这样设置 --> < AppBarToggleButton Name="appBarToggleButton2" Label="find" IsCompact="True" Margin="5"> < AppBarToggleButton.Icon> < FontIcon Name="fontIcon1" FontFamily="Segoe UI Emoji" Glyph="& #x2713; " /> < /AppBarToggleButton.Icon> < /AppBarToggleButton> < /StackPanel> < /Grid> < /Page>

Controls/ButtonControl/AppBarToggleButtonDemo.xaml.cs
/* * AppBarToggleButton - 程序栏可切换状态的按钮控件(继承自 ToggleButton, 请参见 /Controls/ButtonControl/ToggleButtonDemo.xaml) */using Windows.UI.Xaml.Controls; namespace Windows10.Controls.ButtonControl { public sealed partial class AppBarToggleButtonDemo : Page { public AppBarToggleButtonDemo() { this.InitializeComponent(); } } }



OK
[源码下载]






























    推荐阅读