这节，我们来讨论①像程序中添加最复杂的flyout控件②创建包装类
（1）像程序中添加最复杂的flyout控件
手把手玩转win8开发系列课程（21）的时候了，我们已经把一个简单的FlyOut的文件添加到了项目中，我们觉得还不够，因此了，上节我们创建了一个复杂的控件。于是，我们来将其添加到项目中去，下列是添加这个控件的源码：
1 <!--flyouts 命名空间 指向MetroGrocer.Flyouts-->
2 <flyouts:HomeZipCodeFlyout x:Name="HomeZipFlyout"/>
3 <flyouts:AddItemFlyout x:Name="AddItemFlyout"/>上述的源码就完成了这个控件的添加。
下列的源码显示了按下按钮实现的功能，如下所示：
1 //按钮的方法
2 private void AppBarButtonClick(object sender, RoutedEventArgs e) {
3 if (e.OriginalSource == AppBarDoneButton
4 && viewModel.SelectedItemIndex > -1) {
5 // viewModel.GroceryList.RemoveAt(viewModel.SelectedItemIndex);
6 viewModel.SelectedItemIndex = -1;
7 } else if (e.OriginalSource == AppBarZipButton) {
8 HomeZipFlyout.Show(this, this.BottomAppBar, (Button)e.OriginalSource);
9 } else if (e.OriginalSource == AppBarAddButton) {
10 //展示控件
11 AddItemFlyout.Show(this, this.BottomAppBar, (Button)e.OriginalSource);
12 }
13 }我这个按钮的方法，根据不同的参数来显示不同的情况，最终显示控件。
运行的情况，就如下列图形所示。这个dismiss样式，是当时运行，显示的效果。
(2)创建包装类
初说包装类，可能一头雾水，我这里说一段前引。
如果你想完成 页面的自动的跳转，我这里需要一个navBar，8以至于对程序操作更加的简单。最简单的方法，是在metro的wrapper页面中提供一个frame。这就是我所说的包装类。
我像吧mainpage作为一个包装来使用，我使用了一个空白的页面。下列是源代码：
1 <Page
2 x:Class="MetroGrocer.Pages.MainPage"
3 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5 xmlns:local="using:MetroGrocer.Pages"
6 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
7 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
8 mc:Ignorable="d">
9 <!--TopAppBar 的控件 navBar控件-->
10 <Page.TopAppBar>
11 <AppBar>
12 <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
13 <ToggleButton x:Name="ListViewButton"
14 Style="{StaticResource ToggleAppBarButtonStyle}"
15 AutomationProperties.Name="List View" IsChecked="True"
16 Content="" Click="NavBarButtonPress"/>
17 <ToggleButton x:Name="DetailViewButton"
18 Style="{StaticResource ToggleAppBarButtonStyle}"
19 AutomationProperties.Name="Detail View"
20 Content="" Click="NavBarButtonPress"/>
21 </StackPanel>
22 </AppBar>
23 </Page.TopAppBar>
24 <!--Grid的布局控件-->
25 <Grid Background="{StaticResource ApplicationPageBackgroundBrush}">
26 <!--Frame 控件-->
27 <Frame x:Name="MainFrame" />
28 </Grid>
29 </Page>下列，我在页面的顶部创建了一个按钮。在嵌套mainframe控件显示页面，这就是包装。
注意了，为了创建一个appBar按钮，我使用了Page.TopAppBar属性，这种机制和appBar是一模一样的。但是，我这里使用了toggleButton 的按钮来展示不同的方式。
为了更好的体现了navbar的功能，mainPage的布局中含有了一个frame框架，来显示了不同的样式。
支持所谓布局的页面是非常简单的，一点击所谓的toggleButton的按钮就导航到不同的页面，并且来改变是否选择的属性，我上面创建的viewmodel的对象是贯穿整个对象，这个是用来跨页面进行数据传递。相应的源代码如下所示：
1 using MetroGrocer.Data;
2 using Windows.UI.Xaml;
3 using Windows.UI.Xaml.Controls;
4 using Windows.UI.Xaml.Controls.Primitives;
5 using Windows.UI.Xaml.Navigation;
6 namespace MetroGrocer.Pages {
7 public sealed partial class MainPage : Page {
8 private ViewModel viewModel;
9 public MainPage() {
10 this.InitializeComponent();
11 viewModel = new ViewModel();
12 // …test data removed for brevity
13 this.DataContext = viewModel;
14 MainFrame.Navigate(typeof(ListPage), viewModel);
15 }
16 protected override void OnNavigatedTo(NavigationEventArgs e) {
17 }
18 //导航按钮按下的事件 用以导航到不同的页面
19 private void NavBarButtonPress(object sender, RoutedEventArgs e) {
20 Boolean isListView = (ToggleButton)sender == ListViewButton;
21 MainFrame.Navigate(isListView ? typeof(ListPage)
22 : typeof(DetailPage), viewModel);
23 ListViewButton.IsChecked = isListView;
24 DetailViewButton.IsChecked = !isListView;
25 }
26 }
27 }最重要的是这个根据不同的源对象导航到不同页面的方法。
至于导航到默认的页面，是在构造函数中已经声明了。
怎么，把这个页面放在下面中了，是篡改app的源文件吗？源代码如下：
1 //在程序的加载的事件中用以导航mainpage页面了
2 protected override void OnLaunched(LaunchActivatedEventArgs args) {
3 if (args.PreviousExecutionState == ApplicationExecutionState.Terminated) {
4 //TODO: Load state from previously suspended application
5 }
6 // Create a Frame to act navigation context and navigate to the first page
7 var rootFrame = new Frame();
8 rootFrame.Navigate(typeof(Pages.MainPage));
9 // Place the frame in the current Window and ensure that it is active
10 Window.Current.Content = rootFrame;
11 Window.Current.Activate();
12 }默认导航到mainpage页面。
哝——一个包装类ok了，用以展示不同的页面。