手把手玩转win8开发系列课程（11）

运行程序

这节的议程，我觉得很简单——运行程序

在vs界面布局的页面都是静态，真正让项目运行起来才是动态的了。只有使其运行起来，这样xaml与C#合二为一，以一个真正的程序显示出来。你可以选择调试菜单，也可以按F5键，这样，能够生成并且在模拟器中运行。运行的结果就是如图所示：

你可以清晰看见这样的效果，①一些来自于viewmodel中的数据源加载到了listview控件中。②我以前定义的一些数据的模板和样式也能在程序中得到了很好的应用。

我们还能够看到了许多真的只有动态运行的才能够看到的效果。譬如说，当光标移动到某一项的上面，这项目才能高亮显示。选择时候，显示不同的状态、这些变化是怎么来的啊？是来自于我源代码文件某项项的配置。

这样，一个项目已经能够运行了，可是这只是第一步。我们还在这个基础上，添加一些东西。使其项目功能更加的丰富。

导入其他的页面

你并非需要把所有的控件和源码单独一个xaml页面和一个源码文件中去。平时，为了项目更加的更加的管理。我们一般是这么做的，我可以创建多个页面，再把这些页面放在一起就ok了。依照这个道理。我这里也也创建了一个叫做NoItemSelected的页面。xaml源代码如下： 

 1 <Page
 2   x:Class="MetroGrocer.Pages.NoItemSelected"
 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    <!--Grid控件-->
10   <Grid Background="{StaticResource AppBackgroundColor}" Margin="10">
11     <TextBlock Style="{StaticResource HeaderTextStyle}"
12           FontSize="30" Text="No Item Select </Grid>
13 </Page>

这是一个简单的页面——这个页面是默认生成的。我能在ListView.xaml布局这个主要的页面上添加这个页面。添加页面源代码如下：

1 <!--垂直方式显示 Frame添加页面-->
2 <StackPanel Orientation="Vertical" Grid.Column="1">
3   <TextBlock Style="{StaticResource HeaderTextStyle}" Margin="10"
4         Text="Item Detail"/>
5   <Frame x:Name="ItemDetailFrame"/>
6 </StackPanel>

这个Frame是一个呈现页面的容器，在源代码页面的Navigate方法，可以定义你导航到那个页面。相应的源代码如下：

 1 using MetroGrocer.Data;
 2 using Windows.UI.Xaml.Controls;
 3 using Windows.UI.Xaml.Navigation;
 4 namespace MetroGrocer.Pages {
 5   public sealed partial class ListPage : Page {
 6     ViewModel viewModel;
 7     public ListPage() {
 8       viewModel = new ViewModel();
 9       // … test data removed for brevity
10       this.InitializeComponent();
11       this.DataContext = viewModel;
12      //导航到那个页面
13 ItemDetailFrame.Navigate(typeof(NoItemSelected));
14     }
15     protected override void OnNavigatedTo(NavigationEventArgs e) {
16     }
17     //选择的事件  是当前选择的页面
18     private void ListSelectionChanged(object sender, SelectionChangedEventArgs e) {
19       viewModel.SelectedItemIndex = groceryList.SelectedIndex;
20    }
21   }
22 }

navgiate的方法中参数是系统的，这个类型代表了你要加载的页面类，他是最简单方法获取系统类型的方法。相应的类型是关键字类型。这个结果就是导入到了其他的页面，相应的运行效果如图所示：

这样，就能导入其他的页面。   下一节，我们继续议程。