<win8>(5)实例讲解win8(XAML+C#)开发-课程表:Appbar，FilePicker，启动页面(动画)

<win8>(五)实例讲解win8(XAML+C#)开发--------课程表:Appbar，FilePicker，启动页面(动画)

　　免责声明：本文章由fengyun1989创作，采用知识共享署名-非商业性使用-相同方式共享 2.5 中国大陆许可协议进行许可。

　 下面,我们添加Appbar，AppBar大家应该都很熟悉了，wp7里面运用多了去了，不过，这里的AppBar和WP7里面的用法不太一样，有WP7开发经验的从下面的教程就能够看出差别，大同小异。

　　在MaintbPage页面的Grid后面添加如下代码：

<Page.BottomAppBar>
<AppBar>
<Grid>
<Button x:Name="Save" Style="{StaticResource SaveAppBarButtonStyle}" AutomationProperties.Name="保存课表"
HorizontalAlignment="Center" Click="Save_Click"/>
</Grid>
</AppBar>
</Page.BottomAppBar>
<Page.TopAppBar>
<AppBar>
<Grid>
<Button x:Name="About" Style="{StaticResource HelpAppBarButtonStyle}" AutomationProperties.Name="关于我们"
HorizontalAlignment="Center" Click="AboutClick"/>
</Grid>
</AppBar>
</Page.TopAppBar>
</Page>

上面我们添加了ButtonAppBar（底部AppBar）和TopAppBar（顶部AppBar)，这里的AppBar支持随意布局，什么ColumnDefinition都是可以实现的。不过win8和wp7不一样的是底部Appbar没有了下拉菜单。

另外，里面的Button的样式也有区别，在wp7里面我们都是从SDK内部获取Icon图片来实现button的样式，在win8，这些样式是用style来实现，这些Style都定义在了Common/StandardStyles.xaml里面，我们可以根据文件名来获取相应样式，AutomationProperties.Name是用来按钮显示的文字。当然，Button的style也可以自己定义。

推荐关于AppBar的文章：http://www.devdiv.com/_DevDiv原创_Windows_8_Metro_App开发之应用程序栏_AppBar_的使用-thread-130752-1-1.html

接下来实现按钮的click事件，先来实现AboutClick方法。

private void AboutClick(object sender, RoutedEventArgs e)
{
this.Frame.Navigate(typeof(AboutPage));
}

click方法就实现了一个导航，导航至AboutPage。我们要往Pages里面添加一个空白页AboutPage来实现“关于我们”的实现。

AboutPage.xaml前台：

<Grid Background="{StaticResource AppBackgroundColor}">
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock FontSize="42" TextWrapping="Wrap" Grid.RowSpan="2" Grid.Column="0" Grid.Row="0">
此教程由fengyun1989创作，仅供学习交流使用请勿用于商业用途。
</TextBlock>
<Image Source="/Assets/120.jpg" Grid.Column="1" Grid.RowSpan="2" Grid.Row="0" Height="200" Width="200"/>
<Button Content="确定" Width="200" Height="60" HorizontalAlignment="Center" Grid.Row="2" Grid.ColumnSpan="2"
Grid.Column="0" Click="Button_Click_1"/>
</Grid>
</StackPanel>
</Grid>

后台就只实现了确定按钮的click方法，也就是实现了一个导航，导航回MainPge页面。

private void Button_Click_1(object sender, RoutedEventArgs e)
{
this.Frame.Navigate(typeof(MainPage));
}

接下来实现Save按钮，我打算把课表保存为XML数据，并且用FIlePicker来实现路径的选择。

private async void Save_Click(object sender, RoutedEventArgs e)
{
FileSavePicker openPicker = new FileSavePicker();
openPicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
openPicker.FileTypeChoices.Add("XML", new List<string>() { ".xml" });
openPicker.FileTypeChoices.Add("TEXT", new List<string>() { ".txt" });
openPicker.DefaultFileExtension = ".xml";
openPicker.SuggestedFileName = "kebiao";
openPicker.SuggestedStartLocation = PickerLocationId.DocumentsLibrary;
StorageFile file = await openPicker.PickSaveFileAsync();
if (file != null)
{
// Application now has read/write access to the picked file
// Prevent updates to the remote version of the file until we finish making changes and call CompleteUpdatesAsync.
CachedFileManager.DeferUpdates(file);
// write to file
await FileIO.WriteTextAsync(file, ConvertViewModel());
// Let Windows know that we're finished changing the file so the other app can update the remote version of the file.
// Completing updates may require Windows to ask for user input.
FileUpdateStatus status = await CachedFileManager.CompleteUpdatesAsync(file);
if (status == FileUpdateStatus.Complete)
{
MessageDialog msgDlg = new MessageDialog("保存成功！");
await msgDlg.ShowAsync();
}
}
}

/// <summary>
/// Convert ViewModel to XML string
/// </summary>
/// <returns></returns>
string ConvertViewModel()
{
XDocument xml = new XDocument();
XElement root = new XElement("root");
foreach (var item in viewModel.WeekdayList)
{
XElement weekday = new XElement(item.Weekday);
foreach (var scheduleItem in item.ScheduleList)
{
XElement lessonName = new XElement(scheduleItem.LessonName);
lessonName.SetAttributeValue("classroom", scheduleItem.ClassRoom);
lessonName.SetAttributeValue("starttime", scheduleItem.StartTime);
lessonName.SetAttributeValue("endtime", scheduleItem.EndTime);
weekday.Add(lessonName);
}
root.Add(weekday);
}
xml.Add(root);
return xml.ToString();
}

我添加了一个方法ConvertViewModel来实现viewModel转换成XML。在Save_Click中，我们实现了FilePicker。大家如果有window开发经验，应该对上面的代码很熟悉，和window上文件保存的Dialog差不多，都是设定好拓展名，初始命名等，和window上的编程是不是一样？如果路径选择好了，就把数据保存到文件。文件保存成功后就显示一个弹窗，这个弹窗和以前WP7，window的弹窗用法。都不太一样，虽然都是message弹窗。可以添加一些按钮命令等。详细请看：http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.popups.messagedialog.aspx

另外，FilePicker还有其他的用法，比如FileOpenPicker，不过用法也大同小异。详细请看微软官方例子：http://code.msdn.microsoft.com/windowsapps/File-picker-sample-9f294cba

　　而且，记得修改方法为异步方法。因为FilePicker和MessageDialog的展示的时候都是异步的，要用await关键字来修饰，那么整个方法也要修改成异步方法。不要使用编译器智能生成代码习惯了。到头来调试半天都没发现哪里错了。我有时候就是这样。。。

编译后我们运行，就可以得到预想的结果。

注意，在模拟器里面，要用手势才能启动AppBar.