写个Win8 Metro风格的RSS阅读器 推荐
2012-05-11 16:49
218 查看
今天尝试写一个Metro风格的RSS阅读器,数据源就用本博客的订阅地址吧,先上效果图:
点击其中的文章,再显示内容:
功能挺简单,先看工程结构:
MainPage是首页,一打开就显示博客标题和文章列表。
MainPage.xaml:
MainPage.xaml.cs:
ArticlePage是内容页,用于显示文章内容,能回退到MainPage。
ArticlePage.xaml:
ArticlePage.xaml.cs:
OK,Ctrl+F5运行吧。
PS:本文基于Win8 Consumer Preview + Visual Studio 11 Beta。
PPS:应小星同学强烈要求,补一下BlogArticle这个类,就是个数据实体,其实从前面赋值的代码里已经能推断出来了。
PPPS:最近加了搜索功能,见文章http://boytnt.blog.51cto.com/966121/892682
点击其中的文章,再显示内容:
功能挺简单,先看工程结构:
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
相关文章推荐
- windows8开发-关于wp7应用迁移到win8 metro风格
- 图解使用Win8Api进行Metro风格的程序开发十二----上下文菜单
- VC/Wince 实现仿Win8 Metro风格界面2——页面滑动切换(附效果图)
- Win8采用扁平化的Metro设计风格如何设置默认进入桌面
- 给Metro风格RSS阅读器加个搜索
- WIN8-Metro风格开发---入门篇(C#补全计划)
- WIN8 Metro UI 风格下的微软报表开发与设计 Metro UI SSRS - BIWORK
- 图解使用Win8Api进行Metro风格的程序开发五----在系统的设置窗口添加按钮
- Win8 Metro风格的Web桌面HteOS
- 图解使用Win8Api进行Metro风格的程序开发九----解压缩
- 体验Win8 Metro应用开发 推荐
- 图解使用Win8Api进行Metro风格的程序开发二
- Win8 Metro风格应用中梯形动画的一种实现方法(C# & XAML)
- 【简报】微软Metro/win8风格的web开发框架 - BootMetro
- xaml语言建立首个win8 Metro应用,rss阅读器
- 图解使用Win8Api进行Metro风格的程序开发十----音乐播放
- 【简报】微软Metro/win8风格的web开发框架 - BootMetro
- 10套华丽的Win8 Metro风格图标免费下载
- 图解使用Win8Api进行Metro风格的程序开发七----BackgroundDownloader和BackgroundUploader
- win8下metro风格应用程序的生命周期