Windows 8 中的数据绑定 XML Feed

• 下载源代码 - 179.4 KB 

简介  

注意：自从本文发布以来，Twitter 已经弃用了其 REST API v1。 本教程将无法使用 Twitter API。 但是，代码模板可以与其他 XML API 一起使用。

今天，我将介绍如何轻松地将 Twitter API 绑定到 Windows 8 UI Grid。只需几行代码，您就可以将 Twitter API 中的 XML 解析到 Windows 8 中，并将其绑定到 gridview，从而允许用户快速而优雅地查看信息。

虽然我在此示例中使用了 Twitter，但该概念基本上适用于任何 Feed，包括 JSON（但这超出了本教程的范围）。

整个项目解决方案可以在这里下载。  

开始吧

让我们开始吧。 打开 Visual Studio 2012，转到 Visual C# > Windows Store > 分割应用 (XAML)。 随意给您的项目命名，然后按 Ok。 Visual Studio 将为您创建项目，然后您就可以开始了。

创建的项目实际上远远超出了我们的需求，因此我们实际上不会使用大部分代码，并且在大多数情况下，您可以删除 VS2012 为我们创建的大部分代码。 但现在，让我们添加我们的代码。

以下是我们要做的一个总结

1. 创建一个类
2. 创建读取和解析 API 的方法
3. 编辑 XAML
4. 完成!

类

我们只需要一个类。 因此，创建一个新类并将其命名为 Tweet.cs。 在其中，您需要具有以下属性

class Tweet  
{ 
    public String Date { get; set; }
    public String UserName { get; set; }
    public String UserMessage { get; set; }
    public String StatusNumber { get; set; }
}

大功告成！

创建一个方法

现在返回到 Itemspage.xaml.cs 并创建一个名为 GetXmlAsync() 的方法。 Twitter 为您提供了对用户的公共 Feed 的 API 访问权限。 对于本教程，我将使用 Appavate（我的各个应用商店的前端）的 Feed。

我们将异步获取 Twitter Feed，使用一点 LINQ 并将其绑定到我们的 Tweet 属性。

请参见下面的代码

public async void GetXmlAsync()
{
    try
    {
        var client = new HttpClient();
        var response = await client.GetAsync(
          "http://api.twitter.com/1/statuses/user_timeline.xml?screen_name=Appavate");
        var text = response.Content.ReadAsStringAsync();

        XElement xmlTweets = XElement.Parse(text.Result);
        IEnumerable<Tweet> data = from tweet in xmlTweets.Descendants("status")
                                      select new Tweet
                                      {
                                          UserName = tweet.Element("user").Value,
                                          UserMessage = tweet.Element("text").Value,
                                          Date = tweet.Element("created_at").Value,
                                          StatusNumber = tweet.Element("id").Value
                                      };
        itemGridView.DataContext = data;
    }
    catch (Exception) // Not best practice
    {
    }
}

请记住将该方法添加到 OnNavigatedTo 或 ItemsPage.xaml.cs 的构造函数中。

添加相关的命名空间，就完成了！

XAML

XAML 需要一个小调整。 打开 ItemsPage.xaml 并转到 itemGridView。 在这里，将 ItemsSource 字段更改为 ItemsSource="{Binding}"。

它现在应该看起来像这样

<GridView
        x:Name="itemGridView"
        AutomationProperties.AutomationId="ItemsGridView"
        AutomationProperties.Name="Items"
        TabIndex="1"
        Grid.RowSpan="2"
        Padding="116,136,116,46"
        ItemsSource="{Binding}"
        ItemTemplate="{StaticResource Standard250x250ItemTemplate}"
        SelectionMode="None"
        IsSwipeEnabled="false"
        IsItemClickEnabled="True"
        ItemClick="ItemView_ItemClick"/>

标准样式

现在我们需要实际绑定数据。 为此，我们将编辑标准样式表中的模板。 因此，在项目文件夹中，转到 Common > StandardStyles.XAML。 向下滚动或按 Ctrl + F 到 "Standard250x250ItemTemplate"。

我们需要对此进行一些更改。 记得 Tweet 类吗？ 我们将在此处添加这些内容。 在 StackPanel 中，我们可以更改 TextBlock 的绑定。 继续将其更改为我们的属性。

完成后它应该看起来像这样

<DataTemplate x:Key="Standard250x250ItemTemplate">
    <Grid HorizontalAlignment="Left" Width="250" Height="200">
        <StackPanel VerticalAlignment="Bottom" 
                  Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
            <TextBlock Text="{Binding UserMessage}" 
                Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" 
                Style="{StaticResource TitleTextStyle}" 
                Height="Auto" Margin="15,0,15,0"/>
            <TextBlock Text="{Binding UserName}" 
              Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" 
              Style="{StaticResource CaptionTextStyle}" 
              TextWrapping="NoWrap" Margin="15,0,15,10"/>
            <TextBlock Text="{Binding Date}" 
              Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" 
              Style="{StaticResource CaptionTextStyle}" 
              TextWrapping="NoWrap" Margin="15,0,15,10"/>
        </StackPanel>
    </Grid>
</DataTemplate>

对于本教程，我没有绑定图像，但过程是一样的。

注意：为了加快速度，这在查看时可能有点难看。 但您始终可以返回到此处并使其美观。

最后一件事...

现在，它将显示 Feed，但当用户单击其中一条推文时，该应用将不知道该怎么做。 让我们修复它

private void ItemView_ ItemClick(object sender, ItemClickEventArgs e)
{
    string id = ((Tweet)e.ClickedItem).StatusNumber;
    string baselink = "https://twitter.com/Appavate/status/";

    string uri = baselink + id;
    Launcher.LaunchUriAsync(new Uri(uri));
}

这将简单地打开一个浏览器，并将您带到该推文。 您可以轻松地实现一些将用户带入您的应用或别处的操作。

让我们运行它...

我们现在已经完成了。 转到解决方案文件夹，构建，然后在本地计算机或模拟器上运行它。 Feed 现在应该像这样出现在网格上

您已成功将 Twitter Feed 绑定到 Windows 8 Grid！

是不是很简单？

需要注意的一些事项

• 这不会是世界上最漂亮的东西。 您需要编辑一些 XAML 才能使其看起来很棒。
• 如果它所做的只是向您显示 Feed 并且不允许他们继续前进，那么这对用户来说是无用的。 在上面的类中，有一个名为 "statusnumber" 的属性，该属性对于所有推文都是唯一的。 您可以使用它来指导用户正确的方向。

如果您遇到问题，我已在此处上传了解决方案 here。

如果您仍然遇到问题，请尝试 StackOverflow，发布评论或向我发送电子邮件，我很乐意为您提供帮助。