Windows Phone 7下ListBox的使用
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<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运行，可以看到效果图如下：
