一步一步学Silverlight 2系列(18):综合实例之RSS阅读器
一步一步学Silverlight 2系列(18):综合实例之RSS阅读器
概述
Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, Ironpython,对JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。《一步一步学Silverlight 2系列》文章将从Silverlight 2基础知识、数据与通信、自定义控件、动画、图形图像等几个方面带您快速进入Silverlight 2开发
本文将综合前面十七篇讲过的界面布局、样式、控件模板、数据绑定、网络通信等几个方面,来开发一个综合实例——简易RSS阅读器。
界面布局
我们最终完成的RSS阅读器界面如下:
定义一个三行两列的Grid,分别放置顶部信息、分割线和下面的内容区:
<Grid.RowDefinitions>
<RowDefinition Height="50"></RowDefinition>
<RowDefinition Height="20"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="240"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
设计顶部输入区域,对Grid第一行做合并,并且放置一个StackPanel:
<StackPanel x:Name="Header" Orientation="Horizontal"
Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2">
<Image Source="Rss.png" Width="32" Height="32" Margin="10 0 10 0"></Image>
<Border Style="{StaticResource titleBorder}">
<TextBlock Text="基于Silverlight的RSS阅读器" Foreground="#FFFFFF"
VerticalAlignment="Center" Margin="12 0 0 0"></TextBlock>
</Border>
<WatermarkedTextBox x:Name="feedAddress" Width="300" Height="35"
FontSize="16" Margin="10 0 10 0">
<WatermarkedTextBox.Watermark>
<TextBlock Text="请输入有效的RSS地址" VerticalAlignment="Center"
Foreground="#FBA430" FontSize="16"></TextBlock>
</WatermarkedTextBox.Watermark>
</WatermarkedTextBox>
<Button x:Name="displayButton" Style="{StaticResource button}"
Content="显 示" Click="displayButton_Click"></Button>
<Button x:Name="fullScreenButton" Style="{StaticResource button}"
Content="全 屏" Click="fullScreenButton_Click"></Button>
</StackPanel>
鉴于两个按钮的风格一致,在App.xaml中定义一个button样式:
<Style x:Key="button" TargetType="Button">
<Setter Property="Width" Value="100"></Setter>
<Setter Property="Height" Value="35"></Setter>
<Setter Property="Background" Value="#FBA430"></Setter>
<Setter Property="Foreground" Value="#FBA430"></Setter>
<Setter Property="FontSize" Value="16"></Setter>
</Style>
<Style x:Key="titleBorder" TargetType="Border">
<Setter Property="CornerRadius" Value="10"></Setter>
<Setter Property="Width" Value="220"></Setter>
<Setter Property="Height" Value="40"></Setter>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0">
<GradientStop Color="#FBA430" Offset="0.0" />
<GradientStop Color="#FEF4E7" Offset="0.5" />
<GradientStop Color="#FBA430" Offset="1.0" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
定义分割线,用Rectangle来表示:
<StackPanel Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" VerticalAlignment="Center">
<Rectangle Style="{StaticResource rectangle}"/>
</StackPanel>
为了显示出渐变的样式,我们定义样式如下:
<Style x:Key="rectangle" TargetType="Rectangle">
<Setter Property="Width" Value="780"></Setter>
<Setter Property="Height" Value="5"></Setter>
<Setter Property="RadiusX" Value="3"></Setter>
<Setter Property="RadiusY" Value="3"></Setter>
<Setter Property="Fill">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0">
<GradientStop Color="#FEF4E7" Offset="0.0" />
<GradientStop Color="#FBA430" Offset="1.0" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
定义左边的列表区,用ListBox来显示,并且定义ItemTemplate:
<ListBox x:Name="PostsList" Grid.Column="0" Grid.Row="2"
Margin="10 5 5 10" SelectionChanged="PostsList_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Title.Text}"
TextWrapping="Wrap" Width="200"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
最后定义右边的详细信息区域,在StackPanel中垂直放置三个Border:
<StackPanel x:Name="Detail" Grid.Column="1" Grid.Row="2">
<Border CornerRadius="10" Background="#CDFCAE" Margin="10 5 10 10"
Width="540" Height="40">
<TextBlock Text="{Binding Title.Text}" TextWrapping="Wrap"
VerticalAlignment="Center" Foreground="Red"/>
</Border>
<Border CornerRadius="10" Background="#CDFCAE" Margin="10 5 10 10"
Width="540" Height="300">
<TextBlock Text="{Binding Summary.Text}" TextWrapping="Wrap"/>
</Border>
<Border CornerRadius="10" Background="#CDFCAE" Margin="10 5 10 10"
Width="540" Height="40">
<StackPanel Orientation="Horizontal">
<TextBlock Text="评论日期:" TextWrapping="Wrap"
Foreground="Red" VerticalAlignment="Center"/>
<TextBlock Text="{Binding PublishDate}" TextWrapping="Wrap"
Foreground="Red" VerticalAlignment="Center"/>
</StackPanel>
</Border>
</StackPanel>
界面布局到此大功告成。
实现功能
下面实现数据的获取,采用WebRequest来实现,也可以使用其他方式。
/// <summary>
/// 显示列表
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void displayButton_Click(object sender, RoutedEventArgs e)
{
Uri uri = new Uri(feedAddress.Text);
WebRequest request = (WebRequest)WebRequest.Create(uri);
request.BeginGetResponse(new AsyncCallback(responseReady), request);
} void responseReady(IAsyncResult asyncResult)
{
WebRequest request = (WebRequest)asyncResult.AsyncState;
WebResponse response = (WebResponse)request.EndGetResponse(asyncResult); XmlReader reader = XmlReader.Create(response.GetResponseStream());
SyndicationFeed feed = SyndicationFeed.Load(reader); PostsList.ItemsSource = feed.Items;
}
显示详细信息:
/// <summary>
/// 查看详细信息
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void PostsList_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
SyndicationItem item = PostsList.SelectedItem as SyndicationItem; Detail.DataContext = item;
}
实现全屏按钮的代码:
/// <summary>
/// 全屏显示
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void fullScreenButton_Click(object sender, RoutedEventArgs e)
{
Content contentObject = Application.Current.Host.Content;
contentObject.IsFullScreen = !contentObject.IsFullScreen;
}
运行效果
运行后界面如下:
输入豆瓣的最新影评Feed:
选择其中一项后,将显示出详细信息:
结束语
本文对前面十七篇内容做了一个小结,并开发出了一个简易RSS阅读器,你可以从这里下载本文示例代码。
出处:http://terrylee.cnblogs.com
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
一步一步学Silverlight 2系列(18):综合实例之RSS阅读器的更多相关文章
- 一步一步学Silverlight 2系列文章
概述 由TerryLee编写的<Silverlight 2完美征程>一书,已经上市,在该系列文章的基础上补充了大量的内容,敬请关注.官方网站:http://www.dotneteye.cn ...
- 一步一步学Silverlight 2系列(17):数据与通信之ADO.NET Data Services
概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...
- 一步一步学Silverlight 2系列(32):图形图像综合实例—“功夫之王”剧照播放
概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...
- 一步一步学Silverlight 2系列(31):图形图像综合实例—实现水中倒影效果
概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...
- 一步一步学Silverlight 2系列(30):使用Transform实现更炫的效果(下)
概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...
- 一步一步学Silverlight 2系列(29):使用Transform实现更炫的效果(上)
概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...
- 一步一步学Silverlight 2系列(28):图片处理
概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...
- 一步一步学Silverlight 2系列(27):使用Brush进行填充
概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...
- 一步一步学Silverlight 2系列(26):基本图形
概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...
随机推荐
- 安卓解析XML文件
安卓解析XML文件 主要有三种方式:DOM解析.SAX解析.PULL解析 其中: DOM解析为等XMl文件全部加载后,然后根据需要解析的内容解析出所需的内容数据. SAX解析为从XML文件中执行一行, ...
- My97DatePicker 时间控件
<td> <input type="text" id="sendDate" name="sendDate" class=& ...
- LeetCode OJ--Valid Palindrome
http://oj.leetcode.com/problems/valid-palindrome/ 判断是否为回文串 bool isPalindrome(string s) { ,j = s.leng ...
- Java中的final关键字(转)
Java中的final关键字非常重要,它可以应用于类.方法以及变量.这篇文章中我将带你看看什么是final关键字?将变量,方法和类声明为final代表了什么?使用final的好处是什么?最后也有一些使 ...
- Codeforces Round #266 (Div. 2) C. Number of Ways
You've got array a[1], a[2], ..., a[n], consisting of n integers. Count the number of ways to split ...
- 单词number 和 numeral 的区别
原文: http://blog.sina.com.cn/s/blog_72cd06360100vn7t.html be of 的用法,相当于表征特征或属性的形容词. 简单地说,“of + 名词”等于“ ...
- [Oracle] 获取运行计划的各方法总结
总的结论: 一.获取运行计划的6种方法(具体步骤已经在每一个样例的开头凝视部分说明了): 1. explain plan for获取: 2. set autotrace on . 3. stati ...
- 【LeetCode从零单排】No 114 Flatten Binary Tree to Linked List
题目 Given a binary tree, flatten it to a linked list in-place. For example,Given 1 / \ 2 5 / \ \ 3 4 ...
- INAPP登陆调用的FB接口
public function login_get (){ $this->load->helper ( 'auth' ); $redirectUrl = $this->input-& ...
- uboot1.1.6中启动流程
U-Boot启动内核的过程可以分为两个阶段,两个阶段的功能如下: (1)第一阶段的功能 Ø 硬件设备初始化 Ø 加载U-Boot第二阶段代码到RAM空间 Ø 设置好栈 Ø 跳转到第二阶段代码入口 (2 ...