程式師世界 >> 編程語言 >> .NET網頁編程 >> 關於.NET >> Windows 8 Store Apps學習(2) 按鈕控件

Windows 8 Store Apps學習(2) 按鈕控件

編輯：關於.NET

Button, HyperlinkButton, RepeatButton

介紹

重新想象 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>

[源碼下載]：http://files.cnblogs.com/webabcd/Windows8.rar