【windows8开发】C++开发Metro风格App

在win8系列前面的文章里跟大家分享过，win8下基于WinRT有3种开发Metro UI App的方式，一种是XAML+C++，一种是html+css+javascript，一种是XAML+C#。开发平台和框架相关的详细内容可以参考这篇文章：

《【windows8开发】开发平台与开发框架》

先说明下自己的开发环境吧，我是用VMWare装了Win8的消费者预览版，然后又装了Visual Studio11 Express Beta for Windows8，大家也可以尝试下，毕竟实际动手敲下代码跑一下，感觉会更直观一点。

在本文中会跟大家一起来讨论下用C++结合XAML怎么去开发Metro App。还是通过一个实际例子来进行说明吧，这里让我们来开发一个Rss订阅的客户端。假设就订阅我自己CSDN博客里的《windows8 app开发专栏》，最后实现效果如下图所示：

首先，打开Vs2011，新建一个Visual C++，Metro Style，Blank Applicaiton的工程。新工程大致如下：

简单介绍下工程里的文件吧，

1. App.xaml：本应用程序对象，虽然也是xaml格式，但是不包含任何UI。

2. BlankPage.xaml：默认空白页面，可以直接修改XAML或通过designer设计页面UI。

3. BlankPage.xaml.h, BlankPage.xaml.cpp：包含默认页面UI的event和基本逻辑，但不包含BlankPage.xaml里UI生成的代码。

4. App.xaml.h, App.xaml.cpp：Application相关事件和处理，其中会调用BlankPage页面。

5. Package.appxmanifest：定义App相关的基本信息。包括App名字，描述，logo等。

6. pch.h, pch.cpp： 预编译文件

7. BlankPage.g.h, BlankPage.g.cpp: 展开External Dependencies会看到这个文件，它包含了BlankPage.xaml里UI生成的代码，其中的class通过partial关键字定义，其实跟BlankPage.xaml.h里声明的是同一个class。需要注意的是，一般情况下都不要自己去修改这个文件，它会由开发环境自动跟相关Page同步更新。

关于partial关键字以及后续代码中会出现的很多C++/CX的新特性，如果不明白可以参考下面这篇文章：

《【windows8开发】深入浅出C++/CX》

接着我们就开始实际功能的开发吧。

由于需要通过Rss获取信息，所以肯定需要一个存放数据的容器。新建一个Module.h文件，实际代码如下所示：

#pragma once #include "pch.h" #include <collection.h> namespace RssReader { // To be bindable, a class must be defined within a namespace // and a bindable attribute needs to be applied. [Windows::UI::Xaml::Data::Bindable] public ref class DataItem sealed { public: DataItem(void){} ~DataItem(void){} property Platform::String^ Title; property Platform::String^ Author; property Platform::String^ Content; // Temporary workaround (use Object^ not DateTime): // property Windows::Foundation::DateTime PubDate; property Platform::Object^ PubDate; }; [Windows::UI::Xaml::Data::Bindable] public ref class ModuleData sealed { public: ModuleData(void) { m_items = ref new Platform::Collections::Vector<Platform::Object^>(); } ~ModuleData(void){} property Platform::String^ Title; property Windows::Foundation::Collections::IVector<Platform::Object^>^ Items { Windows::Foundation::Collections::IVector<Platform::Object^>^ get() {return m_items; } } private: Platform::Collections::Vector<Platform::Object^>^ m_items; }; }

这里包含了两个class，ModuleData类是Rss订阅信息的容器，DataItem类则定义了容器中每条单独的信息的格式。

我们再把上面定义的数据容器集成到BlankPage中，在BlankPage.xaml.h中，追加以下代码：

private: void GetModuleData(Platform::String^ feedUriString); ModuleData^ moduleData;

并且include相关文件：

#include "Module.h"

而在BlankPage.xaml.cpp中，加上以下代码：

首先，是加上关联文件和命名空间：

#include <ppltasks.h> using namespace Windows::Web::Syndication; using namespace Concurrency;

其次，在构造函数中创建moduleData：

moduleData = ref new ModuleData();

然后，追加GetModuleData方法的实现：

void BlankPage::GetModuleData(Platform::String^ feedUriString) { // Create the SyndicationClient and the target uri SyndicationClient^ client = ref new SyndicationClient(); Uri^ feedUri = ref new Uri(feedUriString); // Create the async operation. feedOp is an // IAsyncOperationWithProgress<SyndicationFeed^, RetrievalProgress>^ auto feedOp = client->RetrieveFeedAsync(feedUri); feedOp = client->RetrieveFeedAsync(feedUri); // Create the task object and pass it the async operation. // SyndicationFeed^ is the type of the return value // that the feedOp operation will eventually produce. task<SyndicationFeed^> createTask(feedOp); // Create a "continuation" that will run when the first task completes. // The continuation takes the return value of the first operation, // and then defines its own asynchronous operation by using a lambda. createTask.then([this] (SyndicationFeed^ module) -> SyndicationFeed^ { // Get the title of the feed (not the individual posts). moduleData->Title = module ->Title->ToString(); // Retrieve the individual posts from the feed. auto dataItems = module->Items; // Iterate over the posts. You could also use // std::for_each( begin(feedItems), end(feedItems), // [this, feed] (SyndicationItem^ item) for(int i = 0; i < (int)dataItems->Size; i++) { auto item = dataItems->GetAt(i); DataItem^ dataItem = ref new DataItem(); dataItem->Title = item->Title->Text; const wchar_t* title = dataItem->Title->Data(); wchar_t key = '8'; const wchar_t* result = wcschr((wchar_t*)title, key); if (result != 0) { dataItem->PubDate = ref new Platform::Box<Windows::Foundation::DateTime>(item->PublishedDate); dataItem->Author = item->Authors->GetAt(0)->Name; if (module->SourceFormat == SyndicationFormat::Atom10) { dataItem->Content = item->Content->Text; } else if (module->SourceFormat == SyndicationFormat::Rss20) { dataItem->Content = item->Summary->Text; } moduleData->Items->Append((Object^)dataItem); } } this->DataContext = moduleData; return module; }).then ([] (task<SyndicationFeed^> t) { try { auto f = t.get(); } catch (std::exception e) { //Handle exception } }); }

这里的GetModuleData方法是通过Rss订阅URL来获得订阅信息，然后把信息存储到moduleData以及BlankPage的DataContext属性中（关于DataContext后续会有说明），这是是通过异步处理来获取信息的，不理解WinRT异步task的还是先参考下上面提到的C++/CX的文章吧。

备注：上述代码中的如下代码只是为了过滤出window8专栏的文章，如果要显示所有文章，可以不需要。

wchar_t key = '8'; const wchar_t* result = wcschr((wchar_t*)title, key);

然后我们可以开始开发UI了，如下是最终BlankPage.xaml的代码：

<Page x:Class="RssReader.BlankPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:RssReader" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" Loaded="PageLoadedHandler"> <Grid Background="{StaticResource ApplicationPageBackgroundBrush}" Name="Grid1"> <Grid.RowDefinitions> <RowDefinition Height="140" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <TextBlock x:Name="TitleText" Text="{Binding Path=Title}" VerticalAlignment="Center" FontSize="48" Margin="56,0,0,0"/> <Grid Name="Grid2" Grid.Row="1"> <Grid.ColumnDefinitions> <ColumnDefinition Width="2*" /> <ColumnDefinition Width="3*" /> </Grid.ColumnDefinitions> <ListView x:Name="ItemListView" ItemsSource="{Binding Path=Items}" SelectionChanged="ItemListView_SelectionChanged" Margin="10,0,0,10"> <ListView.ItemTemplate> <DataTemplate> <StackPanel> <TextBlock Text="{Binding Path=Title}" FontSize="24" Margin="5,0,0,0" TextWrapping="Wrap" /> <TextBlock Text="{Binding Path=Author}" FontSize="16" Margin="15,0,0,0"/> </StackPanel> </DataTemplate> </ListView.ItemTemplate> </ListView> <Grid Name ="Grid3" Grid.Column="1" DataContext="{Binding ElementName=ItemListView, Path=SelectedItem}"> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <TextBlock Text="{Binding Path=Title}" FontSize="24" Margin="5,0,0,0" TextWrapping="Wrap" /> <WebView x:Name="ContentView" Grid.Row="1" Margin="0,5,20,20"/> </Grid> </Grid> </Grid> </Page>

让我们简单分析下上面的XAML。

1. 显示Page对应的XAML的最顶层永远都是<page>节点，我们关注下<page>的以下三个属性：

x:Class="RssReader.BlankPage" ：指本Page对应的类名

xmlns:local="using:RssReader" ： 指本Page用到的命名空间名

Loaded="PageLoadedHandler" ：Page加载时的处理，也就是页面Load事件的Handler方法

（事件处理方法到后面再追加）

2.<TextBlock>中，都有这样的属性：

Text="{BindingPath=Title}"

GetModuleData

这里的Binding其实是绑定了BlankPage类的成员变量，还记得前面GetModuleData的处理中有如下代码：

this->DataContext = moduleData;

这里其实就是绑定到了BlankPage类DataContext成员变量，而DataContext被设置成为了moduleData，所以其实就是指本文本框显示的内容为this->DataContext->Title(即moduleData的成员变量Title)。也许有人会感到疑惑，因为在BlankPage类的定义中并没有定义DataContext这个成员变量。其实前面提到过了，BlankPage.g.h中有UI生成的相关代码是通过partial关键字也被定义为了BlankPage类的内容。而DataContext在UI的Framework层应该有被定义，DataContext就是用作UI对象的数据绑定。

3. 在<ListView>，<WebView>等标签中，还看到x:Name的属性，它指代的是本UI空间对应的实例对象名字，比如<ListView>中为x:Name="ItemListView",那么<ListView>的对象名就是ItemListView，BlankPage类中可以直接通过ItemListView对象来处理<ListView>的行为。

最后，在以上XAML中，<Page>和<ListView>中还分别定义了一个事件，

<Page>：Loaded="PageLoadedHandler"

<ListView>：SelectionChanged="ItemListView_SelectionChanged"

所以还需要在代码里添加事件处理：

BlankPage.xaml.h中为BlankPage类添加如下方法，方法名跟上面属性值对应：

void ItemListView_SelectionChanged(Platform::Object^ sender, Windows::UI::Xaml::Controls::SelectionChangedEventArgs^ e); void PageLoadedHandler(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);

BlankPage.xaml.cpp中添加以上事件处理方法的具体实现：

void BlankPage::PageLoadedHandler(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e) { GetModuleData("http://blog.csdn.net/my_business/rss/list"); } void BlankPage::ItemListView_SelectionChanged (Platform::Object^ sender, Windows::UI::Xaml::Controls::SelectionChangedEventArgs^ e) { DataItem^ dataItem = safe_cast<DataItem^>(ItemListView->SelectedItem); if (dataItem != nullptr) { // Navigate the WebView to the blog post content HTML string. ContentView->NavigateToString(dataItem->Content); } }

http://blog.csdn.net/my_business/rss/list是博客Rss订阅的URL。

OK，至此大功告成，编译运行一下就可以看到开始的那个画面的。

总结一下，

1. C++结合XAML的形式加上Framework提供的很多接口确实可以非常方便的开发Metro UI风格的App。

2. 对于没了解过C++/CX以及XAML的C++普通开发者，要马上上手有点难度，前期还是需要一点投入。投入多少因人而异。

3. 个人还是更倾向于C++开发底层和逻辑层组件，Javascript开发UI的开发模式。