AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

写个Win8 Metro风格的RSS阅读器

2017-11-16 1146
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

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

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

 

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

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

MainPage.xaml：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
< 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：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
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：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
< 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：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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这个类，就是个数据实体，其实从前面赋值的代码里已经能推断出来了。 

1
2
3
4
5
6
7
8
9
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 

 







     本文转自 BoyTNT 51CTO博客，原文链接：http://blog.51cto.com/boytnt/860937，如需转载请自行联系原作者


文章标签：
Windows
技术小胖子
目录
相关文章
实沈
|
9月前
|
C++
基于Qt的简易PDF阅读器设计与实现
基于Qt的简易PDF阅读器设计与实现
实沈
702 3
ws5ztcvob2aao
|
XML JavaScript Android开发
网易新闻RSS阅读器
网易新闻RSS阅读器
ws5ztcvob2aao
413 2
杰克.陈
|
C# Windows
使WPF程序应用预置的控件风格, 如Aero, Luna, Royale, Classic等
原文:使WPF程序应用预置的控件风格, 如Aero, Luna, Royale, Classic等      WPF预设有Aero, Classic, Luna, Royale主题, WPF程序会根据Windows主...
杰克.陈
1311 0
杰克.陈
|
C#
wpf采用Xps实现文档显示、套打功能
原文:wpf采用Xps实现文档显示、套打功能 近期的一个项目需对数据进行套打，用户要求现场不允许安装office、页面预览显示必须要与文档完全一致，xps文档来对数据进行处理。Wpf的DocumentView 控件可以直接将数据进行显示，xps也是一种开放式的文档，如果我们能够替换里面的标签就最终实现了我们想要的效果。
杰克.陈
1816 0
范大脚脚
|
C# Windows 内存技术
将Flash 嵌入WPF 程序
范大脚脚
1299 0
技术小胖子
|
C++
给Metro风格RSS阅读器加个搜索
技术小胖子
976 0
技术小甜
|
JSON C# 数据格式
一步一步学Silverlight 2系列（18）：综合实例之RSS阅读器
技术小甜
1019 0
科技小能手
|
Windows 内存技术
基于Silverlight 2RTW的XPS中文在线阅读器
科技小能手
1079 0
技术小甜
|
Web App开发 JSON C#
一步一步学Silverlight 2系列（23）：Silverlight与HTML混合之无窗口模式
技术小甜
1254 0
科技小能手
|
前端开发
Silverlight实用窍门系列：51.Silverlight页面控件的放大缩小、Silverlight和Html控件的互相操作
科技小能手
1065 0

热门文章

最新文章

  • 1
    解决kafka集群由于默认的__consumer_offsets这个topic的默认的副本数为1而存在的单点故障问题
  • 2
    使用 Docker 高效搭建本地开发环境（详细教程）
  • 3
    如何使用java代码导出word
  • 4
    《Python编程从0到1》笔记1——表达式的风格（前缀、中缀、后缀）
  • 5
    Nginx目录文件列表显示
  • 6
    中移动与阿里巴巴将在四大领域展开全面战略合作
  • 7
    mysql 主从复制配置
  • 8
    google guice @inject comments
  • 9
    html页面中event的常见应用
  • 10
    微软要在年内推出IPTV平台 抢占客厅市场
  • 1
    一级倒立摆平衡控制系统MATLAB仿真,可显示倒立摆平衡动画,对比极点配置,线性二次型,PID,PI及PD五种算法
    28
  • 2
    基于SOA海鸥优化算法的三维曲面最高点搜索matlab仿真
    34
  • 3
    基于PI控制的三相整流器控制系统的simulink建模与仿真,包含超级电容充电和电机
    43
  • 4
    MCMS：Star 28.1k,还在为CMS系统发愁？这款开源神器让内容管理变得像搭积木一样简单！
    35
  • 5
    XJ-Survey：这个让滴滴日均处理1.2亿次问卷请求的开源系统，今天终于公开了它的架构密码！
    37
  • 6
    CPU can only see the threads
    26
  • 7
    Java+机器学习基础：打造AI学习基础
    44
  • 8
    使用 pipx 安装并执行 Python 应用程序 (1)
    36
  • 9
    国产AI神器Deepseek，本地离线使用教程！
    61
  • 10
    短视频创作助手 | AI剧本生成与动画创作
    156

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    PAI Model Gallery 支持云上一键部署 DeepSeek-V3、DeepSeek-R1 系列模型