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

在win8系列前面的文章里跟大家分享过，win8下基于WinRT有3种开发Metro UI App的方式，一种是XAML+C++，一种是html+css+javascript，一种是XAML+C#。开发平台和框架相关的详细内容可以参考这篇文章：
《【windows8开发】开发平台与开发框架》
先说明下自己的开发环境吧，我是用VMWare装了Win8的消费者预览版，然后又装了Visual Studio 11 Express Beta for Windows 8，大家也可以尝试下，毕竟实际动手敲下代码跑一下，感觉会更直观一点。

在本文中会跟大家一起来讨论下用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文件，实际代码如下所示：

[align=left][/align]

#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;
};
}

[align=left][/align]

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

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

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

[align=left]并且include相关文件：[/align]

[align=left]

#include "Module.h"

[/align]

而在BlankPage.xaml.cpp中，加上以下代码：
首先，是加上关联文件和命名空间：
[align=left][/align]

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

[align=left]其次，在构造函数中创建moduleData：[/align]

[align=left]

moduleData = ref new ModuleData();

[/align]

[align=left]然后，追加GetModuleData方法的实现：[/align]

[align=left][/align]

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
}
});
}

[align=left][/align]

这里的GetModuleData方法是通过Rss订阅URL来获得订阅信息，然后把信息存储到moduleData以及BlankPage的DataContext属性中（关于DataContext后续会有说明），这是是通过异步处理来获取信息的，不理解WinRT异步task的还是先参考下上面提到的C++/CX的文章吧。
备注：上述代码中的如下代码只是为了过滤出window8专栏的文章，如果要显示所有文章，可以不需要。
[align=left][/align]

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

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

<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>

[align=left][/align]
让我们简单分析下上面的XAML。

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

x:Class="RssReader.BlankPage"
：指本Page对应的类名
xmlns:local="using:RssReader"
： 指本Page用到的命名空间名

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

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

Text="{Binding Path=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"

所以还需要在代码里添加事件处理：
[align=left]BlankPage.xaml.h中为BlankPage类添加如下方法，方法名跟上面属性值对应：[/align]

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中添加以上事件处理方法的具体实现：

[align=left][/align]

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。 [align=left]OK，至此大功告成，编译运行一下就可以看到开始的那个画面的。[/align]

[align=left]总结一下，[/align]
[align=left]1. C++结合XAML的形式加上Framework提供的很多接口确实可以非常方便的开发Metro UI风格的App。[/align]
[align=left]2. 对于没了解过C++/CX以及XAML的C++普通开发者，要马上上手有点难度，前期还是需要一点投入。投入多少因人而异。[/align]
[align=left]3. 个人还是更倾向于C++开发底层和逻辑层组件，Javascript开发UI的开发模式。[/align]