在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;
- }
上面的例子,就是看看用户选择了几种他喜欢的水果,然后显示出来。