Getting started with Windows phone 7 list application
Scrolling list of items on windows 6.5 is a big headache. The only control that supports on windows mobile 6.5 is listbox which supports simple text item. But with Windows phone7 you are lucky to find built in scrolling feature and customizable theme for listbox. Check it out how to achieve scrolling big list.
List app on phone 7
Many device apps today presents the main UI in list mode. Creating list based app for windows phone 7 is easy using visual studio 2010 and Expression blend 4 for Phone 7. Here you will see how to create list based app starting from the visual studio wizard. Wizard lets you create some initial files easily, later you start editing those files to suit your needs.
Prepare the working environment to create windows phone 7 applications.
Install Visual studio 2010.
Install Windows Phone Developer Tools Beta (Till the writing of this article its only available as beta version). WPDT beta is available from the following url.
http://www.microsoft.com/downloads/en/details.aspx?FamilyID=c8496c2a-54d9-4b11-9491-a1bfaf32f2e3&displaylang=en
WPDT comes with the Windows phone 7 Emulator and Microsoft expression blend for Phone 7 (beta version) to work with xaml (xaml is the key of wpf or silver light applications). Windows phone 7 supports sliverlight applications.
Walkthrough to create list based applications on windows phone 7.
Start the visual studio 2010 and create new project. Select the options as below to create list based windows phone 7 application.
New project
The wizard does most for you. Creates xaml file, create dataviewmodel and binds to the listbox. See the design mode of the list application.
Visual studio and Expression blend both lets you preview your UI on desing mode via setting datacontext to desingdata (designdata can be defined on another xaml file). See the design mode preview of the list application on windows phone 7.
Phone 7 list preview
xaml source code
xaml file created by the visual studio 2010 wizard.
Lets add some more rows to the listbox. Open up the MainViewModel class and add some more objects to the collection (this collection is actually bound to the listbox).
code behind
Code that adds lots of items to the listbox.
Test the app
Here i have added 1000 objects to the collection. We are also interested to see how well the list scrolls if there are lots of records.
Now lets run the application on our Phone 7 emulator. Scrolling and panning works smooth (event in more than 1000 records).
Now lets check the orientation support. Change the SupportedOrientations to PortraitOrLandscape on xaml file.
This xaml defines that the UI can be viewed both on the landscape and portrait mode. When you rotate the device the orientation automatically changes and layout is updated.
Some design tweaking on Expression Blend 4 for Phone 7
Open up the expression blend 4 for phone 7 and open up the solution file before we created on visual studio 2010. On the blend editor open up the DataTemplate of the listbox.
Lets add a border container as a root element on the DataTemplate and paste all other controls on it. Set some gradient and set border color, corner radius. Now my list looks like below.
final view
Final design tweaking on expression blend.
blog comments powered by Disqus