重新想象 Windows 8 Store Apps (2) - 控件之按鈕控件: Button, HyperlinkButton, RepeatButton, ToggleButton, RadioButton, CheckBox, ToggleSwitch

本文轉載自查看原文 2013-01-10 08:25 3873 Windows Store Apps

作者：webabcd

介紹
重新想象 Windows 8 Store Apps 之按鈕控件

Button - 按鈕控件
HyperlinkButton - 超鏈按鈕
RepeatButton - 按住后會重復執行單擊操作的按鈕
ToggleButton - 可切換狀態的按鈕
RadioButton - 單選框控件
CheckBox - 復選框控件
ToggleSwitch - 狀態切換控件

示例
1、Button 的 Demo
ButtonDemo.xaml.cs

/*
 * Button - 按鈕控件
 */

using System;
using Windows.UI.Popups;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;

namespace XamlDemo.Controls
{
    public sealed partial class ButtonDemo : Page
    {
        public ButtonDemo()
        {
            this.InitializeComponent();
        }

        protected override void OnNavigatedTo

(NavigationEventArgs e)
        {
            /*
             * Button - 按鈕控件，其全部功能是通過其基類 ButtonBase 提供的
             *     ClickMode - 引發 Click 事件的模式：ClickMode.Release（默認值）, ClickMode.Press, ClickMode.Hover
             *     IsPointerOver - 設備指針（鼠標或手指等）是否在按鈕上
             *     IsPressed - 當前按鈕是否處於按下的狀態
             *     Command 和 CommandParameter 等寫到 MVVM 的時候再詳細寫
             */

            Button btn = new Button();
            btn.Content = "我是按鈕";
            btn.ClickMode = ClickMode.Hover;
            btn.Click += btn_Click;
            root.Children.Add(btn);
        }

        async void btn_Click(object sender, 

RoutedEventArgs e)
        {
            await new MessageDialog("觸發了按鈕的 

Click 事件").ShowAsync();
        }
    }
}

2、HyperlinkButton 的 Demo
HyperlinkButtonDemo.xaml

<Page
    x:Class="XamlDemo.Controls.HyperlinkButtonDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.Controls"
    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="120 0 0 0">
            
            <!--
                HyperlinkButton - 帶超鏈接的按鈕
                    NavigateUri - 按鈕要導航到的 Uri
            -->
            <HyperlinkButton Name="btnLink" Content="webabcd blog" FontSize="36" Foreground="Blue" NavigateUri="http://webabcd.cnblogs.com" />
            
        </StackPanel>
    </Grid>
</Page>

HyperlinkButtonDemo.xaml.cs

/*
 * HyperlinkButton - 超鏈按鈕
 */

using Windows.UI.Xaml.Controls;

namespace XamlDemo.Controls
{
    public sealed partial class HyperlinkButtonDemo : Page
    {
        public HyperlinkButtonDemo()
        {
            this.InitializeComponent();

            this.Loaded += HyperlinkButtonDemo_Loaded;
        }

        void HyperlinkButtonDemo_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs 

e)
        {
            // 為 HyperlinkButton 加上鼠標移入變手型的功能
            btnLink.PointerEntered += btnLink_PointerEntered;
            btnLink.PointerExited += btnLink_PointerExited;
        }

        void btnLink_PointerEntered(object sender, 

Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
        {
            // 鼠標移入 HyperlinkButton 變手型
            Windows.UI.Core.CoreWindow.GetForCurrentThread().PointerCursor = new Windows.UI.Core.CoreCursor(Windows.UI.Core.CoreCursorType.Hand, 1);
        }

        void btnLink_PointerExited(object sender, 

Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
        {
            // 鼠標移出 HyperlinkButton 變箭頭
            Windows.UI.Core.CoreWindow.GetForCurrentThread().PointerCursor = new Windows.UI.Core.CoreCursor(Windows.UI.Core.CoreCursorType.Arrow, 1);
        }
    }
}

3、RepeatButton 的 Demo
RepeatButtonDemo.xaml

<Page
    x:Class="XamlDemo.Controls.RepeatButtonDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.Controls"
    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="120 0 0 0">
            
            <TextBlock Name="lblMsg" TextWrapping="Wrap" />
            
            <!--
                RepeatButton - 按住后會重復執行單擊操作的按鈕
                    Delay - 按住按鈕后，會先執行一次單擊操作，然后在此屬性指定的時間后開始重復執行單擊操作，單位毫秒，默認值 250
                    Interval - 重復執行單擊操作時，這個重復時間的間隔，單位毫秒，默認值 250
            
                注：Button 的 ClickMode 默認為 Release，而 RepeatButton 的 ClickMode 默認為 Press
            -->
            <RepeatButton Name="aa" Content="click me" Delay="1000" Interval="250" Click="RepeatButton_Click_1" Margin="0 10 0 0" />
            
        </StackPanel>
    </Grid>
</Page>

RepeatButtonDemo.xaml.cs

/*
 * RepeatButton - 按住后會重復執行單擊操作的按鈕
 */

using Windows.UI.Xaml.Controls;

namespace XamlDemo.Controls
{
    public sealed partial class RepeatButtonDemo : Page
    {
        public RepeatButtonDemo()
        {
            this.InitializeComponent();
        }

        private void RepeatButton_Click_1(object 

sender, Windows.UI.Xaml.RoutedEventArgs e)
        {
            lblMsg.Text += "a";
        }
    }
}

4、ToggleButton 的 Demo
ToggleButtonDemo.xaml.cs

/*
 * ToggleButton - 可切換狀態的按鈕
 */

using System;
using Windows.UI.Popups;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;

namespace XamlDemo.Controls
{
    public sealed partial class ToggleButtonDemo : Page
    {
        public ToggleButtonDemo()
        {
            this.InitializeComponent();

            this.Loaded += ToggleButtonDemo_Loaded;
        }

        void ToggleButtonDemo_Loaded(object sender, RoutedEventArgs e)
        {
            /*
             * ToggleButton - 可切換狀態的 Button
             *     IsThreeState - 是否支持 3 狀態
             *     IsChecked - 按鈕的選中狀態: false, true, null
             *     Checked - 按鈕變為選中狀態后所觸發的事件
             *     Unchecked - 按鈕變為未選中狀態后所觸發的事件
             *     Indeterminate - 按鈕變為不確定狀態后所觸發的事件
             */

            ToggleButton btn = new ToggleButton();
            btn.Content = "可切換狀態的按鈕";
            btn.Checked += btn_Checked;
            btn.Unchecked += btn_Unchecked;

            root.Children.Add(btn);
        }

        async void btn_Unchecked(object sender, 

RoutedEventArgs e)
        {
            await new MessageDialog("按鈕為未選中

狀態").ShowAsync();
        }

        async void btn_Checked(object sender, 

RoutedEventArgs e)
        {
            await new MessageDialog("按鈕為選中狀

態").ShowAsync();
        }
    }
}

5、RadioButton 的 Demo
RadioButtonDemo.xaml

<Page
    x:Class="XamlDemo.Controls.RadioButtonDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.Controls"
    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 Name="root" Margin="120 0 0 0">
            
            <!--
                RadioButton - 單選框控件（繼承自 ToggleButton）
                    GroupName - 單選框的組名，同一組單選框只能有一個為選中狀態
            -->
            <RadioButton GroupName="groupName" IsChecked="True" Content="RadioButton1" />
            <RadioButton GroupName="groupName" Content="RadioButton2" />
            
        </StackPanel>
    </Grid>
</Page>

6、CheckBox 的 Demo
CheckBoxDemo.xaml

<Page
    x:Class="XamlDemo.Controls.CheckBoxDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.Controls"
    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 Name="root" Margin="120 0 0 0">

            <!--
                CheckBox -  復選框控件（繼承自 ToggleButton）
            -->
            <CheckBox IsChecked="True" Content="CheckBox1" />

            <CheckBox IsChecked="False" Content="CheckBox2" />

        </StackPanel>
    </Grid>
</Page>

7、ToggleSwitch 的 Demo
ToggleSwitchDemo.xaml

<Page
    x:Class="XamlDemo.Controls.ToggleSwitchDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XamlDemo.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">
        <Grid.Resources>
            <!--
                自定義關閉狀態的顯示內容的數據模板
            -->
            <Style x:Key="MyToggleSwitchStyle" TargetType="ToggleSwitch">
                <Setter Property="OffContentTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <Grid Background="Red">
                                <TextBlock Text="{Binding}" />
                            </Grid>
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Grid.Resources>
        
        <StackPanel Name="root" Margin="120 0 0 0">
            
            <!--
                ToggleSwitch - 狀態切換控件
                    Header - 標題內容
                    OffContent - 關閉狀態的顯示內容
                    OnContent - 打開狀態的顯示內容
                    IsOn - 是否是 On 的狀態
                    Toggled - 狀態改變后所觸發的事件
            -->
            <ToggleSwitch OffContent="off" Header="wifi" IsOn="True" Style="{StaticResource MyToggleSwitchStyle}">
                <!--
                    自定義打開狀態的顯示內容
                -->
                <ToggleSwitch.OnContent>
                    <StackPanel Background="Blue">
                        <TextBlock Text="on" TextAlignment="Right" />
                    </StackPanel>
                </ToggleSwitch.OnContent>
            </ToggleSwitch>
        </StackPanel>
    </Grid>
</Page>

OK
[源碼下載]

免責聲明！

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