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 最终显示效果