Windows Store apps开发[5]导航栏(AppBar)的使用
2012-08-10 17:49
555 查看
注:本系列学习帖子我在DevDiv.com移动开发社区原创首发
转载请注明出处:BeyondVincent(破船)@DevDiv.com
如果你有什么问题也可以前往交流
下面是首发地址:
[DevDiv原创]Windows
8 Metro App开发Step by Step---(13个学习帖子)
有时候我们的程序包含不同的功能,需要不同的画面来显示用户需求,此时各画面之间就需要进行导航,为了让用户可以方便的进行画面切换,最好提供一致的导航功能。在本次学习中,我就带领大家学如何在Metro应用程序开发中使用AppBar。通过本次学习,你将掌握以下内容:
1、如何把AppBar封装到程序中
2、画面的导航及相关页面代码编写
3、最后附上程序运行截图和程序
更多内容请查看下面的帖子
Windows 8 Metro App开发Step by Step
1、如何把AppBar封装到程序中
在这里我使用Blank App模版创建一个名为DevDiv_AppNavBar的工程。并在MainPage.xaml文件的page中,添加如下代码:
<Page.TopAppBar> <AppBar Background="SteelBlue"> <StackPanel Orientation="Horizontal" HorizontalAlignment="Center"> <Button x:Name="btBlankPage1" Style="{StaticResource YesAppBarButtonStyle}" AutomationProperties.Name="第一个画面" IsEnabled="False" Click="NavBarButtonPress"/> <Button x:Name="btBlankPage2" Style="{StaticResource YesAppBarButtonStyle}" AutomationProperties.Name="第二个画面" IsEnabled="True" Click="NavBarButtonPress"/> </StackPanel> </AppBar> </Page.TopAppBar> <Grid Background="OliveDrab"> <Frame x:Name="MainFrame" /> </Grid>
为了添加一个NavBar,我在Page.TopAppBar属性里面声明了一个AppBar控件。NavBar的机制与AppBar(底部)类似,在这里我添加了两个Button,用以进行画面的导航响应。
从上面给出的代码,还可以看到除了NavBar,MainPage的布局中还包含一个Frame,我将用它来显示不同的视图。
上面代码可以在VS的设计器中看到,如下图。很简单吧,这样就完成了导航栏的添加了。
![](http://my.csdn.net/uploads/201208/10/1344592783_8666.png)
下面我们来给导航栏中按钮做事件处理,以及相关页面的编写。
2、画面的导航及相关页面代码编写
导航事件响应的代码编写相对来说也比较简单,只需要在MainPage.xaml.cs中实现button对应的NavBarButtonPress函数就行。下面我给出该函数完整的代码:
private void NavBarButtonPress(object sender, RoutedEventArgs e) { Boolean isBlankPage1 = (Button)sender == btBlankPage1; btBlankPage1.IsEnabled = !isBlankPage1; btBlankPage2.IsEnabled = isBlankPage1; if (isBlankPage1) { MainFrame.Navigate(typeof(BlankPage1)); } else { MainFrame.Navigate(typeof(BlankPage2)); } }
如上代码所示,由于两个button都由NavBarButtonPress负责响应事件,那么在该函数的开始需要先判断以下事件的来源,以作响应的处理。如果事件来源是btBlankPage1,则说明需要切换到画面一,如果是btBlankPage2,则切换到画面二。
在这里需要注意的是,为了演示导航,我使用空白页模版另外新建了两个BlankPage(BlankPage1和BlankPage2),并将其放在Pages目录中。这两个画面实际上什么都没有。
如下图:
![](http://my.csdn.net/uploads/201208/10/1344592824_4988.png)
![](http://my.csdn.net/uploads/201208/10/1344592835_5680.png)
3、最后附上程序运行截图和程序
虽然代码看起来不太复杂,但是在写这个小例子程序中,还是花了些许时间。下面我就把程序运行截图和代码附上,如果你需要的话,可以下载来学习,有问题的话也可以跟帖交流。
![](http://my.csdn.net/uploads/201208/10/1344592849_2635.png)
![](http://my.csdn.net/uploads/201208/10/1344592864_9266.png)
代码示例下载:
![](http://www.devdiv.com/static/image/filetype/rar.gif)
DevDiv_AppNavBar.rar
相关文章推荐
- Windows Store apps开发[3]应用程序栏(AppBar)的使用
- Windows Store apps开发[47]使用默认程序打开文件
- Windows Store apps开发[10]通知使用(Toast,Tile和Badge)
- Windows Store apps开发[41]FlipView控件的介绍和使用
- Windows 8 Metro App开发[5]导航栏(AppBar)的使用
- Windows Store apps开发[39]Windows 8中的Semantic Zoom(语义缩放)(2)SemanticZoom控件的使用
- Windows Store apps开发[27]使用NetworkInformation来判断和监听网络状态
- Windows Store apps开发[12]Windows 8 中搜索合约的使用
- Windows Store apps开发[44]AppBar总结
- Windows Store apps开发[33]Part 1:使用Grid App (XAML)模板创建第一个Windows 8 app
- Windows Store apps开发[16]编写和使用自己的Windows Runtime组件
- Windows Store apps开发[28]在Windows 8 Apps中通过C#使用Web Service
- Windows Store apps开发[80]Windows 8 开发31日-第22日-使用Play To
- Windows Store apps开发[48]MessageDialog的使用
- Windows Store apps开发[56]使用外部字体
- Windows Store apps开发[29]使用Blend设计ButtonStyle
- Windows Store apps开发[21]DatagramSocket与UDP
- Windows Store apps开发[26]C++/CX Part 1 of [n]: 一个简单的类
- Windows Store apps开发[8]处理Fullscreen, Snapped和Filled状态
- Windows Store apps开发[45]修改ProgressBar的颜色