一步一步学Silverlight 2系列(18):综合实例之RSS阅读器-阿里云开发者社区

开发者社区> 技术小甜> 正文

一步一步学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阅读器界面如下:
定义一个三行两列的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样式:
<Style x:Key="button" TargetType="Button">
    <Setter Property="Width" Value="100"></Setter>
    <Setter Property="Height" Value="35"></Setter>
    <Setter Property="Background" Value="#FBA430"></Setter>
    <Setter Property="Foreground" Value="#FBA430"></Setter>
    <Setter Property="FontSize" Value="16"></Setter>
</Style>
<Style x:Key="titleBorder" TargetType="Border">
    <Setter Property="CornerRadius" Value="10"></Setter>
    <Setter Property="Width" Value="220"></Setter>
    <Setter Property="Height" Value="40"></Setter>
    <Setter Property="Background">
        <Setter.Value>
            <LinearGradientBrush StartPoint="0,0">
                <GradientStop Color="#FBA430" Offset="0.0" />
                <GradientStop Color="#FEF4E7" Offset="0.5" />
                <GradientStop Color="#FBA430" Offset="1.0" />
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
</Style>
定义分割线,用Rectangle来表示:
<StackPanel Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" VerticalAlignment="Center">
    <Rectangle Style="{StaticResource rectangle}"/>
</StackPanel>
为了显示出渐变的样式,我们定义样式如下:
<Style x:Key="rectangle" TargetType="Rectangle">
    <Setter Property="Width" Value="780"></Setter>
    <Setter Property="Height" Value="5"></Setter>
    <Setter Property="RadiusX" Value="3"></Setter>
    <Setter Property="RadiusY" Value="3"></Setter>
    <Setter Property="Fill">
        <Setter.Value>
            <LinearGradientBrush StartPoint="0,0">
                <GradientStop Color="#FEF4E7" Offset="0.0" />
                <GradientStop Color="#FBA430" Offset="1.0" />
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
</Style>
定义左边的列表区,用ListBox来显示,并且定义ItemTemplate:
<ListBox x:Name="PostsList" Grid.Column="0" Grid.Row="2"
         Margin="10 5 5 10" SelectionChanged="PostsList_SelectionChanged">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Title.Text}" 
                           TextWrapping="Wrap" Width="200"/>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>
最后定义右边的详细信息区域,在StackPanel中垂直放置三个Border:
<StackPanel x:Name="Detail" Grid.Column="1" Grid.Row="2">
    <Border CornerRadius="10" Background="#CDFCAE" Margin="10 5 10 10"
            Width="540" Height="40">
        <TextBlock Text="{Binding Title.Text}"  TextWrapping="Wrap"
                   VerticalAlignment="Center" Foreground="Red"/>
    </Border>
    <Border CornerRadius="10" Background="#CDFCAE" Margin="10 5 10 10"
            Width="540" Height="300">
        <TextBlock Text="{Binding Summary.Text}"  TextWrapping="Wrap"/>
    </Border>
    <Border CornerRadius="10" Background="#CDFCAE" Margin="10 5 10 10"
            Width="540" Height="40">
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="评论日期:"  TextWrapping="Wrap"
                       Foreground="Red" VerticalAlignment="Center"/>
            <TextBlock Text="{Binding PublishDate}"  TextWrapping="Wrap"
                       Foreground="Red" VerticalAlignment="Center"/>
        </StackPanel>
    </Border>
</StackPanel>
界面布局到此大功告成。

实现功能

下面实现数据的获取,采用WebRequest来实现,也可以使用其他方式。
/// <summary>
/// 显示列表
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void displayButton_Click(object sender, RoutedEventArgs e)
{
    Uri uri = new Uri(feedAddress.Text);
    WebRequest request = (WebRequest)WebRequest.Create(uri);
    request.BeginGetResponse(new AsyncCallback(responseReady), request);
}
void responseReady(IAsyncResult asyncResult)
{
    WebRequest request = (WebRequest)asyncResult.AsyncState;
    WebResponse response = (WebResponse)request.EndGetResponse(asyncResult);
    XmlReader reader = XmlReader.Create(response.GetResponseStream());
    SyndicationFeed feed = SyndicationFeed.Load(reader);
    PostsList.ItemsSource = feed.Items;
}
显示详细信息:
/// <summary>
/// 查看详细信息
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void PostsList_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    SyndicationItem item = PostsList.SelectedItem as SyndicationItem;
    Detail.DataContext = item;
}
实现全屏按钮的代码:
/// <summary>
/// 全屏显示
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void fullScreenButton_Click(object sender, RoutedEventArgs e)
{
    Content contentObject = Application.Current.Host.Content;
    contentObject.IsFullScreen = !contentObject.IsFullScreen;
}

运行效果

运行后界面如下:
 
输入豆瓣的最新影评Feed:
 
选择其中一项后,将显示出详细信息:
 

结束语

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





















本文转自lihuijun51CTO博客,原文链接:http://blog.51cto.com/terrylee/67256,如需转载请自行联系原作者


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
4486 0
精准率首次超过人类!阿里巴巴机器阅读理解打破世界纪录!
2018年伊始,人工智能取得重大突破!1月11日,由斯坦福大学发起的机器阅读理解领域顶级赛事SQuAD刷新排名,令业界振奋的是人工智能的阅读能力历史上首次超越人类。阿里巴巴凭借82.440的精准率打破了世界纪录,并且超越了人类82.304的成绩。
7605 0
一起谈.NET技术,Silverlight + RIA Service的SUID的实例
  1、准备工作   新建一个Silverlight Business Application,首先修改web.config,他自动生成的配置比较省略,我手动加入membership,role,profile的配置,我是ASP.NET MVC的项目中拷贝过来,直接用他的配置也可以,不过手动配置一下连接字符串LocalSqlServer,不然不能运行。
777 0
vb.net写一个简易的RSS阅读器
十分简易哈!解决了相对图片路径不能正常显示!可用于博客园全文点击http://www.cnblogs.com/aowind/archive/2005/03/16/119838.html
505 0
续用VB.net做RSS阅读器
继续上次做的RSS阅读器。http://www.cnblogs.com/aowind/archive/2005/03/16/119841.html这次做成了博客园的专用阅读器了,给左边加上了一个treeview,专门用来显示博客园的分类和博客列表。
595 0
[UWP]涨姿势UWP源码——极简的RSS阅读器
原文:[UWP]涨姿势UWP源码——极简的RSS阅读器   涨姿势UWP,一个开源的RSS阅读器,一个纯粹的项目,一个有道德的APP,一个脱离了低级趣味的作者,一些有益于人民的代码。骚年,还等什么,来涨点姿势吧!   该项目代码可能会引起部分人群的不适,敏感人群请在父母陪同下阅读。
1287 0
用vb.net做一个RSS阅读器续--分类功能(博客园专用)
上次发布了一个简易的RSS阅读器的源代码这次给它加上了分类功能http://www.cnblogs.com/aowind/archive/2005/03/18/120942.html几有三个过程哈!对了,还有上次一位朋友把代码改写成了C#.
595 0
用vb.net写一个简易的RSS阅读器
先发一个做出来的效果图哈哈!怎么样?对了DUDU,我这个还解决了看天下那个阅读器不能正常显示相对路径的图片的问题哟!现在不管相对的还是绝对的路径的图片都能正常显示哈!下面是源代码,没有太多注释,因为都比较简单嘛! Imports System.
721 0
+关注
6323
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载