WEB开发网
开发学院图形图像Flash 学Silverlight 2系列(18):综合实例之RSS阅读器... 阅读

学Silverlight 2系列(18):综合实例之RSS阅读器

 2008-10-03 11:35:30 来源:WEB开发网   
核心提示:本文示例源代码或素材下载 概述Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,学Silverlight 2系列(18):综合实例之RSS阅读器,如支持框架语言Visual Basic, Visual C#, IronRuby, Ironpython

本文示例源代码或素材下载

概述

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阅读器界面如下:

学Silverlight 2系列(18):综合实例之RSS阅读器

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

<Grid.RowDefinitions>
  <RowDefinition Height="50"></RowDefinition>
  <RowDefinition Height="20"></RowDefinition>
  <RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
  <ColumnDefinition Width="240"></ColumnDefinition>
  <ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>

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

<StackPanel x:Name="Header" Orientation="Horizontal"
       Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2">
  <Image Source="Rss.png" Width="32" Height="32" Margin="10 0 10 0"></Image>
  <Border Style="{StaticResource titleBorder}">
    <TextBlock Text="基于Silverlight的RSS阅读器" Foreground="#FFFFFF"
          VerticalAlignment="Center" Margin="12 0 0 0"></TextBlock>
  </Border>
  <WatermarkedTextBox x:Name="feedAddress" Width="300" Height="35"
            FontSize="16" Margin="10 0 10 0">
    <WatermarkedTextBox.Watermark>
      <TextBlock Text="请输入有效的RSS地址" VerticalAlignment="Center"
            Foreground="#FBA430" FontSize="16"></TextBlock>
    </WatermarkedTextBox.Watermark>
  </WatermarkedTextBox>
  <Button x:Name="displayButton" Style="{StaticResource button}"
      Content="显 示" Click="displayButton_Click"></Button>
  <Button x:Name="fullScreenButton" Style="{StaticResource button}"
      Content="全 屏" Click="fullScreenButton_Click"></Button>
</StackPanel>

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

1 2 3 4 5  下一页

Tags:Silverlight 系列 综合

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接