一步一步学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 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阅读器，你可以从这里下载本文示例代码。

下一篇：一步一步学Silverlight 2系列（19）：如何在Silverlight中与HTML DOM交互（上）

作者： TerryLee
出处： http://terrylee.cnblogs.com 总结

以上是内存溢出为你收集整理的一步一步学Silverlight 2系列（18）：综合实例之RSS阅读器全部内容，希望文章能够帮你解决一步一步学Silverlight 2系列（18）：综合实例之RSS阅读器所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。