第18课综合实例之RSS阅读器

最新推荐文章于 2021-06-27 19:10:56 发布

最新推荐文章于 2021-06-27 19:10:56 发布 · 91 阅读

本文通过整合界面布局、样式及数据绑定等技术，开发了一款简易RSS阅读器。该阅读器支持RSS地址输入、列表展示及详细信息查看等功能。

概述

本文将综合前面十七篇讲过的界面布局、样式、控件模板、数据绑定、网络通信等几个方面，来开发一个综合实例——简易RSS阅读器。

界面布局

我们最终完成的RSS阅读器界面如下：

TerryLee_Silverlight2_0082

定义一个三行两列的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>显示列表
/// 
/// 
/// 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>查看详细信息
/// 
/// 
/// private void PostsList_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    SyndicationItem item = PostsList.SelectedItem as SyndicationItem;

    Detail.DataContext = item;
}

实现全屏按钮的代码：

/// <summary>
/// </summary>全屏显示
/// 
/// 
/// private void fullScreenButton_Click(object sender, RoutedEventArgs e)
{
    Content contentObject = Application.Current.Host.Content;
    contentObject.IsFullScreen = !contentObject.IsFullScreen;
}