Use of ListBox in Windows Phone 7

Windows Phone 7LowerListBoxUse 

Learn how to use ListBox in Windows Phone 7 to create a book list.

1. Start Microsoft Visual Studio 2010 express for Windows Phone and create a new silverlightfor phone project named Booklist.
2. Right-click the solution's booklist project, select Add-> new folder, create a folder, name it picture, right-click the folder, and select Add-> existing item ..., In the pop-up window, add the cover image of the book.
3. Open the mainpage. XAML. CS file and add a new class book. The Code is as follows:

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

4. Add a numeric conversion class for price conversion. The Code is as follows:

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. Add a Books class with the following code:

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 Chinese Version classic tutorial", convert. todecimal (19.95), picture_path + "Adobe Photoshop cs2 文 .jpg"); datacollection. add (New Book ("proficient in CSS + Div webpage style layout", convert. todecimal (19.95), picture_path + "Excellent css1_div .jpg"); datacollection. add (New Book ("Learning opencv", convert. todecimal (19.95), picture_path + "Learning opencv.jpg"); datacollection. add (New Book ("Zen of Speech", convert. todecimal (19.95), picture_path + ".jpg"); datacollection. add (New Book ("elements of User Experience", convert. todecimal (19.95), picture_path + "User Experience essentials .jpg"); Return datacollection ;}}

6. Open the mainpage. XAML file and add a project namespace at the beginning. The Code is as follows:

<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. Add the books and priceconverter classes to the XAML file.

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

8. Modify the title of the simulator.

<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. Add a ListBox at contentpanel. The Code is as follows:

<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. Run F5. You can see the following: