在本文中，将探讨如何将Twitter API绑定到Windows 8UI网格上。通过几行代码，将能够解析来自Twitter API的XML数据，并将其绑定到Windows 8的网格视图上，使用户能够快速且优雅地查看信息。虽然本文以Twitter为例，但这一概念同样适用于任何类型的数据流，包括JSON（不过这超出了本教程的范围）。
首先，打开Visual Studio 2012，选择Visual C# > Windows Store > Split App (XAML)。为项目命名，然后点击确定。Visual Studio将为创建项目，接下来就可以开始编码了。
只需要创建一个类来完成这个任务。创建一个新的类，并命名为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提供了公共用户时间线的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 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)
{
// 不是最佳实践
}
}
记得将这个方法添加到OnNavigatedTo或ItemsPage.xaml.cs的构造函数中。
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。找到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，但当用户点击其中一个tweet时，应用程序不会知道该怎么做。让来解决这个问题：
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网格上！