Windows Phone 7下ListBox的使用

cf2000

　　Windows Phone 7下ListBox的使用
　　学习一下如何在Windows Phone 7下使用ListBox来做一个图书列表。

• 首先打开Microsoft Visual Studio 2010 Express for Windows Phone, 新建一个Silverlightfor phone工程，命名为BookList.
  
• 右击解决方案的BookList工程，选择Add ->New Folder，新建一个文件夹，命名为 Picture，右击该文件夹，选择Add->Existing Item…，在弹出的窗口中把书的封面图片添加进去。
  
• 打开MainPage.xaml.cs文件，添加一个新的类Book,代码如下：
  

　　


publicclassBook
{
public Book()
{
}
public Book(stringName, decimal Price, stringPicture)
{
this.BookName = Name;
this.BookPrice = Price;
this.BookPic = Picture;
}
publicstringBookName;
publicdecimalBookPrice;
publicstringBookPic;
}


　　4. 添加一个数值转换类，用于转换价格，代码如下：
　　


publicclassPriceConverter : IValueConverter
{
publicobject Convert(objectvalue, TypetargetType, object parameter, System.Globalization.CultureInfo culture)
{
decimal price;
price = (decimal)value;
returnprice.ToString("c");
}
publicobjectConvertBack(objectvalue, TypetargetType, object parameter, System.Globalization.CultureInfo culture)
{
thrownewNotImplementedException();
}
}


　　5. 添加一个Books类，代码如下：





public class Books:List  
{  
public Books()  
{  
}  
private const string Picture_Path = "../Picture/";  
public ObservableCollection DataCollection { get; set; }  
public ObservableCollection BuildCollection()  
{  
DataCollection = new ObservableCollection();  
DataCollection.Add(new Book("Adobe Photoshop CS2中文版经典教程", Convert.ToDecimal(19.95), Picture_Path + "Adobe Photoshop CS2中文版经典教程.jpg"));  
DataCollection.Add(new Book("精通CSS+DIV网页样式布局", Convert.ToDecimal(19.95), Picture_Path + "精通CSS+DIV网页样式布局.jpg"));  
DataCollection.Add(new Book("学习OpenCV", Convert.ToDecimal(19.95), Picture_Path + "学习OpenCV.jpg"));  
DataCollection.Add(new Book("演说之禅", Convert.ToDecimal(19.95), Picture_Path + "演说之禅.jpg"));  
DataCollection.Add(new Book("用户体验的要素", Convert.ToDecimal(19.95), Picture_Path + "用户体验的要素.jpg"));  
return DataCollection;  
}  
}




　　6.打开Mainpage.xaml文件，在开头处增加一个本工程命名空间。代码如下：
　　





　　
7.接下来把Books和PriceConverter类加入到xaml文件中。

　　








　　8.修改模拟器的标题

　　








　　
9.在ContentPanel处添加一个ListBox，代码如下：

　　

















　　
10.F5运行，可以看到效果图如下：