Windows8:按钮

1、Button   2、HyperlinkButton   3、RepeatButton  4、RadioButton    5、CheckBox

在Win8“板砖”应用开发中，对于按钮类别的控件，我们常用的有以下这些。

从上面我们看到了，说更明白一些，就是从ButtonBase派生出来的类。

Button

Button是最基本，最常用，也是最标准的按钮控件，它有一个从ButtonBase公共基类继承下来的通过事件——Click，相信这个事件，根本不用我介绍，我想，玩过几天程序的朋友都听说过它的大名。

过去在WinForm应用中，我们设置Button上显示的文本都会修改其Text属性，而我们也知道，自从WPF出现后，Button就有一个Content属性，这就使得内容控件的内容模型更加灵活了，我们可以为Content属性设置字符串，也可以是其它，比如一个图像，一个矩形，或者一个更复杂的UI布局，总之，是UIElement都可以。

比如像以下这样：

[html] view plaincopyprint?

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

一个N简单的Button对象就声明好了。运行后你能看到如下图所示的效果。

如果你觉得光用文本不够精彩，也可以弄点新意，比如这样：

[html] view plaincopyprint?

1. <Button>
2. <Button.Content>
3. <Grid>
4. <Grid.ColumnDefinitions>
5. <ColumnDefinition Width="auto"/>
6. <ColumnDefinition Width="*"/>
7. </Grid.ColumnDefinitions>
8. <Ellipse Grid.Column="0" Width="20" Height="20" Fill="SkyBlue"/>
9. <TextBlock Grid.Column="1" Text="左边是一个图形"/>
10. </Grid>
11. </Button.Content>
12. </Button>

这样，Button的内容就不那么单调了，左边是一个圆，右边是文字。

我们还可以为Button设置一下边框颜色，边框粗细，注意，这些都是从Control继承过来的，几乎大部分控件都可以这样玩。

[html] view plaincopyprint?

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

对于边框大小，即BorderThickness属性，如果你只设置一个值，如上面的2，那表明，控件上，下，左，右四个方向上的边框粗细是一样的，都是2。当我们不希望它全部相等时，可以这样：2,1,5,3，四个值，分别代表四个方向上边框线的粗细，顺序依次是：左-上-右-下。这个虽然和CSS中的有点像，但顺序不太一样。

[html] view plaincopyprint?

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

这样，我们只看到左边和上边的边框，而右方和下方就看不到了，如下图所示。

通过Background属性可以设置背景，这个也是从Control继承过来的。

[html] view plaincopyprint?

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

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

【XAML】

[html] view plaincopyprint?

1. <Button Content="请点击这里" Click="onClickMe"/>

【C#】

[csharp] view plaincopyprint?

1. private async void onClickMe(object sender, RoutedEventArgs e)
2. {
3. Windows.UI.Popups.MessageDialog dialog = new Windows.UI.Popups.MessageDialog("你点击了按钮。");
4. await dialog.ShowAsync();
5. }

HyperlinkButton

这是一种超链接按钮，类似于HTML中的<a>元素。其中，比较特殊的属性是NavigateUri，就相当于HTML中a的href属性。

[html] view plaincopyprint?

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

当你单击它时，就会启动浏览器并打开新浪网主页。

另外，由于它也是从ButtonBase派生的，所以，Click事件依旧可用。

【XAML】

[html] view plaincopyprint?

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

【C#】

[csharp] view plaincopyprint?

1. private async void onClick(object sender, RoutedEventArgs e)
2. {
3. Windows.UI.Popups.MessageDialog dlg = new Windows.UI.Popups.MessageDialog("你点击了链接。");
4. await dlg.ShowAsync();
5. }

RepeatButton

这种按钮有点意思，它可以重复发生Click事件，所以，它就比Button多了两个属性。

Delay：点击按钮后，拖延多长时间才重复发生Click事件，如果为500，则按下钮0.5秒后开始重复Click直到用户不在按下为止。

Interval：每次引发Click的间隔，如果值为1000，则用户按住不放，每秒钟Click一次。

以上两个属性都以毫秒为单位。

看看下面的例子。

【XAML】

[html] view plaincopyprint?

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

【C#】

[csharp] view plaincopyprint?

1. private void onClickA(object sender, RoutedEventArgs e)
2. {
3. int vl = int.MinValue;
4. if (!int.TryParse(this.tbValue.Text, out vl))
5. {
6. vl = 0;
7. }
8. vl -= 1;
9. tbValue.Text = vl.ToString();
10. }
12. private void onClickB(object sender, RoutedEventArgs e)
13. {
14. int vl = int.MinValue;
15. if (!int.TryParse(tbValue.Text, out vl))
16. {
17. vl = 0;
18. }
19. vl += 1;
20. tbValue.Text = vl.ToString();
21. }

于是，你就得到下面这种效果。

RadioButton

这个控件是用来给用户做单项选择题的，有一个属性比较重要，一定要用好——GroupName。

同一个容器下可以放置N个RadioButton，但是，如果存在多个GroupName属性，也就是多个组，那么，每个组之间是互不干扰的，但同一组中同时只能有一个RadioButton被选中，反正，组内是互斥的。

有一句话叫“一山不能容二虎”，就和这里很像了，A山头中只能有一只老虎称王称霸，同样地，B山头也一样，不过，A和B两个山头并不冲突，它们可以各自拥有一位老虎大王。

如：

[html] view plaincopyprint?

1. <StackPanel Margin="25">
2. <RadioButton Content="帅哥" GroupName="sex"/>
3. <RadioButton Content="美女" GroupName="sex"/>
4. <RadioButton Content="人妖" GroupName="sex"/>
6. <RadioButton Margin="0,30,0,0" Content="蓝色" GroupName="color"/>
7. <RadioButton Content="红色" GroupName="color"/>
8. <RadioButton Content="灰色" GroupName="color"/>
9. </StackPanel>

在容器（上例中为StackPanel），有两个组，分别为sex和color，所以上例中的情况是，帅哥、美女和人妖只能选一个，而下面三个，即蓝色、红色和灰色也只能选一个，不过，两个组中的选项互不干扰，无论你在color组中选择哪个，也不影响sex组中的选择。

CheckBox

CheckBox和RadioButton刚好相反，CheckBox专门给用户做不定项选择题，你可以选一个，两个，三个，或者全选，全不选。IsChecked属性指示其选择状态，可以是选中，也可能是没有选，而该属性是bool?，所以也有可能是null。

看看下面的例子。

【XAML】

[html] view plaincopyprint?

1. <Grid>
2. <StackPanel Margin="25">
3. <StackPanel x:Name="stackPanelList" Orientation="Vertical">
4. <CheckBox Content="苹果"/>
5. <CheckBox Content="梨子"/>
6. <CheckBox Content="桃子"/>
7. <CheckBox Content="荔枝"/>
8. <CheckBox Content="葡萄"/>
9. <CheckBox Content="益智果"/>
10. </StackPanel>
11. <Button Margin="2,13,0,5" Content="确定选择" Click="onClick"/>
12. <TextBlock x:Name="tbResult" Margin="3,3,0,0" FontSize="18"/>
13. </StackPanel>
14. </Grid>

【C#】

[csharp] view plaincopyprint?

1. private void onClick(object sender, RoutedEventArgs e)
2. {
3. var checkboxs = this.stackPanelList.Children;
4. List<string> strList = new List<string>();
5. foreach (var chkb in checkboxs)
6. {
7. if (chkb is CheckBox)
8. {
9. CheckBox myCheckbox = (CheckBox)chkb;
10. if (myCheckbox.IsChecked.HasValue && myCheckbox.IsChecked.Value ==true)
11. {
12. strList.Add(myCheckbox.Content as string);
13. }
14. }
15. }
16. string strResult=string.Format("我喜欢的水果有：{0}", string.Join("，", strList.ToArray()));
17. this.tbResult.Text = strResult;
18. }

上面的例子，就是看看用户选择了几种他喜欢的水果，然后显示出来。