Windows Phone 7下ListBox的使用

Windows Phone 7下ListBox的使用 

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

1. 首先打开Microsoft Visual Studio 2010 Express for Windows Phone, 新建一个Silverlightfor phone工程，命名为BookList.
2. 右击解决方案的BookList工程，选择Add ->New Folder，新建一个文件夹，命名为 Picture，右击该文件夹，选择Add->Existing Item…，在弹出的窗口中把书的封面图片添加进去。
3. 打开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<Book>  
{  
    public Books()  
    {  
  
    }  
    private const string Picture_Path = "../Picture/";  
    public ObservableCollection<Book> DataCollection { get; set; }  
    public ObservableCollection<Book> BuildCollection()  
    {  
        DataCollection = new ObservableCollection<Book>();  
  
        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文件，在开头处增加一个本工程命名空间。代码如下：

<phone:PhoneApplicationPage
x:Class="BookList.MainPage"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:data="clr-namespace:BookList"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
FontFamily="{StaticResourcePhoneFontFamilyNormal}"
FontSize="{StaticResourcePhoneFontSizeNormal}"
 Foreground="{StaticResourcePhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">

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

<phone:PhoneApplicationPage.Resources>
<data:Books x:Key="BookCollection" />
<data:PriceConverter x:Key="priceConvert" />
</phone:PhoneApplicationPage.Resources>

8.修改模拟器的标题

<StackPanel x:Name="TitlePanel"Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResourcePhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="Book List" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>

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

<ListBox x:Name="lstData"
ItemsSource="{Binding Source={StaticResourceBookCollection}, Path=DataCollection}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Margin="8"
VerticalAlignment="Top"
 Source="{Binding Path=BookPic}"
 Width="100"
 Height="100" />
<StackPanel>
<TextBlock Margin="8"
 Width="250"
TextWrapping="Wrap"
VerticalAlignment="Top"
HorizontalAlignment="Left"
 Text="{Binding Path=BookName}" />
<TextBlock Width="100"
 Margin="8,0,8,8"
VerticalAlignment="Top"
HorizontalAlignment="Left"
 Text="{Binding Path=BookPrice, Converter={StaticResourcepriceConvert}}"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

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