技术教程 编程教程 背水一战 Windows 10 (31) - 控件（按钮类）: ButtonBase, Button, HyperlinkButton, RepeatButton, ToggleButton, AppBarButton, AppBarToggleButton 正文

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

2023-05-28,,

[源码下载]

背水一战 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的相关教程结束。

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

下载本文的Word格式文档，以方便收藏与打印。

Copyright 2023. 昆居客 - IT编程,互联网信息技术文档大全!