Windows 8 Metro 应用开发入门(三):工具栏和对话框


摘 要

Metro UI与Windows Phone一样在提供了布局在屏幕下文的应用程序工具栏BottomAppBar,由于平板设备特有的应用,Metro UI还提供了布局在屏幕上方的导航栏TopAppBar。另外,Metro UI还提供了独特的对话框。这一章我们来介绍一下工具栏与导航栏的应用,最后再介绍一下弹出对话框。

第1节 BottomAppBar

应用程序工具栏BottomAppBar默认是隐藏在屏幕的下方,当用手上屏幕上向上滑动或是在屏幕上点击鼠标右键,BottomAppBar会从下方滑出。BottomAppBar和TopAppBar依托于Page类,如下:

    public class Page
    {
        public AppBar BottomAppBar { get; set; }
        public AppBar TopAppBar { get; set; }
        //...
    }

无论是上方的导航栏还是下方的工具栏,都是AppBar类型,我们来看一下AppBar的定义:

复制代码
    public class AppBar : ContentControl
    {
        public bool IsOpen { get; set; }
        public static DependencyProperty IsOpenProperty { get; }
        public bool IsSticky { get; set; }
        public static DependencyProperty IsStickyProperty { get; }
        public event EventHandler<object> Closed;
        public event EventHandler<object> Opened;
    }
复制代码

IsOpen 指明工具栏是否可见

IsSticky 如果工具栏可见,指明工具栏是否一直可见,即使失去焦点时

Closed 工具栏完全退出后触发事件

Opened 工具栏完全打开后触发事件

AppBar的定义非常简单,如果要使用它,还得自定义其展示视图,不过添加其子元素很方便。使用BottomAppBar有两种方式:XAML和后台Code。

(1)XAML方式

如下XAML我们向Page添加拥有五个按钮的下方工具栏:

复制代码
    <Page.BottomAppBar>
        <AppBar IsSticky="True">
            <Grid>
                <StackPanel Orientation="Horizontal">
                    <Button x:Name="btn1" Style="{StaticResource AppBarButtonStyle}" AutomationProperties.Name="添加"/>
                    <Button x:Name="btn2" Style="{StaticResource EditAppBarButtonStyle}" Click="btn2_Click_1"/>
                    <Button x:Name="btn3" Style="{StaticResource SaveAppBarButtonStyle}" Click="btn3_Click_1"/>
                    <Button x:Name="btn4" Style="{StaticResource DeleteAppBarButtonStyle}"/>
                    <Button x:Name="btn5" Style="{StaticResource DiscardAppBarButtonStyle}"/>
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.BottomAppBar>
复制代码

IsSticky="True"表明当工具栏打开后让它一直显示在屏幕上,在工具栏内先是放置了一个Grid,其内置一个StackPanel,最后是在内部摆放了5个按钮,并且还为按钮btn1设置了名字AutomationProperties.Name="添加",如果要让按钮响应事件,可以为每个按钮注册事件处理程序,就像btn2和btn3一样注册了Click事件。在创建Metro应用程序项目的时候,在Common文件夹下有一个默认的样式StandardStyles.xaml,里面有一系列的工具栏按钮样式,但是被注释掉的,我们可以取消注释,然后在我们的程序中使用它们,大概在StandardStyles.xaml文档的249行开始,有一个基本样式AppBarButtonStyle,其他的如EditAppBarButtonStyle和SaveAppBarButtonStyle等都是基于AppBarButtonStyle进行实现的,上面XAML中用到了AppBarButtonStyle、EditAppBarButtonStyle、SaveAppBarButtonStyle、DeleteAppBarButtonStyle等,我们来看一下上面XAML最终展示的效果:

(2)Code方式使用AppBar

代码创建工具栏只需要实例化AppBar且向其添加子元素即可,最后将AppBar实例给当前页的上/下方工具栏,如下代码:

复制代码
        private void CreateAppBar()
        {
            AppBar bottomBar = new AppBar();
            StackPanel sp = new StackPanel() { Orientation = Orientation.Horizontal };

            Button btn1 = new Button();
            btn1.Style = (Style)App.Current.Resources["AddAppBarButtonStyle"];
            sp.Children.Add(btn1);
            Button btn2 = new Button();
            btn2.Style = (Style)App.Current.Resources["EditAppBarButtonStyle"];
            sp.Children.Add(btn2);

            bottomBar.Content = sp;
            this.BottomAppBar = bottomBar;
        }
复制代码

 

第2节 TopAppBar

TopAppBar与BottomAppBar使用方法相同,无非就是名字不一样,而对于Page来说,TopAppBar在上方,更多的时候称为导航栏,BottomAppBar在下方,称为应用程序工具栏。在这里我们只展示如何用XAML创建一个导航栏TopAppBar:

复制代码
    <Page.TopAppBar>
        <AppBar>
            <Grid>
                <StackPanel Orientation="Horizontal">
                    <Button x:Name="btnTop1" Style="{StaticResource AddAppBarButtonStyle}" AutomationProperties.Name="添加s"/>
                    <Button x:Name="btnTop2" Style="{StaticResource EditAppBarButtonStyle}"/>
                    <Button x:Name="btnTop3" Style="{StaticResource SaveAppBarButtonStyle}"/>
                    <Button x:Name="btnTop4" Style="{StaticResource DeleteAppBarButtonStyle}"/>
                    <Button x:Name="btnTop5" Style="{StaticResource DiscardAppBarButtonStyle}"/>
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.TopAppBar>
复制代码

只要注意一点即可,那就是以Page.TopAppBar指明该AppBar为上方的导航栏,其他与BottomAppBar完全一样,效果如下:

这一次我们既指定了按钮的Content,又指定了其文字下标。

 

第3节 自定义AppBar

以上我们讨论的都是使用Metro应用程序项目默认的模板样式,如果你觉得上面的样式太单调,当然可以自定义按钮样式,比如使用图标,甚至你可以使用动画效果,接下来我们看看如何自定义样式。

在前面的讨论中我们知道AppBar是一个容器控件,并且只能包含一个子元素,所以我们在AppBar内放置一个Grid作为布局父控件,然后再将相应的按钮元素分配到Grid的各个单元格中。如下我们定义了一个背景具有渐变效果的Grid,且放置了三个按钮的下方应用程序工具栏,如图:

这一次我们并没有使用StandardStyles.xaml中的样式,只是简单为按钮放置了一个图标,XAML部分:

复制代码
<Page.BottomAppBar>
        <AppBar IsSticky="True">
            <Grid Margin="0" >
                <Grid.Background>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#B24FF53E"/>
                        <GradientStop Color="#B2F9F6F3" Offset="0.6"/>
                        <GradientStop Color="#B2FB8421" Offset="1"/>
                    </LinearGradientBrush>
                </Grid.Background>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="100"/>
                    <ColumnDefinition Width="100"/>
                    <ColumnDefinition Width="100"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Button x:Name="btn1" Grid.Column="0">
                    <Image Source="Assets/user.png"/>
                </Button>
                <Button x:Name="btn2" Grid.Column="1">
                    <Image Source="Assets/Cycle Racer.png"/>
                </Button>
                <Button x:Name="btn3" Grid.Column="2">
                    <Image Source="Assets/Add to Cart.png"/>
                </Button>
            </Grid>
        </AppBar>
    </Page.BottomAppBar>
复制代码

这里当然也可以使用StackPanel等其他布局控件,你完全可以按照你自己的要求设计出各种各样的Metro UI 风格的工具栏。

 

第4节 使用工具栏的事件

使用工具栏的目的就是要触发一定的动作,所以要想让工具栏里的按钮响应事件,则必须要为每个按钮注册事件处理程序。比如第1节示例中的btn2和btn3:

<Button x:Name="btn2" Style="{StaticResource EditAppBarButtonStyle}" Click="btn2_Click_1"/>
<Button x:Name="btn3" Style="{StaticResource SaveAppBarButtonStyle}" Click="btn3_Click_1"/>

当为按钮注册Click事件后,在后台的事件处理程序中就可以执行相应的操作,如下:

复制代码
        private void btn2_Click_1(object sender, RoutedEventArgs e)
        {
            //Do Something
        }

        private void btn3_Click_1(object sender, RoutedEventArgs e)
        {
            //Do Something
        }
复制代码

我们知道Silverlight是基于异步编程模型,同样在Metro App中也是基于异步编程模型,所以对于有耗时计算的,建议在工具栏的按钮处理程序中使用异步编程,这样不影响UI的流畅度,也是微软一直鼓励的做法。当然,在必要的时候或者是你喜欢的时候,也可以使用async/await来实现异步编程的不一样体验,尽管在.NET Framework4.5中增强了对异步的实现,但还是建议使用异步处理。在大家都很忙且有点急促的今天,给用户一个“不用等待”的体现,有什么不好呢?

其实关于应用程序工具栏和导航栏的使用,微软还是建议不要在主视图中使用太多的按钮,尽量把命令按钮放在工具栏中,为MetroUI提供一致的用户体验。

 

第5节 弹出对话框

以往的开发中我们常常会弹出一个模态对话框来等待用户的响应,silverlight中是使用MessageBox,但在Metro UI中提供了一个全新的对话框MessageDialog,它是以异步方式弹出,你当然可以使用await来等待用户的响应,它还有一个更炫耀的功能就是可以在一个对话框让指定多个命令!你在以往往的开发中如果想实现类似的功能,是不是得自己实现?MessageDialog只提供了一个弹出方法:

public IAsyncOperation<IUICommand> ShowAsync();

(1)只有提示消息对话框

使用一个构造函数的MessageDialog可以实例化一个对话框,然后以异步方式打开它,此时它会默认显示一个“关闭”按钮:

          MessageDialog md = new MessageDialog("保存成功,请注意查收。");
            md.ShowAsync();

效果图:

(2)带有标题的对话框

            MessageDialog md = new MessageDialog("保存成功,请注意查收。", "提示");

效果图:

(3)指定自定义命令的对话框

MessageDialog类有一个重要的成员,可以在当前对话框中呈现多个命令按钮:

public IList<IUICommand> Commands { get; }   

可以看到,只要你愿意,你可以向Commands注入多个命令,有意思吧?有一个已经实现了接口IUICommand的类UICommand,这个类就是对命令的处理,它不仅接收一个标签文本,还可以接收一个处理程序的委托UICommandInvokedHandler,UICommand类的构造函数有四个:

        public UICommand();
        public UICommand(string label);
        public UICommand(string label, UICommandInvokedHandler action);
        public UICommand(string label, UICommandInvokedHandler action, object commandId);

来看一下如何注册命令的处理程序:

复制代码
        MessageDialog md = new MessageDialog("确定要提交当前数据吗?", "询问");
            md.Commands.Add(new UICommand("确定", cmd =>
            {
                Debug.WriteLine("确定");
            }));
            md.Commands.Add(new UICommand("放弃", cmd => 
            {
                Debug.WriteLine("放弃");
            }));
            md.ShowAsync();
复制代码

效果图:

如果你觉得上面的处理还不过瘾,请看下面。

(4)使用具有命令Id的命令

细心的你一定能发现上面UICommand的最后一个构造函数:

public UICommand(string label, UICommandInvokedHandler action, object commandId);

最后一个参数可以指定命令的Id,也就是说,在下文中我们可以根据这个Id来进行不同的操作,这个object类型的Id允许你给它任意类型的数据。下面的代码我们取消了注册命令处理程序,而是为指定了命令Id:

复制代码
                        MessageDialog md = new MessageDialog("确定要提交当前数据吗?", "询问");
            md.Commands.Add(new UICommand("确定", null, 0));
            md.Commands.Add(new UICommand("放弃", null, 1));
            md.Commands.Add(new UICommand("帮组", null, 2));
            md.DefaultCommandIndex = 0;
            md.CancelCommandIndex = 1;
            var flg = await md.ShowAsync();
            //var flg = md.ShowAsync();
            switch (flg.Id)
            {
                case 0:
                    //Do Something
                    break;
                case 1:
                    //Do Something
                    break;
                case 2:
                    //Go to Help
                    break;
                default:
                    break;
            }
复制代码

效果图:

在前面我们看到MessageDialog是以异步方式打开,所以我们可以根据需要获取ShowAsync()的响应结果,根据命令Id执行进一步的操作。使用DefaultCommandIndex指定当我们按下Enter键时响应的按钮,CancelCommandIndex指定当按下Esc键时应的按钮。

很遗憾的是MessageDialoge不能定义对话框的样式, 如何想创建更个性的对话框,可以使用Popup 来模拟对话框,关于Popup这里就不再介绍了,感兴趣的可以去查找相关资料。

 

小 结
本博客文章版权归博客园和solan3000共同所有。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值