.NEt专家博客！
【李会军】一步一步学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>
<RowDefinitionHeight="50"></RowDefinition>
<RowDefinitionHeight="20"></RowDefinition>
<RowDefinitionHeight="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinitionWidth="240"></ColumnDefinition>
<ColumnDefinitionWidth="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
设计顶部输入区域，对Grid第一行做合并，并且放置一个StackPanel：
<StackPanelx:Name="Header"Orientation="Horizontal"
Grid.Row="0"Grid.Column="0"Grid.ColumnSpan="2">
<ImageSource="Rss.png"Width="32"Height="32"Margin="10 0 10 0"></Image>
<BorderStyle="{StaticResourcetitleBorder}">
<TextBlockText="基于Silverlight的RSS阅读器"Foreground="#FFFFFF"
VerticalAlignment="Center"Margin="12 0 0 0"></TextBlock>
</Border>
<WatermarkedTextBoxx:Name="feedAddress"Width="300"Height="35"
FontSize="16"Margin="10 0 10 0">
<WatermarkedTextBox.Watermark>
<TextBlockText="请输入有效的RSS地址"VerticalAlignment="Center"
Foreground="#FBA430"FontSize="16"></TextBlock>
</WatermarkedTextBox.Watermark>
</WatermarkedTextBox>
<Buttonx:Name="displayButton"Style="{StaticResourcebutton}"
Content="显 示"Click="displayButton_Click"></Button>
<Buttonx:Name="fullScreenButton"Style="{StaticResourcebutton}"
Content="全 屏"Click="fullScreenButton_Click"></Button>
</StackPanel>
鉴于两个按钮的风格一致，在App.xaml中定义一个button样式：
<Style.x:Key="button"TargetType="Button">定义分割线，用Rectangle来表示：
<SetterProperty="Width"Value="100"></Setter>
<SetterProperty="Height"Value="35"></Setter>
<SetterProperty="Background"Value="#FBA430"></Setter>
<SetterProperty="Foreground"Value="#FBA430"></Setter>
<SetterProperty="FontSize"Value="16"></Setter>
</Style>
<Style.x:Key="titleBorder"TargetType="Border">
<SetterProperty="CornerRadius"Value="10"></Setter>
<SetterProperty="Width"Value="220"></Setter>
<SetterProperty="Height"Value="40"></Setter>
<SetterProperty="Background">
<Setter.Value>
<LinearGradientBrushStartPoint="0,0">
<GradientStopColor="#FBA430"Offset="0.0" />
<GradientStopColor="#FEF4E7"Offset="0.5" />
<GradientStopColor="#FBA430"Offset="1.0" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
<StackPanelGrid.Row="1"Grid.Column="0"Grid.ColumnSpan="2"VerticalAlignment="Center">
<RectangleStyle="{StaticResourcerectangle}"/>
</StackPanel>
为了显示出渐变的样式，我们定义样式如下：
<Style.x:Key="rectangle"TargetType="Rectangle">定义左边的列表区，用ListBox来显示，并且定义ItemTemplate：
<SetterProperty="Width"Value="780"></Setter>
<SetterProperty="Height"Value="5"></Setter>
<SetterProperty="RadiusX"Value="3"></Setter>
<SetterProperty="RadiusY"Value="3"></Setter>
<SetterProperty="Fill">
<Setter.Value>
<LinearGradientBrushStartPoint="0,0">
<GradientStopColor="#FEF4E7"Offset="0.0" />
<GradientStopColor="#FBA430"Offset="1.0" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
<ListBoxx:Name="PostsList"Grid.Column="0"Grid.Row="2"
Margin="10 5 5 10"SelectionChanged="PostsList_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlockText="{BindingTitle.Text}"
TextWrapping="Wrap"Width="200"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
最后定义右边的详细信息区域，在StackPanel中垂直放置三个Border：
<StackPanelx:Name="Detail"Grid.Column="1"Grid.Row="2">
<BorderCornerRadius="10"Background="#CDFCAE"Margin="10 5 10 10"
Width="540"Height="40">
<TextBlockText="{BindingTitle.Text}"TextWrapping="Wrap"
VerticalAlignment="Center"Foreground="Red"/>
</Border>
<BorderCornerRadius="10"Background="#CDFCAE"Margin="10 5 10 10"
Width="540"Height="300">
<TextBlockText="{BindingSummary.Text}"TextWrapping="Wrap"/>
</Border>
<BorderCornerRadius="10"Background="#CDFCAE"Margin="10 5 10 10"
Width="540"Height="40">
<StackPanelOrientation="Horizontal">
<TextBlockText="评论日期："TextWrapping="Wrap"
Foreground="Red"VerticalAlignment="Center"/>
<TextBlockText="{BindingPublishDate}"TextWrapping="Wrap"
Foreground="Red"VerticalAlignment="Center"/>
</StackPanel>
</Border>
</StackPanel>
界面布局到此大功告成。
实现功能
下面实现数据的获取，采用WebRequest来实现，也可以使用其他方式。
/// <summary>
///显示列表
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private voiddisplayButton_Click(objectsender,RoutedEventArgse)
{
Uriuri =newUri(feedAddress.Text);
WebRequestrequest = (WebRequest)WebRequest.Create(uri);
request.BeginGetResponse(newAsyncCallback(responseReady), request);
}
voidresponseReady(IAsyncResultasyncResult)
{
WebRequestrequest = (WebRequest)asyncResult.AsyncState;
WebResponseresponse = (WebResponse)request.EndGetResponse(asyncResult);
XmlReaderreader =XmlReader.Create(response.GetResponseStream());
SyndicationFeedfeed =SyndicationFeed.Load(reader);
PostsList.ItemsSource = feed.Items;
}
显示详细信息：
/// <summary>
///查看详细信息
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private voidPostsList_SelectionChanged(objectsender,SelectionChangedEventArgse)
{
SyndicationItemitem = PostsList.SelectedItemasSyndicationItem;
Detail.DataContext = item;
}
实现全屏按钮的代码：
/// <summary>
///全屏显示
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private voidfullScreenButton_Click(objectsender,RoutedEventArgse)
{
ContentcontentObject =Application.Current.Host.Content;
contentObject.IsFullScreen = !contentObject.IsFullScreen;
}
运行效果
运行后界面如下：
输入豆瓣的最新影评Feed：
选择其中一项后，将显示出详细信息：
结束语
本文对前面十七篇内容做了一个小结，并开发出了一个简易RSS阅读器，你可以从这里下载本文示例代码。
导入论坛 引用链接 收藏 分享给好友 推荐到圈子 管理 举报
TAG:
标题搜索
日历
|
|||||||||
| 日 | 一 | 二 | 三 | 四 | 五 | 六 | |||
| 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 | ||||
我的存档
数据统计
- 访问量: 189192
- 日志数: 2596
- 影音数: 7
- 文件数: 1
- 建立时间: 2008-01-04
- 更新时间: 2009-07-03
