写个Win8 Metro风格的RSS阅读器

今天尝试写一个Metro风格的RSS阅读器，数据源就用本博客的订阅地址吧，先上效果图：

点击其中的文章，再显示内容：

 

功能挺简单，先看工程结构：

MainPage是首页，一打开就显示博客标题和文章列表。

MainPage.xaml：

<Page 
    x:Class="Rss.MainPage" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:Rss" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" x:Name="rootPage"> 
 
    <Grid Background="{StaticResource ApplicationPageBackgroundBrush}"> 
        <!--分面上下两行，上面显示博客标题，下面显示文章列表--> 
        <Grid.RowDefinitions> 
            <RowDefinition Height="120"></RowDefinition> 
            <RowDefinition Height="*"></RowDefinition> 
        </Grid.RowDefinitions> 
 
        <!--这个就是博客标题了--> 
        <TextBlock Name="pageTitle" Style="{StaticResource PageHeaderTextStyle}" Margin="30,20,0,0"></TextBlock> 
 
        <!--用GridView来承载文章列表，ItemsSource使用数据绑定方式，一会儿会把一个List<BlogArticle>赋值给它，所以绑定的是Value--> 
        <GridView Name="gvArticles" ItemsSource="{Binding Value}" Grid.Row="1" Padding="50" SelectionChanged="gvArticles_SelectionChanged"> 
            <!--定义模板，放一个图片和一行文本--> 
            <GridView.ItemTemplate> 
                <DataTemplate> 
                    <StackPanel Margin="5"> 
                        <Image Width="120" Height="120" Source="ms-appx:///Assets/Article.png"></Image> 
                        <!--文章标题又使用了数据绑定方式，绑定到BlogArticle.Title属性上--> 
                        <TextBlock Text="{Binding Title}" TextWrapping="Wrap" Width="120"></TextBlock> 
                    </StackPanel> 
                </DataTemplate> 
            </GridView.ItemTemplate> 
        </GridView> 
    </Grid> 
</Page>

MainPage.xaml.cs：

using System; 
using System.Collections.Generic; 
using System.IO; 
using System.Net.Http; 
using System.Text; 
using Windows.Foundation; 
using Windows.Foundation.Collections; 
using Windows.UI.Xaml; 
using Windows.UI.Xaml.Controls; 
using Windows.UI.Xaml.Controls.Primitives; 
using Windows.UI.Xaml.Data; 
using Windows.UI.Xaml.Input; 
using Windows.UI.Xaml.Media; 
using Windows.UI.Xaml.Navigation; 
using Windows.Data.Xml.Dom; 
 
namespace Rss 
{ 
    public sealed partial class MainPage : Page 
    { 
        public MainPage() 
        { 
            this.InitializeComponent(); 
        } 
 
        //页面加载时会调用OnNavigateTo方法，把它变成async的，因为里面要用异步方法 
        protected async override void OnNavigatedTo(NavigationEventArgs e) 
        { 
            //拿HttpClient取rss的xml，WebClient这个类没有了。另外由于XmlDataProvider不能用了，所以只好自己解析并装载集合 
            var client = new HttpClient(); 
            string url = "http://boytnt.blog.51cto.com/rss.php?uid=966121"; 
 
            //注意51cto的rss是gbk编码的，所以不能直接client.GetStringAsync，会乱码，这里await关键字发威了~~ 
            StreamReader reader = new StreamReader(await client.GetStreamAsync(url), Encoding.GetEncoding("gbk")); 
            string rss = await reader.ReadToEndAsync(); 
            //XmlDocument也换到Windows.Data.Xml.Dom命名空间下了 
            XmlDocument xml = new XmlDocument(); 
            xml.LoadXml(rss); 
 
            //解析title 
            pageTitle.Text = xml.SelectSingleNode("/rss/channel/title").InnerText; 
 
            //解析item，然后装入List<BlogArticle>中，图省事只装载了title和link两个节点 
            var articles = new List<BlogArticle>(); 
            var nodes = xml.SelectNodes("/rss/channel/item"); 
            foreach (var node in nodes) 
            { 
                var article = new BlogArticle() 
                { 
                    Title = node.SelectSingleNode("title").InnerText, 
                    Link = node.SelectSingleNode("link").InnerText 
                }; 
                articles.Add(article); 
            } 
 
            //赋数据源 
            gvArticles.ItemsSource = articles; 
 
            //前面打开的StreamReader没关闭？是的，没有Close方法了  一_一# 
        } 
 
        private void gvArticles_SelectionChanged(object sender, SelectionChangedEventArgs e) 
        { 
            var articles = gvArticles.ItemsSource as List<BlogArticle>; 
            int index = gvArticles.SelectedIndex; 
 
            //跳转到ArticlePage去，并且把选中的文章作为参数传递过去 
            rootPage.Frame.Navigate(typeof(ArticlePage), articles[index]); 
        } 
    } 
}

ArticlePage是内容页，用于显示文章内容，能回退到MainPage。

ArticlePage.xaml：

<common:LayoutAwarePage 
    x:Name="pageRoot" 
    x:Class="Rss.ArticlePage" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:Rss" 
    xmlns:common="using:Rss.Common" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d"> 
 
    <Grid Background="{StaticResource ApplicationPageBackgroundBrush}"> 
        <!--也分上下两行，上面显示回退按钮和标题，下面显示页面--> 
        <Grid.RowDefinitions> 
            <RowDefinition Height="120"/> 
            <RowDefinition Height="*"/> 
        </Grid.RowDefinitions> 
 
        <!--第一行放一个Grid，再分成两列，分别显示按钮和标题-->  
        <Grid> 
            <Grid.ColumnDefinitions> 
                <ColumnDefinition Width="Auto"/> 
                <ColumnDefinition Width="*"/> 
            </Grid.ColumnDefinitions> 
 
            <!--回退按钮使用了内置的样式--> 
            <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/> 
            <TextBlock x:Name="pageTitle" Text="{Binding Group.Title}" Style="{StaticResource PageHeaderTextStyle}" Grid.Column="1"/> 
        </Grid> 
 
        <!--用WebView显示页面，现在没有WebBrowser了--> 
        <WebView Name="article" Grid.Row="1"></WebView> 
    </Grid> 
</common:LayoutAwarePage>

ArticlePage.xaml.cs：

using System; 
using System.Collections.Generic; 
using System.IO; 
using System.Linq; 
using Windows.Foundation; 
using Windows.Foundation.Collections; 
using Windows.UI.Xaml; 
using Windows.UI.Xaml.Controls; 
using Windows.UI.Xaml.Controls.Primitives; 
using Windows.UI.Xaml.Data; 
using Windows.UI.Xaml.Input; 
using Windows.UI.Xaml.Media; 
using Windows.UI.Xaml.Navigation; 
 
namespace Rss 
{ 
    public sealed partial class ArticlePage : Rss.Common.LayoutAwarePage 
    { 
        public ArticlePage() 
        { 
            this.InitializeComponent(); 
        } 
 
        protected override void OnNavigatedTo(NavigationEventArgs e) 
        { 
            //e.Parameter中是传过来的参数 
            var param = e.Parameter as BlogArticle; 
            pageTitle.Text = param.Title; 
            article.Source = new Uri(param.Link); 
        } 
    } 
}

OK，Ctrl+F5运行吧。

PS：本文基于Win8 Consumer Preview + Visual Studio 11 Beta。

PPS：应小星同学强烈要求，补一下BlogArticle这个类，就是个数据实体，其实从前面赋值的代码里已经能推断出来了。 

using System; 
namespace Rss 
{ 
    public class BlogArticle 
    { 
        public string Title { get; set; } 
        public string Link { get; set; } 
    } 
}

PPPS：最近加了搜索功能，见文章http://boytnt.blog.51cto.com/966121/892682