拼吾爱程序人生.Net编程Silverlight 一步一步学Silverlight 2系列（18）：综合实例之RSS阅读器

1  /  1  页   1 跳转页 查看:885

一步一步学Silverlight 2系列（18）：综合实例之RSS阅读器

本主题由 管理员 cobra 于 2008-3-15 16:03:52 执行 设置高亮 操作
离线 cobra
头像
striver

  • 个人空间 相册
  • 性别:
  • 来自:拼吾爱
  • 积分:6805
  • 帖子:6717
  • 注册: 2007-04-09
社区创始人
2008-03-15 15:38 | 只看楼主
树型| 收藏| 小 中 大 复制帖子链接到剪贴板1F

一步一步学Silverlight 2系列（18）：综合实例之RSS阅读器

文/Terrylee  出处/博客园

概述

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"
                        F Margin="10 0 10 0">
        <WatermarkedTextBox.Watermark>
            <TextBlock Text="请输入有效的RSS地址" VerticalAlignment="Center"
                      Foreground="#FBA430" F></TextBlock>
        </WatermarkedTextBox.Watermark>
    </WatermarkedTextBox>
    <Button x:Name="displayButton" Style="{StaticResource button}"
            C Click="displayButton_Click"></Button>
    <Button x:Name="fullScreenButton" Style="{StaticResource button}"
            C 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" Selecti>
    <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>


界面布局到此大功告成。

 感谢原创者的辛勤劳动，希望对您有所帮助，转载请注明原出处。
 您可能对 [Silverlight] 的这些文章也感兴趣：

使用Popfly GameCreator轻松构建Silverlight游戏--Part1
Novell MoonLight:微软SilverLight领跑者
Object reference not set to an instance of an object
Silverlight教程第八部分：使用WPF创建一个Digg桌面应用
Silverlight 2.0八月份宏大的部署计划
在Silverlight中使用DynamicMethod(动态方法)
Silverlight 的 VisualState“视图状态”使用心得
Silverlight 2 (beta1)数据操作(7)
Silverlight开发中的代码安全性
Silverlight Tools RTW正式发布
gototop
 
离线 cobra
头像
striver

  • 个人空间 相册
  • 性别:
  • 来自:拼吾爱
  • 积分:6805
  • 帖子:6717
  • 注册: 2007-04-09
社区创始人
2008-03-15 15:46 | 只看楼主
树型| 收藏| 小 中 大 复制帖子链接到剪贴板2F

回复：一步一步学Silverlight 2系列（18）：综合实例之RSS阅读器

实现功能下面实现数据的获取，采用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;
}
gototop
 
离线 cobra
头像
striver

  • 个人空间 相册
  • 性别:
  • 来自:拼吾爱
  • 积分:6805
  • 帖子:6717
  • 注册: 2007-04-09
社区创始人
2008-03-15 15:56 | 只看楼主
树型| 收藏| 小 中 大 复制帖子链接到剪贴板3F

回复：一步一步学Silverlight 2系列（18）：综合实例之RSS阅读器

运行效果

运行后界面如下：

 附件: 您所在的用户组无法下载或查看附件


输入豆瓣的最新影评Feed：

 附件: 您所在的用户组无法下载或查看附件


选择其中一项后，将显示出详细信息：

 附件: 您所在的用户组无法下载或查看附件
 

结束语

本文对前面十七篇内容做了一个小结，并开发出了一个简易RSS阅读器，你可以从这里下载本文示例代码:
 附件: 您所在的用户组无法下载或查看附件。
gototop
 
<<上一主题|下一主题>>
1  /  1  页   1 跳转页

快速回复帖子

标题
禁用 URL 识别
禁用表情
禁用 Discuz!NT 代码
使用个人签名
default
向前  向后
表情加载

正在加载表情...
  [完成后可按 Ctrl+Enter 无刷新发布]  

版权所有 拼吾爱程序人生    

Powered by Discuz!NT 2.1.202   Copyright © 2001-2008 Comsenz Inc. 鄂ICP备07500843号
返顶部