背水一战 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="✓" />
</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="✓" />
</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
[源码下载]
背水一战 Windows 10 (31) - 控件(按钮类): ButtonBase, Button, HyperlinkButton, RepeatButton, ToggleButton, AppBarButton, AppBarToggleButton的更多相关文章
- 控件(按钮类): ButtonBase, Button, HyperlinkButton, RepeatButton, ToggleButton, AppBarButton, AppBarToggleButton
介绍背水一战 Windows 10 之 控件(按钮类) ButtonBase Button HyperlinkButton RepeatButton ToggleButton AppBarButton ...
- 背水一战 Windows 10 (37) - 控件(弹出类): MessageDialog, ContentDialog
[源码下载] 背水一战 Windows 10 (37) - 控件(弹出类): MessageDialog, ContentDialog 作者:webabcd 介绍背水一战 Windows 10 之 控 ...
- 背水一战 Windows 10 (35) - 控件(弹出类): FlyoutBase, Flyout, MenuFlyout
[源码下载] 背水一战 Windows 10 (35) - 控件(弹出类): FlyoutBase, Flyout, MenuFlyout 作者:webabcd 介绍背水一战 Windows 10 之 ...
- 背水一战 Windows 10 (28) - 控件(文本类): TextBox, PasswordBox
[源码下载] 背水一战 Windows 10 (28) - 控件(文本类): TextBox, PasswordBox 作者:webabcd 介绍背水一战 Windows 10 之 控件(文本类) T ...
- 背水一战 Windows 10 (76) - 控件(控件基类): Control - 基础知识, 焦点相关, 运行时获取 ControlTemplate 和 DataTemplate 中的元素
[源码下载] 背水一战 Windows 10 (76) - 控件(控件基类): Control - 基础知识, 焦点相关, 运行时获取 ControlTemplate 和 DataTemplate 中 ...
- 背水一战 Windows 10 (68) - 控件(控件基类): UIElement - Pointer 相关事件, Tap 相关事件, Key 相关事件, Focus 相关事件
[源码下载] 背水一战 Windows 10 (68) - 控件(控件基类): UIElement - Pointer 相关事件, Tap 相关事件, Key 相关事件, Focus 相关事件 作者: ...
- 背水一战 Windows 10 (40) - 控件(导航类): AppBar, CommandBar
[源码下载] 背水一战 Windows 10 (40) - 控件(导航类): AppBar, CommandBar 作者:webabcd 介绍背水一战 Windows 10 之 控件(导航类) App ...
- 背水一战 Windows 10 (36) - 控件(弹出类): ToolTip, Popup, PopupMenu
[源码下载] 背水一战 Windows 10 (36) - 控件(弹出类): ToolTip, Popup, PopupMenu 作者:webabcd 介绍背水一战 Windows 10 之 控件(弹 ...
- 背水一战 Windows 10 (34) - 控件(进度类): RangeBase, Slider, ProgressBar, ProgressRing
[源码下载] 背水一战 Windows 10 (34) - 控件(进度类): RangeBase, Slider, ProgressBar, ProgressRing 作者:webabcd 介绍背水一 ...
随机推荐
- 日志系统实战(二)-AOP动态获取运行时数据
介绍 这篇距上一篇已经拖3个月之久了,批评自己下. 通过上篇介绍了解如何利用mono反射代码,可以拿出编译好的静态数据.例如方法参数信息之类的. 但实际情况是往往需要的是运行时的数据,就是用户输入等外 ...
- MySQL 半同步复制+MMM架构
200 ? "200px" : this.width)!important;} --> 介绍 上篇文章介绍了MMM架构的实现方法,但是上篇文章的MMM方案的复制是异步复制,异 ...
- SQL Server AlwaysOn
标签:SQL SERVER/MSSQL SERVER/数据库/DBA/高性能解决方案 概述 环境: 域服务器:windows server 2008 R2 SP1,192.168.2.10 DNS:1 ...
- iOS-开发者相关的几种证书
目录 引言 写在前面 一App IDbundle identifier 二设备Device 三开发证书Certificates 证书的概念 数字证书的概念 iOS开发证书 iOS开发证书的根证书 申请 ...
- Java Thread 的 run() 与 start() 的区别
Java Thread 的使用 Java Thread 的 run() 与 start() 的区别 Java Thread 的 sleep() 和 wait() 的区别 1. ...
- Github团队开发集成以及eclipse集成
温馨提示:本篇是用于团队开发协作的github,如果是单人的可以移步本系列另外一篇 集成eclipse较为简单 团队仓库目录结构 TestOrgName xxxsystem configs dbscr ...
- 轻量级前端MVVM框架avalon - 整体架构
官网提供架构图 单看这个图呢,还木有说明,感觉有点蛋疼,作者的抽象度太高了,还好在前面已经大概分析过了执行流程 如图 左边是View视图,我们就理解html结构,换句话就是说用户能看到的界面,渲染页面 ...
- 通过3个Hello World应用来了解ASP.NET 5应用是如何运行的(1)
微软在开发ASP.NET 5(当时被称为ASP.NET vNext)是采用的代号为Project K,所以运行时被称为KRuntime.KRuntime是一个SDK,它包含了编译和运行应用程序的所有资 ...
- 统计Go, Go, Go
作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 结束了概率论,我们数据之旅的下一站是统计.这一篇,是统计的一个小介绍. 统 ...
- 应用程序框架实战二十一:DDD分层架构之仓储(介绍篇)
前面已经介绍过Entity Framework的工作单元和映射层超类型的封装,从本文开始,将逐步介绍仓储以及对查询的扩展支持. 什么是仓储 仓储表示聚合的集合. 仓储所表现出来的集合外观,仅仅是一种模 ...