×
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.
159 page views in the last 30 days.
×