×
Namespaces

Variants
Actions

在Windows Phone 7中处理Listbox

From Nokia Developer Wiki
Jump to: navigation, search
WP Metro Icon UI.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata

代码示例
兼容于
文章
翻译:
WS_YiLunLuo
最后由 hamishwillee 在 03 Jul 2013 编辑

这篇文章展示了如何使用ListBox并从选中的项中获得值。这是初学者开始学习Windows Phone 7开发的好材料。

Contents

简介

Listbox可以有两种使用方式

  • 使用ListBoxItems
  • 数据绑定

一般来说,ListBox是一种像ListPicker和其他类似的控件一样的ItemControl。其基本结构与SelectedItem行为是相似的。首先我们利用ListBoxItems方法来创建ListBox。

使用ListBoxItems

要使用ListBoxItems方法来完成一个list box,需使用下面的步骤:

  • 通过文件创建一个新的项目>>New Project>>Windows Phone Application - Visual C#。并给你的项目命名。
  • 从Solution Explorer中打开MainPage.xaml文件。(如果Solution Explorer当前没有打开,就通过View>>Other Windows>>Solution Explorer来打开它。)
  • 内部content panel的代码片段:添加下面的代码创建一个带有项目的列表框:
    <!--ContentPanel - place additional content here-->
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <ListBox Margin="0,0,0,0" Name="lstCountries"
    SelectionChanged="lstCountries_SelectionChanged">
    <ListBox.Items>
    <ListBoxItem Content="Brazil"/>
    <ListBoxItem Content="China"/>
    <ListBoxItem Content="India"/>
    <ListBoxItem Content="Switzerland"/>
    <ListBoxItem Content="Austria"/>
    </ListBox.Items>
    </ListBox>
    </Grid>
    </Grid>
  • 我们已经给ListBox控件的事件"SelectionChanged"一个值,它意味着当list box项中的任何一个选择事件完成后,相应的"lstCountries_SelectionChanged()"将被执行。
  • MainPage.xaml.cs的文件中,作出这样的功能。如下所示:
private void lstCountries_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
MessageBox.Show("List Item " + (lstCountries.SelectedIndex + 1) + " pressed.");
}

使用上面的代码,当一个列表项目被选中时,一个消息框将为选中的列表项做出索引提示。

使用数据绑定方法

基本理念

我们将会使用Flickr API来获得XML数据并将内容显示在ListBox中。当用户点击任何一个list项时,详细页面就会出现。

Windows Phone Windows Phone
Flickr Search Page
Flickr Detail Page

一步一步实现

  • 下载并安装 the Windows Phone SDK (WP SDK) 7.1
  • 在你下载并安装好Windows Phone SDK后,启动Visual Studio 2010 Express的Windows Phone并选择File->New Project。在这里,你会发现通用的项目模板列表,在Visual C#择针对Windows Phone的Silverlight,然后选择Windows Phone Application模板。截至目前,我们使用的都是非常基本的模板,但是你也可以通过其他的模板来实现。
  • 在创建了新的项目后,会得到一个设计界面和标记。请注意,在设计界面上显示手机的用户界面,可以让你可以轻松地看到你的应用程序将如何发展。对于那些熟悉Visual Studio的用户,你还可以找到熟悉的ToolBox, Solution Explorer 和Properties pane 。
  • 对于我们的应用程序,我们将会从Toolbox中添加一个TextBox 和一个 Button。我们将重新为TextBox命名为SearchBox,改变Flickr页面的标题文字。
  • 我们在双击后写入代码,并在code-behind文件中创建一个事件处理器。

MainPage.xaml.cs

private void FlickrSearch_Click(object sender, RoutedEventArgs e)
{
WebClient webclient = new WebClient();
webclient.DownloadStringCompleted += new DownloadStringCompletedEventHandler(webclient_DownloadStringCompleted);
webclient.DownloadStringAsync(new Uri("http://api.flickr.com/services/feeds/photos_public.gne?tag=" + SearchBox.Text + "&format=rss2")); // Flickr search
}

我们使用了WebClient类来异步下载Flickr feed。这总共需要三行代码:(1)声明并创建WebClient,(2)附加一个事件处理程序,然后(3)调用异步DownloadStringAsync 方法。在DownloadStringAsync的调用中我们将通过一个Flickr Uri加上一个从SearchBox TextBox输入的文本字符串。这个feed会以一种XML格式搜索所有的项。当调用完成后,DownloadStringCompleted事件被触发,我们事件处理程序webclient_DownloadStringCompleted将被调用。

void webclient_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e) 
{
if (e.Error != null)
{
MessageBox.Show("error");
}
// parsing Flickr
XElement XmlTweet = XElement.Parse(e.Result);
//var ns = XmlTweet.GetDefaultNamespace(); // get the default namespace
XNamespace ns = "http://search.yahoo.com/mrss/";
listBox1.ItemsSource = from tweet in XmlTweet.Descendants("item") select new FlickrData {
ImageSource = tweet.Element(ns + "thumbnail").Attribute("url").Value,
Message = tweet.Element("description").Value,
UserName = tweet.Element("title").Value,
PubDate = DateTime.Parse(tweet.Element("pubDate").Value) };
}

从Flickr返回的结果是XML格式的。为了解析这些数据我们将使用LINQ to XML。 LINQ to XML让我们创建一个简单的查询来访问XML feed中的数据。使用这个库,我们将首先需要添加一个引用到对应的assembly(在Solution Explorer中的References folder上点击右键,并选择Add Reference),然后从列表中选择System.Xml.Linq。然后,在Main.xaml.cs文件的顶部添加System.Xml.Linq的命名空间。XElement用来解析XML数据。我们将创建一个helper类FlickrData来存储数据。

public class FlickrData 
{
public string UserName { get; set; }
public string Message { get; set; }
public string ImageSource { get; set;}
public DateTime PubDate { get; set; }
}

然后,我们使用LINQ to XML来解析来自Flickr返回的XML字符串。我们通过查询字符串的SearchBox取出关键件的信息来查询每个Flickr的key。在XML中的每个项目中,我们正在IEnumerable<XElement>中创造一个新的FlickrData并用LINQ查询来返回。然后,我们将FlickrData集合设置为ListBox的ItemsSource属性。然后,我们将一个步骤一个步骤来完成这些。在MainPage.xaml文件中,我们将为ListBox添加ItemTemplate。为了演示,本文原作者使用了一个简单的模板,利用数据绑定来显示内容。

<ListBox SelectionChanged="listBoxFlickerSearch_SelectionChanged"  Height="496" HorizontalAlignment="Left" Margin="-4,155,0,0" Name="listBox1" VerticalAlignment="Top" Width="460" >                <ListBox.ItemTemplate> 
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="132" MouseLeftButtonDown="Tap_LeftButtonDown"
MouseLeftButtonUp="Tap_LeftButtonUp"
MouseLeave="Tap_MouseLeave">
<Image Source="{Binding ImageSource}" Height="73" Width="73" VerticalAlignment="Top" Margin="0,10,8,0"/>
<StackPanel Width="370">
<TextBlock Text="{Binding UserName}" Foreground="#FFC8AB14" FontSize="28" /> <!--TextBlock Text="{Binding Message}" TextWrapping="Wrap" FontSize="24" /--> <TextBlock Text="{Binding PubDate}" TextWrapping="Wrap" FontSize="24" /> </StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

现在你可以运行应用程序,它会显示Flickr数据列表。但是当你点击任何一个项目时,任何事也不会发生。

  • 我们创建另一个页面FlickrDetail.xaml来显示选中的项。右击Project->Add->New Item->Window Phone Portrait。在FlickrDetail.xaml文件中,我们为ListBox添加一个ItemTemplate就像我们之前做的那样,这个list box包含了详细的项。

FlickrDetail.xaml

<ListBox Height="541" HorizontalAlignment="Left" Margin="9,35,0,0" Name="listBoxFlickrDetail" VerticalAlignment="Top" Width="441" > 
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="132">
<Image Source="{Binding ImageSource}" Height="73" Width="73" VerticalAlignment="Top" Margin="0,10,8,0"/>
<StackPanel Width="370">
<TextBlock Text="{Binding UserName}" Foreground="#FFC8AB14" FontSize="28" /> <TextBlock Text="{Binding PubDate}" TextWrapping="Wrap" FontSize="24" />
<TextBlock Text="{Binding Message}" TextWrapping="Wrap" FontSize="24" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
*在MainPage.xaml中,我们在ListBox中添加SelectionChanged="listBoxFlickerSearch_SelectionChanged"来获得选择的项。我们在MainPage.xaml.cs中获取所选项目并实现导航NavigationService
private void listBoxFlickerSearch_SelectionChanged(object sender, SelectionChangedEventArgs e) 
{
if (e.AddedItems.Count > 0)
{
// get RSS item from ListBox and store in class var. Store page to navigate to in class var. selectedItem = (FlickrData)e.AddedItems[0];
targetPage = new Uri("/FlickrDetail.xaml", UriKind.Relative);
// reset selection of ListBox
((ListBox)sender).SelectedIndex = -1;
// change page navigation
NavigationService.Navigate(targetPage);
FrameworkElement root = Application.Current.RootVisual as FrameworkElement;
root.DataContext = selectedItem;
}
}
  • 在FlickrDetail.xaml我们创建一个类来存储选中项的数据。
public class FlickrDetailPage 
{
public string UserName { get; set; }
public string Message { get; set; }
public string ImageSource { get; set; }
public DateTime PubDate { get; set; }
}
<code>
 
and assign the selected item value to the accessor while loading the page
<code csharp>
void RssItemPage_Loaded(object sender, RoutedEventArgs e)
{ // Set page title to news title and navigate to string containing news item. // PageTitle.Text = ((RssItem)DataContext).Title.ToLower();
FlickrDetailPage iFlickrDetail = new FlickrDetailPage();
iFlickrDetail.UserName = ((FlickrData )DataContext).UserName.ToLower();
iFlickrDetail.ImageSource = ((FlickrData)DataContext).ImageSource.ToLower();
iFlickrDetail.PubDate = ((FlickrData)DataContext).PubDate;
iFlickrDetail.Message = ((FlickrData)DataContext).Message.ToLower(); listBoxFlickrDetail.Items.Add(iFlickrDetail);
 
}

最后,我们将生成的FlickrDetailPage序列分配到ListBox’s ItemsSource的属性。

  • 编译应用程序(按Ctrl + Shift+ B),然后运行它(按CRTL + F5)

源代码

完整的源代码可以在如下网站获得: File:FlickrWP7.zip

This page was last modified on 3 July 2013, at 06:50.
147 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×