【李会军】一步一步学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阅读器界面如下：ITPUB个人空间$v)H@-w'y)E N&Qt2i0k

(X#H%f-{^1[]0

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

<Grid.RowDefinitions>
D-oR3j
\0<RowDefinitionHeight="50"></RowDefinition>ITPUB个人空间`7i
y|/Uo6CP
<RowDefinitionHeight="20"></RowDefinition>ITPUB个人空间nGAs9O
<RowDefinitionHeight="*"></RowDefinition>
2y;h2k:~.iU#|0</Grid.RowDefinitions>
U/`:z	}D4^4Oe5r0<Grid.ColumnDefinitions>ITPUB个人空间
Xb!B~:P7s
}h&R
<ColumnDefinitionWidth="240"></ColumnDefinition>ITPUB个人空间"D~y.a8pc
<ColumnDefinitionWidth="*"></ColumnDefinition>ITPUB个人空间niU8VMg:[ {:q
</Grid.ColumnDefinitions>

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

<StackPanelx:Name="Header"Orientation="Horizontal"
h#M9yX5oi?x:ci0Grid.Row="0"Grid.Column="0"Grid.ColumnSpan="2">ITPUB个人空间'^2re
~&EE1\
<ImageSource="Rss.png"Width="32"Height="32"Margin="10 0 10 0"></Image>ITPUB个人空间{#MUrEZwo
<BorderStyle="{StaticResourcetitleBorder}">
0P&ZU&B+EF x0<TextBlockText="基于Silverlight的RSS阅读器"Foreground="#FFFFFF"
(Si
y*N'\t0VerticalAlignment="Center"Margin="12 0 0 0"></TextBlock>
5s*?{L/o7u7B1G0</Border>ITPUB个人空间1X8Yf~&sm
<WatermarkedTextBoxx:Name="feedAddress"Width="300"Height="35"
s}j	}"O$c0FontSize="16"Margin="10 0 10 0">
0a#m5NN Gcb0<WatermarkedTextBox.Watermark>
kp
MKe)|G/P0<TextBlockText="请输入有效的RSS地址"VerticalAlignment="Center"
,@pcg	rb_0Foreground="#FBA430"FontSize="16"></TextBlock>ITPUB个人空间
tNO8TZcou
</WatermarkedTextBox.Watermark>
3_p8Di'v+O*G5A7a ?0</WatermarkedTextBox>
BV
`Tzq
]0<Buttonx:Name="displayButton"Style="{StaticResourcebutton}"ITPUB个人空间z kp
VT!e1N
Content="显 示"Click="displayButton_Click"></Button>

[C$}4h
[|5o)hP4rsE0<Buttonx:Name="fullScreenButton"Style="{StaticResourcebutton}"ITPUB个人空间
m8a4p
`a]!V-\VX
Content="全 屏"Click="fullScreenButton_Click"></Button>
pS"@J2n |9XT7J0</StackPanel>

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

<Style.x:Key="button"TargetType="Button">ITPUB个人空间g/X/u7Kp|9[w4lOW
<SetterProperty="Width"Value="100"></Setter>
/XF
I2bkG;|
x
{t%m0<SetterProperty="Height"Value="35"></Setter>ITPUB个人空间|;Yf WL$o+R3w$X
<SetterProperty="Background"Value="#FBA430"></Setter>
K^m8fc4P5HB0<SetterProperty="Foreground"Value="#FBA430"></Setter>
9HSP!H4j%DS0<SetterProperty="FontSize"Value="16"></Setter>ITPUB个人空间^)ASWc(tA#h
</Style>
K
O!\6qP)O0<Style.x:Key="titleBorder"TargetType="Border">
y*e%IX0K	^xn}.wcm8t0<SetterProperty="CornerRadius"Value="10"></Setter>
KD?:gsh	f?1l0<SetterProperty="Width"Value="220"></Setter>
.y;o4^wOO9F0<SetterProperty="Height"Value="40"></Setter>
U#?K
Op)yen0H+l0<SetterProperty="Background">ITPUB个人空间wQ:AH4P	a/I
<Setter.Value>
,eKPO
s0<LinearGradientBrushStartPoint="0,0">ITPUB个人空间2A_2c LWM
<GradientStopColor="#FBA430"Offset="0.0" />
/o$\
a
C"rE2x9G0<GradientStopColor="#FEF4E7"Offset="0.5" />
)hLH\UKt
p0<GradientStopColor="#FBA430"Offset="1.0" />ITPUB个人空间"OnoZV
</LinearGradientBrush>ITPUB个人空间iiwj1lM)B
</Setter.Value>
	J.S'y$tA8AH5F_G2R0</Setter>ITPUB个人空间0_%A
h"q4}
</Style>

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

<StackPanelGrid.Row="1"Grid.Column="0"Grid.ColumnSpan="2"VerticalAlignment="Center">
 v5Z
N3gONA0<RectangleStyle="{StaticResourcerectangle}"/>ITPUB个人空间gX"Xk,R\
</StackPanel>

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

<Style.x:Key="rectangle"TargetType="Rectangle">ITPUB个人空间f%ay
i2n	y~;hn8t
<SetterProperty="Width"Value="780"></Setter>ITPUB个人空间%N&qXQ{"d&s;Q
<SetterProperty="Height"Value="5"></Setter>
3g+^"g.VL? ze0jk0W0<SetterProperty="RadiusX"Value="3"></Setter>
\T*s6kg\9e-t;}0<SetterProperty="RadiusY"Value="3"></Setter>ITPUB个人空间2ta!V1|#@ZuYC
<SetterProperty="Fill">
at&c+Wp$Rl0<Setter.Value>ITPUB个人空间$H*d+S1PM/tO-m
<LinearGradientBrushStartPoint="0,0">
ibV{&d0<GradientStopColor="#FEF4E7"Offset="0.0" />
|#m3m2s;L1?~$DS&rj0<GradientStopColor="#FBA430"Offset="1.0" />
6o)uQ;H1P0</LinearGradientBrush>
r3s#GOu0</Setter.Value>ITPUB个人空间!q/n0h#u
KGyP(x
</Setter>ITPUB个人空间0pr4R!l9A3z
</Style>

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

<ListBoxx:Name="PostsList"Grid.Column="0"Grid.Row="2"ITPUB个人空间?DP_~-v
Margin="10 5 5 10"SelectionChanged="PostsList_SelectionChanged">ITPUB个人空间![V/vOL1U6@hi({
<ListBox.ItemTemplate>
g&]O4G0U-lD5yf0<DataTemplate>
+U~/k;Bfm8PL0<TextBlockText="{BindingTitle.Text}"
!@
V	U*QTGcYS0TextWrapping="Wrap"Width="200"/>
.y3w:G;E.y_7l7mf0</DataTemplate>
P"gG
g|E J8O^y3h0</ListBox.ItemTemplate>ITPUB个人空间p$xlv+ED.B
</ListBox>

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

<StackPanelx:Name="Detail"Grid.Column="1"Grid.Row="2">ITPUB个人空间5Et!v1d	nO,_[u
<BorderCornerRadius="10"Background="#CDFCAE"Margin="10 5 10 10"ITPUB个人空间O nID$c
xB
e
Width="540"Height="40">ITPUB个人空间LV-]j
cR	k
<TextBlockText="{BindingTitle.Text}"TextWrapping="Wrap"
c"M;\p:{%gX0VerticalAlignment="Center"Foreground="Red"/>
*veP)Jk
F"V-ld0</Border>ITPUB个人空间4k+DE(\;B;smJY
<BorderCornerRadius="10"Background="#CDFCAE"Margin="10 5 10 10"
F'yZ.rs!k0Width="540"Height="300">ITPUB个人空间?Z	f7DLD+f
<TextBlockText="{BindingSummary.Text}"TextWrapping="Wrap"/>ITPUB个人空间.r,NMAkI
S(u&RH3[
</Border>ITPUB个人空间
?(x1LZtx)`]v
<BorderCornerRadius="10"Background="#CDFCAE"Margin="10 5 10 10"ITPUB个人空间[X+[G#D3fH$s
u
Width="540"Height="40">ITPUB个人空间#F$}1b7KL!u9c`;V
<StackPanelOrientation="Horizontal">
:}3[dO?0<TextBlockText="评论日期："TextWrapping="Wrap"
$A0cF
}*pe'K0Foreground="Red"VerticalAlignment="Center"/>
VydN#R-b0<TextBlockText="{BindingPublishDate}"TextWrapping="Wrap"
.f4Zjn`!?0Foreground="Red"VerticalAlignment="Center"/>
Q9O
di\SK0</StackPanel>
zw(}_a+W+V0</Border>ITPUB个人空间Zvi'fsCi
</StackPanel>

界面布局到此大功告成。

实现功能

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

/// <summary>ITPUB个人空间
]	I;l0i[/ki
///显示列表ITPUB个人空间	wn8f"`0u:~u@~)J8H'd
/// </summary>ITPUB个人空间-r.wj
}A
/// <param name="sender"></param>ITPUB个人空间X7TM+?(y5V
zF-Vc2v8d
/// <param name="e"></param>ITPUB个人空间5?Tk1a%G!|)i
private voiddisplayButton_Click(objectsender,RoutedEventArgse)ITPUB个人空间F"w(Ey7jG(z#M6s5XB}
{
+p!T&Ad$`*wY:C3E0Uriuri =newUri(feedAddress.Text);ITPUB个人空间!l
M.XB.h
WebRequestrequest = (WebRequest)WebRequest.Create(uri);ITPUB个人空间u_iS+A7|
request.BeginGetResponse(newAsyncCallback(responseReady), request);ITPUB个人空间3J1C
`HJt?t#nM
}
-xEPN!Sq
IA&Up X j0
8B8Y{-nS%D"d0voidresponseReady(IAsyncResultasyncResult)ITPUB个人空间G"h
q.H^
{ITPUB个人空间)cV fw!|
\0v,b
WebRequestrequest = (WebRequest)asyncResult.AsyncState;ITPUB个人空间 ?(G1y7W8n3z#i
WebResponseresponse = (WebResponse)request.EndGetResponse(asyncResult);
+j&Rs)J	c"A~~
n0
g m [7x(]-Q,ti%V0XmlReaderreader =XmlReader.Create(response.GetResponseStream());ITPUB个人空间4[0|a_w1{{?,T
SyndicationFeedfeed =SyndicationFeed.Load(reader);
N"dF$Zn |+w0
E#VTn fTn0PostsList.ItemsSource = feed.Items;ITPUB个人空间$jj6clcJ|f
}

显示详细信息：

/// <summary>
"}4IZ+hvX0///查看详细信息ITPUB个人空间1LM}#{
]zX}8Cc
S)J
/// </summary>ITPUB个人空间/GYt;W0v"w(`0N5DOX
/// <param name="sender"></param>
$G:V#y*O^I0hKt0/// <param name="e"></param>
W%f^1oez
onz0a0private voidPostsList_SelectionChanged(objectsender,SelectionChangedEventArgse)ITPUB个人空间Qivh$s	y@
{ITPUB个人空间0ar6xffw
SyndicationItemitem = PostsList.SelectedItemasSyndicationItem;
R5Wb8N|2x`0
+?sX_wn1L0Detail.DataContext = item;
	^	^q&VpC%w6cA;w0}

实现全屏按钮的代码：

/// <summary>ITPUB个人空间o*_a
QL
///全屏显示
]"wF[x0/// </summary>ITPUB个人空间``/]MS/?&SsU#V
/// <param name="sender"></param>

El,S+S'd-y5N(au0/// <param name="e"></param>
Dx6fXa:?P
IvP0private voidfullScreenButton_Click(objectsender,RoutedEventArgse)ITPUB个人空间 SP$AK'Q&AT
{ITPUB个人空间{.qC$\bc#d!Z
ContentcontentObject =Application.Current.Host.Content;
rq.b,o)gT+J@${0contentObject.IsFullScreen = !contentObject.IsFullScreen;ITPUB个人空间	[
tm3Pq4yy
}

运行效果

运行后界面如下：

ITPUB个人空间rkvnD:h8_(h,mu
输入豆瓣的最新影评Feed：
/d
t:wGqv0选择其中一项后，将显示出详细信息：
v.g8K!e3[0
B"W5r$fD]t!hSgZnB/[0

结束语

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

ITPUB个人空间i6HfxMFlRh