手把手玩转win8开发系列课程(23)

简介:

这节,我们来讨论①像程序中添加最复杂的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了,用以展示不同的页面。


目录
相关文章
下一篇
无影云桌面