Windows Phone 开发学习笔记（十一） RSS阅读器之显示数据

现在已经完成XML页面数据的获取和解析，接下来就要把数据展示在手机页面上。RSS阅读器的信息一般是一条条显示，所以选择ListBox控件。显示信息的基本结构和效果如图1：

图1 基本结构和显示效果

信息列表中，每条信息都有标题、内容、发布时间三个部分，所以创建一个信息类定义信息的各个属性。之后根据解析的数据创建信息对象集合，最后使用ListBox将集合内容显示在页面上。

首先创建信息类，在namespace RSS_Reader中新建一个NewsDetail类，除了保存信息的标题、内容、发布时间外，还保存信息的详细内容链接，代码如下：

    public class NewsDetail
    {
        private String_title;
        private String_detail;
        private String_time;
        private String_link;
 
        public StringTitle
        {
           get
           {
               return_title;
           }
           set
           {
               if (value!= _title)
               {
                    _title = value;
               }
           }
        }
 
        public StringDetail
        {
           get
           {
               return _detail;
           }
           set
           {
               if (value!= _detail)
               {
                    _detail = value;
               }
           }
        }
 
        public String Time
        {
           get
           {
               return _time;
           }
           set
           {
               if (value!= _time)
               {
                    _time = value;
               }
           }
        }
 
        public String Link
        {
           get
           {
               return _link;
           }
           set
           {
               if (value!= _link)
               {
                    _link = value;
               }
           }
        }
    }

之后在publicpartial class MainPage中添加一个存储信息的集合AllNews，类型为ObservableCollection<NewsDetail>，保存所有的信息内容。

使用ObservableCollection需要引入命名空间System.Collections.ObjectModel。此时命名空间如下：

using System;
using System.Windows;
using System.Windows.Controls;
using Microsoft.Phone.Controls;
using System.Net;
using System.IO;
using System.Xml.Linq;
using System.Collections.ObjectModel;

添加成员AllNews，并在MainPage的构造函数里初始化。

        public ObservableCollection<NewsDetail> AllNews
        {
            get;
            privateset;
        }
        public MainPage()
        {
            InitializeComponent();
            AllNews = newObservableCollection<NewsDetail>();
        }

以上代码相当于创建一个空白笔记本来记录信息，但是向笔记本添加信息还没有做。接下来修改解析数据部分的代码，根据获得数据创建对应的信息对象，并把该对象存入AllNews集合。

                    if (streamResult != null)
                    {
                        // load the XML
                        XElement xmlFeed = XElement.Load(streamResult);
                       
                        Deployment.Current.Dispatcher.BeginInvoke(new Action(() =>
                        {
                            foreach (XElement curElement in xmlFeed.Descendants("item"))
                            {
                                NewsDetail tempNews = new NewsDetail();
                                tempNews.Title= (String)(curElement.Element("title")) + "\n";
                                tempNews.Time = (String)(curElement.Element("pubDate")) + "\n";
                                tempNews.Detail = (String)(curElement.Element("description")) + "\n";
                                tempNews.Link = (String)(curElement.Element("link")) + "\n";

                                AllNews.Add(tempNews);
                            }
                        }));
                    }

至此，数据处理部分就告一段落，接着需要修改的事XAML页面显示。

由于每条信息以相同格式显示，不需要挨个调整样式，可使用一个模板套用在所有信息上，DataTemplate适合完成此类工作。MSDN上有它的例子和详细介绍

http://msdn.microsoft.com/zh-cn/library/system.windows.datatemplate(v=VS.95).aspx

参照MSDN的说明和设计需要，在XAML中创建一个现实单条信息的模板，注意Binding后的名称必须与NewsDetail里的成员名称对应。代码如下：

    <phone:PhoneApplicationPage.Resources>
        <DataTemplate x:Key="DataTemplate">
            <Grid VerticalAlignment="Top" Margin="10,10,10,0" Background="#FF328CEC">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <TextBlock x:Name="Title" TextWrapping="Wrap" VerticalAlignment="Top" Text="{Binding Title}" FontSize="32" FontWeight="Bold" Margin="0,10,0,0" HorizontalAlignment="Center" Width="400" />
                <TextBlock x:Name="Detail" TextWrapping="Wrap" VerticalAlignment="Top" Text="{Binding Detail}" Grid.Row="1" FontSize="26" Margin="0" Foreground="Black" Width="400" />
                <TextBlock x:Name="Time" TextWrapping="Wrap" VerticalAlignment="Top" Text="{Binding Time}" Grid.Row="2" FontStyle="Italic" FontSize="22" Margin="0" Foreground="#FF133EF3" HorizontalAlignment="Left" Width="400" />
            </Grid>
        </DataTemplate>
    </phone:PhoneApplicationPage.Resources>

然后删除MessagePanel中的TextBlock控件，改用ListBox，代码如下：

<Grid x:Name="MessagePanel" Background="Transparent">
        <ListBox x:Name="FirstList" Margin="10" ItemTemplate="{StaticResource DataTemplate}" Foreground="White" Width="430" HorizontalAlignment="Center" />
</Grid>

接着调整下LayoutRoot的行高度，以显示更多的内容：

<Grid.RowDefinitions>
        <RowDefinition Height="0.8*"/>
        <RowDefinition Height="0.2*"/>
</Grid.RowDefinitions>

现在前台页面的显示控制和后台数据均已完成，只差最后一步把后台数据与前台显示绑定在一起。这一步很简单，只要将ListBox的ItemSource属性设置为AllNews就可以。

FirstList.ItemsSource =AllNews;

可以把这条语句加在MainPage的构造函数中，最终的MainPage构造函数如下：

        public MainPage()
        {
            InitializeComponent();
            AllNews = newObservableCollection<NewsDetail>();
            FirstList.ItemsSource = AllNews;
        }

运行后显示效果如图2：

图2 最终显示效果