【李会军】一步一步学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阅读器界面如下：
F"H#jjj,_C n)Xr0ITPUB个人空间A2yGpDY"wX@:Ay

定义一个三行两列的Grid，分别放置顶部信息、分割线和下面的内容区：

<Grid.RowDefinitions>ITPUB个人空间N N*z`\%S
<RowDefinitionHeight="50"></RowDefinition>
@
gq
LmNlr6p0<RowDefinitionHeight="20"></RowDefinition>ITPUB个人空间0|(z	E@^8xVk3w
<RowDefinitionHeight="*"></RowDefinition>
~ `o7|(o+B:\ |
s0</Grid.RowDefinitions>
1pc)nN4g0<Grid.ColumnDefinitions>
,U!d%`*x0E N0<ColumnDefinitionWidth="240"></ColumnDefinition>ITPUB个人空间X|h,H%Q.N1`V3`e,j
<ColumnDefinitionWidth="*"></ColumnDefinition>ITPUB个人空间3a"Q9A	S\:u
</Grid.ColumnDefinitions>

设计顶部输入区域，对Grid第一行做合并，并且放置一个StackPanel：

<StackPanelx:Name="Header"Orientation="Horizontal"ITPUB个人空间d0ApB.O Nh
Grid.Row="0"Grid.Column="0"Grid.ColumnSpan="2">
K2o+MA.TJ0<ImageSource="Rss.png"Width="32"Height="32"Margin="10 0 10 0"></Image>ITPUB个人空间t	~{FDQ~t@
<BorderStyle="{StaticResourcetitleBorder}">ITPUB个人空间0?:v[,@/D
<TextBlockText="基于Silverlight的RSS阅读器"Foreground="#FFFFFF"ITPUB个人空间Ag"a*J+I^f(Z
VerticalAlignment="Center"Margin="12 0 0 0"></TextBlock>
Q`/V6a.L
K)p'S0</Border>ITPUB个人空间#D*CdX0\	SM
<WatermarkedTextBoxx:Name="feedAddress"Width="300"Height="35"ITPUB个人空间5d&bt"M8H\'S
j\
FontSize="16"Margin="10 0 10 0">ITPUB个人空间5?,`IE^-{q{
<WatermarkedTextBox.Watermark>ITPUB个人空间#p!cpg0t'Q;oU
<TextBlockText="请输入有效的RSS地址"VerticalAlignment="Center"ITPUB个人空间1P/L;W*M ibG
Foreground="#FBA430"FontSize="16"></TextBlock>ITPUB个人空间Tq$q7f|0_"A
</WatermarkedTextBox.Watermark>
4l4Gt2k3nI0</WatermarkedTextBox>
;X2pVHN0<Buttonx:Name="displayButton"Style="{StaticResourcebutton}"
2RSY)p)wS
G0Content="显 示"Click="displayButton_Click"></Button>ITPUB个人空间KOOD(c
<Buttonx:Name="fullScreenButton"Style="{StaticResourcebutton}"ITPUB个人空间Cx.dv,B9|zss
Content="全 屏"Click="fullScreenButton_Click"></Button>
3xY(OG0G0m?Y0</StackPanel>

鉴于两个按钮的风格一致，在App.xaml中定义一个button样式：

<Style.x:Key="button"TargetType="Button">ITPUB个人空间n0MQ-i"I
<SetterProperty="Width"Value="100"></Setter>
NqV1f,Iu/{)Q0<SetterProperty="Height"Value="35"></Setter>
4z1Hm
q4Fqv0<SetterProperty="Background"Value="#FBA430"></Setter>ITPUB个人空间n7[,e{[!V
<SetterProperty="Foreground"Value="#FBA430"></Setter>ITPUB个人空间mk
dy8\a"P0S.T
B
<SetterProperty="FontSize"Value="16"></Setter>ITPUB个人空间;~1^2d?0T(ua"f+L
</Style>ITPUB个人空间m"x(C*?S
<Style.x:Key="titleBorder"TargetType="Border">ITPUB个人空间GJGfz2K8P
<SetterProperty="CornerRadius"Value="10"></Setter>
1`0pWA#Nwd-w0<SetterProperty="Width"Value="220"></Setter>
	D6]{~)aK5z0<SetterProperty="Height"Value="40"></Setter>ITPUB个人空间!m(nRj2vfi
<SetterProperty="Background">ITPUB个人空间 X	H%}xH2vZ
<Setter.Value>
 _P%|+s5u+om0<LinearGradientBrushStartPoint="0,0">

I~y5Q.b_QT:L0<GradientStopColor="#FBA430"Offset="0.0" />
y+ip
L!t]e"`3L lU%R0<GradientStopColor="#FEF4E7"Offset="0.5" />
~gG[&i2`9B|7l0<GradientStopColor="#FBA430"Offset="1.0" />
GbEdw9l,w0l0</LinearGradientBrush>ITPUB个人空间
TJ0b	^s8Q1KP'C,QO
</Setter.Value>ITPUB个人空间HF$y;[/aP%B	@
</Setter>
 we7w8X
r*X'p8f0</Style>

定义分割线，用Rectangle来表示：

<StackPanelGrid.Row="1"Grid.Column="0"Grid.ColumnSpan="2"VerticalAlignment="Center">ITPUB个人空间2K
{ ^[,Ga
r4wu
<RectangleStyle="{StaticResourcerectangle}"/>ITPUB个人空间)t1e"A.b#VR
</StackPanel>

为了显示出渐变的样式，我们定义样式如下：

<Style.x:Key="rectangle"TargetType="Rectangle">ITPUB个人空间Y9hX2JA
<SetterProperty="Width"Value="780"></Setter>
~,^|N*m;h0<SetterProperty="Height"Value="5"></Setter>
.T,j]\-_g]F0<SetterProperty="RadiusX"Value="3"></Setter>
Q9BE Ss)H$XW0f0<SetterProperty="RadiusY"Value="3"></Setter>
M&k }c+t;W0<SetterProperty="Fill">
,K5|
Gq!wtc0<Setter.Value>ITPUB个人空间.[pSp)hzz'Za
<LinearGradientBrushStartPoint="0,0">
J{,T#^a[0<GradientStopColor="#FEF4E7"Offset="0.0" />
7rf,g;V-c@p'G~j4I#ee1[0<GradientStopColor="#FBA430"Offset="1.0" />
PMJp
b0</LinearGradientBrush>

a"FjBU.?
RY!G0</Setter.Value>
#G$?@#t,iQXd0</Setter>
nl#y
y@Z%A)O0</Style>

定义左边的列表区，用ListBox来显示，并且定义ItemTemplate：

<ListBoxx:Name="PostsList"Grid.Column="0"Grid.Row="2"
5a4SM
usW^
j0Margin="10 5 5 10"SelectionChanged="PostsList_SelectionChanged">
'x)fA$MXG"L+P	j0<ListBox.ItemTemplate>
	k&x)K&b	l;_0<DataTemplate>ITPUB个人空间|{.})re
y;d
<TextBlockText="{BindingTitle.Text}"
.\ky$q1RX%X0TextWrapping="Wrap"Width="200"/>ITPUB个人空间
|:C6Ovb;O'Y]
</DataTemplate>ITPUB个人空间J;eO	x.bEJW
</ListBox.ItemTemplate>
x2Jc"j;A*h5u
g1zAy0</ListBox>

最后定义右边的详细信息区域，在StackPanel中垂直放置三个Border：

<StackPanelx:Name="Detail"Grid.Column="1"Grid.Row="2">
l(S(Dm"bZ!P}0<BorderCornerRadius="10"Background="#CDFCAE"Margin="10 5 10 10"ITPUB个人空间!?5q'yv#A4b
Width="540"Height="40">ITPUB个人空间k0_lY*W!AG
<TextBlockText="{BindingTitle.Text}"TextWrapping="Wrap"ITPUB个人空间#Tc#gL"MjI
JS;zY
VerticalAlignment="Center"Foreground="Red"/>ITPUB个人空间8t3f0c,U+r
wzr
</Border>
oZg!u7i:Sl,g
H0<BorderCornerRadius="10"Background="#CDFCAE"Margin="10 5 10 10"
9PA0r2AB0Width="540"Height="300">
R+n9Y2_VL.V
]0<TextBlockText="{BindingSummary.Text}"TextWrapping="Wrap"/>ITPUB个人空间s-}N;p~0D
</Border>
2|;X/qs6x?2f{"l0<BorderCornerRadius="10"Background="#CDFCAE"Margin="10 5 10 10"
N"e1u
]Ml]0Width="540"Height="40">ITPUB个人空间+t+XfS.Q6f
<StackPanelOrientation="Horizontal">
&Iw^?`_dVq5C
j0<TextBlockText="评论日期："TextWrapping="Wrap"
6Ws's1yQ1}0Foreground="Red"VerticalAlignment="Center"/>
Ip?2{;j*y0<TextBlockText="{BindingPublishDate}"TextWrapping="Wrap"
9Dn}7bG,b {0Foreground="Red"VerticalAlignment="Center"/>
\0`-`R~&|0</StackPanel>ITPUB个人空间$nf9F/t](A
</Border>ITPUB个人空间h6OcD([
A
</StackPanel>

界面布局到此大功告成。

实现功能

下面实现数据的获取，采用WebRequest来实现，也可以使用其他方式。

/// <summary>ITPUB个人空间!w2@(b8g,Gl
///显示列表ITPUB个人空间
a#j_k#y
D!l8qb3c|
/// </summary>
%s+BLq#g0n!e0/// <param name="sender"></param>ITPUB个人空间*F,?w*B	S/l.^
/// <param name="e"></param>ITPUB个人空间\ddf%V@H
private voiddisplayButton_Click(objectsender,RoutedEventArgse)ITPUB个人空间G2~w*D
p_+K	z
{ITPUB个人空间dN0a,Q/wp9P
Uriuri =newUri(feedAddress.Text);ITPUB个人空间av+k\)Y	nK
WebRequestrequest = (WebRequest)WebRequest.Create(uri);ITPUB个人空间 b}0[:qWG'UW"{ J
request.BeginGetResponse(newAsyncCallback(responseReady), request);
h"J*hE J0eH0}
1s_ q9[/Y0ITPUB个人空间z)~)e?-Nt4y)rE
voidresponseReady(IAsyncResultasyncResult)
E}9WRUX:p0{
"uO	A)@K0WebRequestrequest = (WebRequest)asyncResult.AsyncState;ITPUB个人空间2F6a"p+KZ$YH6S}:w
WebResponseresponse = (WebResponse)request.EndGetResponse(asyncResult);ITPUB个人空间a"C6^:{s"NsvN
ITPUB个人空间m1P"EMm?1p
XmlReaderreader =XmlReader.Create(response.GetResponseStream());ITPUB个人空间gqi(H&Ul$L0`
SyndicationFeedfeed =SyndicationFeed.Load(reader);ITPUB个人空间P/K&saO y6K~0I
ITPUB个人空间"yg$|E+I;H
T
_d
PostsList.ItemsSource = feed.Items;
K:AMIs$U.\Ty0}

显示详细信息：

/// <summary>ITPUB个人空间"AWh	Tt
///查看详细信息
SDT#jjSi(wVU-C0/// </summary>
xPLDKB6G0/// <param name="sender"></param>ITPUB个人空间1dUV0ZSu(O:W
/// <param name="e"></param>ITPUB个人空间d(N0zU&[HH"T1@g
private voidPostsList_SelectionChanged(objectsender,SelectionChangedEventArgse)
X/?4X!p1_w0{
c/JL)s)MX5G0SyndicationItemitem = PostsList.SelectedItemasSyndicationItem;
0n5b,{;rx
cT0ITPUB个人空间+?'TV^?9Z
Detail.DataContext = item;ITPUB个人空间'H6R.Za
O|R	m"L
}

实现全屏按钮的代码：

/// <summary>
le2~3~:K0///全屏显示ITPUB个人空间m/}#T`VC\F
/// </summary>ITPUB个人空间2NWS+Y
T
p|4CE~
/// <param name="sender"></param>
V9{n!WG)VC]]	S
|/h0/// <param name="e"></param>
;R,~?-zgy|0private voidfullScreenButton_Click(objectsender,RoutedEventArgse)ITPUB个人空间C4Ixh"Xy}'n
{ITPUB个人空间X:i:e
{[$I
hV
ContentcontentObject =Application.Current.Host.Content;ITPUB个人空间o3a+@!];[
A_
contentObject.IsFullScreen = !contentObject.IsFullScreen;
`5z'@.D!Lc'U0}

运行效果

运行后界面如下：

ITPUB个人空间J9y8CE&e,a
输入豆瓣的最新影评Feed：ITPUB个人空间NE4S-i:X
选择其中一项后，将显示出详细信息：
+RG!P[A%A"vNu0ITPUB个人空间/P3Ou*i2[dlH'r+c

结束语

本文对前面十七篇内容做了一个小结，并开发出了一个简易RSS阅读器，你可以从这里下载本文示例代码。

k9w] KL\0