新時尚Windows8開發（23）：那些關於按鈕的事

一說起按鈕，相信沒寫過程式的人都會異常熟悉，畢竟，作為一個最基本的UI元素，只要是圖形化作業系統，都少不了按鈕，就連某些DOS程式也有按鈕了。所以，這是看得見而且隨處可見的東西。

 

在Win8“板磚”應用開發中，對於按鈕類別的控制項，我們常用的有以下這些。

從上面我們看到了，說更明白一些，就是從ButtonBase派生出來的類。

 

Button

Button是最基本，最常用，也是最標準的按鈕控制項，它有一個從ButtonBase公用基類繼承下來的通過事件——Click，相信這個事件，根本不用我介紹，我想，玩過幾天程式的朋友都聽說過它的大名。

過去在WinForm應用中，我們設定Button上顯示的文本都會修改其Text屬性，而我們也知道，自從WPF出現後，Button就有一個Content屬性，這就使得內容控制項的內容模型更加靈活了，我們可以為Content屬性設定字串，也可以是其它，比如一個映像，一個矩形，或者一個更複雜的UI布局，總之，是UIElement都可以。

比如像以下這樣：

<Button Content="你好啊，小盆友"/>

一個N簡單的Button對象就聲明好了。運行後你能看到如所示的效果。

如果你覺得光用文本不夠精彩，也可以弄點新意，比如這樣：

            <Button>                <Button.Content>                    <Grid>                        <Grid.ColumnDefinitions>                            <ColumnDefinition Width="auto"/>                            <ColumnDefinition Width="*"/>                        </Grid.ColumnDefinitions>                        <Ellipse Grid.Column="0" Width="20" Height="20" Fill="SkyBlue"/>                        <TextBlock Grid.Column="1" Text="左邊是一個圖形"/>                    </Grid>                </Button.Content>            </Button>

這樣，Button的內容就不那麼單調了，左邊是一個圓，右邊是文字。

我們還可以為Button設定一下邊框顏色，邊框粗細，注意，這些都是從Control繼承過來的，幾乎大部分控制項都可以這樣玩。

<Button BorderThickness="2" BorderBrush="LightGreen" Content="123456"/>

 

對於邊框大小，即BorderThickness屬性，如果你只設定一個值，如上面的2，那表明，控制項上，下，左，右四個方向上的邊框粗細是一樣的，都是2。當我們不希望它全部相等時，可以這樣：2,1,5,3，四個值，分別代表四個方向上邊框線的粗細，順序依次是：左-上-右-下。這個雖然和CSS中的有點像，但順序不太一樣。

<Button BorderThickness="3,2,0,0" BorderBrush="Pink" Content="abcdefghijk"/>

這樣，我們只看到左邊和上邊的邊框，而右方和下方就看不到了，如所示。

通過Background屬性可以設定背景，這個也是從Control繼承過來的。

<Button Background="Green" Foreground="LightGray" Content="哈哈哈哈"/>

而Button最重要的還是它的Click事件。

【XAML】

<Button Content="請點擊這裡" Click="onClickMe"/>

【C#】

        private async void onClickMe(object sender, RoutedEventArgs e)        {            Windows.UI.Popups.MessageDialog dialog = new Windows.UI.Popups.MessageDialog("你點擊了按鈕。");            await dialog.ShowAsync();        }

 

HyperlinkButton

這是一種超連結按鈕，類似於HTML中的<a>元素。其中，比較特殊的屬性是NavigateUri，就相當於HTML中a的href屬性。

<HyperlinkButton Content="Sina" NavigateUri="http://www.sina.com.cn/"/>

當你單擊它時，就會啟動瀏覽器並開啟新浪網首頁。

另外，由於它也是從ButtonBase派生的，所以，Click事件依舊可用。

【XAML】

<HyperlinkButton Content="Click Me" Click="onClick"/>

【C#】

        private async void onClick(object sender, RoutedEventArgs e)        {            Windows.UI.Popups.MessageDialog dlg = new Windows.UI.Popups.MessageDialog("你點擊了連結。");            await dlg.ShowAsync();        }

 

RepeatButton

這種按鈕有點意思，它可以重複發生Click事件，所以，它就比Button多了兩個屬性。

Delay：點擊按鈕後，拖延多長時間才重複發生Click事件，如果為500，則按下鈕0.5秒後開始重複Click直到使用者不在按下為止。

Interval：每次引發Click的間隔，如果值為1000，則使用者按住不放，每秒鐘Click一次。

以上兩個屬性都以毫秒為單位。

看看下面的例子。

【XAML】

        <Grid Margin="20" VerticalAlignment="Top">            <Grid.ColumnDefinitions>                <ColumnDefinition Width="auto"/>                <ColumnDefinition Width="auto"/>                <ColumnDefinition Width="auto"/>            </Grid.ColumnDefinitions>            <RepeatButton Content="-" Interval="500" Delay="500" Click="onClickA" Grid.Column="0"/>            <TextBlock FontSize="20" x:Name="tbValue" Grid.Column="1" Text="0" VerticalAlignment="Center" Margin="7,0,7,0"/>            <RepeatButton Content="+" Interval="500" Delay="500" Click="onClickB" Grid.Column="2"/>        </Grid>

【C#】

        private void onClickA(object sender, RoutedEventArgs e)        {            int vl = int.MinValue;            if (!int.TryParse(this.tbValue.Text, out vl))            {                vl = 0;            }            vl -= 1;            tbValue.Text = vl.ToString();        }        private void onClickB(object sender, RoutedEventArgs e)        {            int vl = int.MinValue;            if (!int.TryParse(tbValue.Text, out vl))            {                vl = 0;            }            vl += 1;            tbValue.Text = vl.ToString();        }

於是，你就得到下面這種效果。

 

 

RadioButton

這個控制項是用來給使用者做單項選擇題的，有一個屬性比較重要，一定要用好——GroupName。

同一個容器下可以放置N個RadioButton，但是，如果存在多個GroupName屬性，也就是多個組，那麼，每個組之間是互不干擾的，但同一組中同時只能有一個RadioButton被選中，反正，組內是互斥的。

有一句話叫“一山不能容二虎”，就和這裡很像了，A山頭中只能有一隻老虎稱王稱霸，同樣地，B山頭也一樣，不過，A和B兩個山頭並不衝突，它們可以各自擁有一位老虎大王。

如：

        <StackPanel Margin="25">            <RadioButton Content="帥哥" GroupName="sex"/>            <RadioButton Content="美女" GroupName="sex"/>            <RadioButton Content="人妖" GroupName="sex"/>                        <RadioButton Margin="0,30,0,0" Content="藍色" GroupName="color"/>            <RadioButton Content="紅色" GroupName="color"/>            <RadioButton Content="灰色" GroupName="color"/>        </StackPanel>

在容器（上例中為StackPanel），有兩個組，分別為sex和color，所以上例中的情況是，帥哥、美女和人妖只能選一個，而下面三個，即藍色、紅色和灰色也只能選一個，不過，兩個組中的選項互不干擾，無論你在color組中選擇哪個，也不影響sex組中的選擇。

 

 

CheckBox

CheckBox和RadioButton剛好相反，CheckBox專門給使用者做不定項選擇題，你可以選一個，兩個，三個，或者全選，全不選。IsChecked屬性指示其選擇狀態，可以是選中，也可能是沒有選，而該屬性是bool?，所以也有可能是null。

看看下面的例子。

【XAML】

    <Grid>        <StackPanel Margin="25">            <StackPanel x:Name="stackPanelList" Orientation="Vertical">                <CheckBox Content="蘋果"/>                <CheckBox Content="梨子"/>                <CheckBox Content="桃子"/>                <CheckBox Content="荔枝"/>                <CheckBox Content="葡萄"/>                <CheckBox Content="益智果"/>            </StackPanel>            <Button Margin="2,13,0,5" Content="確定選擇" Click="onClick"/>            <TextBlock x:Name="tbResult" Margin="3,3,0,0" FontSize="18"/>        </StackPanel>    </Grid>

【C#】

        private void onClick(object sender, RoutedEventArgs e)        {            var checkboxs = this.stackPanelList.Children;            List<string> strList = new List<string>();            foreach (var chkb in checkboxs)            {                if (chkb is CheckBox)                {                    CheckBox myCheckbox = (CheckBox)chkb;                    if (myCheckbox.IsChecked.HasValue && myCheckbox.IsChecked.Value ==true)                    {                        strList.Add(myCheckbox.Content as string);                    }                }            }            string strResult=string.Format("我喜歡的水果有：{0}", string.Join("，", strList.ToArray()));            this.tbResult.Text = strResult;        }

上面的例子，就是看看使用者選擇了幾種他喜歡的水果，然後顯示出來。