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