背水一戰 Windows 10 (31) - 控件（按鈕類）: ButtonBase, Button, HyperlinkButton, RepeatButton, ToggleButton, AppBarButton, AppBarToggleButton

本文轉載自查看原文 2016-08-29 09:13 1596 UWP

作者：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
[源碼下載]

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。