.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阅读器界面如下:ITPUB个人空间$v)H@-w'y)E N&Qt2i0k
(X#H%f-{^1[]0
定义一个三行两列的Grid,分别放置顶部信息、分割线和下面的内容区:
<Grid.RowDefinitions>
D-oR3j\0<RowDefinitionHeight="50"></RowDefinition>ITPUB个人空间`7iy|/Uo6CP
<RowDefinitionHeight="20"></RowDefinition>ITPUB个人空间nGAs9O
<RowDefinitionHeight="*"></RowDefinition>
2y;h2k:~.iU#|0</Grid.RowDefinitions>
U/`:z }D4^4O e5r0<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#M9yX5oi?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_p8Di'v+O*G5A7a ?0</WatermarkedTextBox>
BV`Tzq ]0<Buttonx:Name="displayButton"Style="{StaticResourcebutton}"ITPUB个人空间z kp V T!e1N
Content="显 示"Click="displayButton_Click"></Button>
[C$}4h[|5o)hP4r sE0<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定义分割线,用Rectangle来表示:
<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个人空间^)ASW c(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>
,eKPOs0<LinearGradientBrushStartPoint="0,0">ITPUB个人空间2A_2c LWM
<GradientStopColor="#FBA430"Offset="0.0" />
/o$\ aC"rE2x9G0<GradientStopColor="#FEF4E7"Offset="0.5" />
)hLH\UKtp0<GradientStopColor="#FBA430"Offset="1.0" />ITPUB个人空间"OnoZV
</LinearGradientBrush>ITPUB个人空间iiwj1lM)B
</Setter.Value>
J.S'y$tA8AH5F_G2R0</Setter>ITPUB个人空间0_%Ah"q4}
</Style>
<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&q