Use of ListBox in Windows Phone 7

Source: Internet
Author: User
Tags visual studio 2010

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:

           

          Related Article

          Contact Us

          The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

          If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

          A Free Trial That Lets You Build Big!

          Start building with 50+ products and up to 12 months usage for Elastic Compute Service

          • Sales Support

            1 on 1 presale consultation

          • After-Sales Support

            24/7 Technical Support 6 Free Tickets per Quarter Faster Response

          • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.