.NEt专家博客!

【李会军】一步一步学Silverlight 2系列(18):综合实例之RSS阅读器

上一篇 / 下一篇  2008-04-11 20:25:30

概述

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 L m 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 G0
Content="显 示"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 q4Fq v0<
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(u a"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 j2v fi
<
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+ipL!t]e"`3L lU%R0<
GradientStopColor="#FEF4E7"Offset="0.5" />
~gG[&i2`9B|7l0<
GradientStopColor="#FBA430"Offset="1.0" />
G bEdw9l,w0l0</
LinearGradientBrush>ITPUB个人空间 TJ0b ^s8Q1KP'C,QO
</
Setter.Value>ITPUB个人空间HF$y;[/aP%B @
</
Setter>
we7w8Xr*X'p8f0</
Style>
定义分割线,用Rectangle来表示:
<StackPanelGrid.Row="1"Grid.Column="0"Grid.ColumnSpan="2"VerticalAlignment="Center">ITPUB个人空间2K{ ^[,Gar4wu
<
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.? R Y!G0</
Setter.Value>
#G$?@#t,iQXd0</
Setter>
nl#yy@Z%A)O0</
Style>
定义左边的列表区,用ListBox来显示,并且定义ItemTemplate:
<ListBoxx:Name="PostsList"Grid.Column="0"Grid.Row="2"
5a4SMusW^j0
Margin="10 5 5 10"SelectionChanged="PostsList_SelectionChanged">
'x)fA$MXG"L+P j0<
ListBox.ItemTemplate>
k&x)K&b l;_0<
DataTemplate>ITPUB个人空间|{.})r e y;d
<
TextBlockText="{BindingTitle.Text}"
.\ky$q1RX%X0
TextWrapping="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'y v#A4b
Width="540"Height="40">ITPUB个人空间k0_lY*W!AG
<
TextBlockText="{BindingTitle.Text}"TextWrapping="Wrap"ITPUB个人空间#Tc#gL"M jIJ S;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"
9PA0r2AB0
Width="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]0
Width="540"Height="40">ITPUB个人空间+t+XfS.Q6f
<
StackPanelOrientation="Horizontal">
&Iw^?`_dVq5Cj0<
TextBlockText="评论日期:"TextWrapping="Wrap"
6Ws's1yQ1}0
Foreground="Red"VerticalAlignment="Center"/>
I p?2{;j*y0<
TextBlockText="{BindingPublishDate}"TextWrapping="Wrap"
9Dn}7bG,b {0
Foreground="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个人空间a v+k\)Y nK
WebRequestrequest = (WebRequest)WebRequest.Create(uri);ITPUB个人空间 b}0[:qW G'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"E Mm?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>
xPLD KB6G0/// <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)V C]] S |/h0/// <param name="e"></param>
;R,~ ?-zgy|0
private voidfullScreenButton_Click(objectsender,RoutedEventArgse)ITPUB个人空间C4I xh"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阅读器,你可以从这里下载本文示例代码。

作者:TerryLeeITPUB个人空间lP MB S#V"g
出处:http://terrylee.cnblogs.com

k9w] KL\0

TAG:

 

评分:0

我来说两句

显示全部

:loveliness: :handshake :victory: :funk: :time: :kiss: :call: :hug: :lol :'( :Q :L ;P :$ :P :o :@ :D :( :)

日历

« 2012-02-10  
   1234
567891011
12131415161718
19202122232425
26272829   

数据统计

  • 访问量: 665817
  • 日志数: 3733
  • 影音数: 7
  • 文件数: 1
  • 建立时间: 2008-01-04
  • 更新时间: 2010-12-31

RSS订阅

Open Toolbar