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:PhoneApplicationPagex: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運行，可以看到如下：