控件（按钮类）: ButtonBase, Button, HyperlinkButton, RepeatButton, ToggleButton, AppBarButton, AppBarToggleButton

介绍
背水一战 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>

        </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();
        }
    }
}
时间： 2024-11-23 22:01:32

控件（按钮类）: ButtonBase, Button, HyperlinkButton, RepeatButton, ToggleButton, AppBarButton, AppBarToggleButton的相关文章

背水一战 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 AppBarButto

.net学习之母版页执行顺序、jsonp跨域请求原理、IsPostBack原理、服务器端控件按钮Button点击时的过程、缓存、IHttpModule 过滤器

1.WebForm使用母版页后执行的顺序是先执行子页面中的Page_Load,再执行母版页中的Page_Load,请求是先生成母版页的控件树,然后将子页面生成的控件树填充到母版页中,最后输出 2.WebForm使用母版页进行登录时候的验证 //新建一个页面父类 public abstract class BasePage:Page { protected void Page_Load(object sender, EventArgs e) { //1.身份验证的方法 Session if (Se

[译]JavaFX 2.0+ - UI控件 - 按钮

3 按钮 JavaFX API中的Button类用来处理当用户点击一个按钮时执行一个操作.Button类继承自Labeled类, 它可以显示文本,图像,或两者兼之.图3 - 1显示了几个不同效果的按钮, 在本章中你将学习如何创建这些类型的按钮. 图3 - 1 不同类型的按钮 上图中显示了五个按钮和一个标签,这些按钮分多行显示. 第一行中的按钮包含一个图标和文本,图标是一个绿色的实心圆中间放置一个白色的对钩. 第二行显示了两个纯文本按钮和一个标签.其中“Decline”按钮展示的是鼠标放在按钮上时

bootstrap-表单控件——按钮

1.运行效果如图所示 2.实现代码如下 <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <title>表单控件--按钮</title>     <!-- 最新版本的 Bo

背水一战 Windows 10 (77) - 控件（控件基类）: ContentControl, UserControl, Page

原文:背水一战 Windows 10 (77) - 控件(控件基类): ContentControl, UserControl, Page [源码下载] 作者:webabcd 介绍背水一战 Windows 10 之 控件(控件基类 - ContentControl, UserControl, Page) ContentPresenter ContentControl UserControl Page 示例1.演示 ContentPresenter 的基础知识Controls/BaseContro

android 让一个控件按钮居于底部的几种方法

android 让一个控件按钮居于底部的几种方法1.采用linearlayout布局:android:layout_height="0dp" <!-- 这里不能设置fill_parent -->android:layout_weight="1" <!-- 这里设置layout_weight=1是最关键的,否则底部的LinearLayout无法到底部 -->2. 采用relativelayout布局:android:layout_alignPa

CheckBox控件中background和button的区别

控件:CheckBox android:background="@drawable/me_setting_switch_selector" 这个表示替换默认控件的背景 android:button="@drawable/me_setting_switch_selector" 这个表示替换默认控件的图片 区别在于:background的替换会让控件大小根据图片大小的变动 button则只是改变图片,不会让图片大小超出控件默认的大小 CheckBox控件中backgro

.Net常用技巧_树控件工具类

using System; using System.Collections.Generic; using System.Text; using System.Collections; using DevComponents.AdvTree; namespace MyUtility { /// <summary> /// 树控件工具类 /// </summary> public class TreeTool { ArrayList selectArray = new ArrayLi

C#:TextBox控件操作类

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 using System; using System.Collecti