日期:2014-05-17  浏览次数:20948 次

新时尚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

这种按钮