courses I tutorials

Explore different tutorials to get hands on with Silverlight and Expression Blend across a wide array of topics in a short time.

Using SketchFlow for Windows Phone Series

In this ToolBox module you discover principles of good UX design. You also discover how to start and build your prototype using the SketchFlow Template for Windows Phone.

Creating States for the ListItem selection

In this section you will create two states; one to show top recipe results for beef and one for chicken. ListBoxes for these two results are already created and are collapsed at this time.

Make sure any other lesson files are closed. From inside Expression Blend choose File > Open Project/Solution.
Navigate to the WPSketchFlowLesson05 folder and open the Prototype05_Start folder and select the project file located within.

The project file opens to the second PanoramaItem which has three ListBoxes, the default named ResultsListBox, and then two collapsed ListBoxes, one named BeefListBox, and the other ChickenListBox.
Select the States panel to bring it forward, and click on the Add state group button. Name the new state group TopPicksVisualStateGroup.
Click on the Add state button to the right of the TopPicksVisualStateGroup you just created. Click on the Add state button two more times so that you have a total of three VisualStates.
Rename these states TopPicksDefaultState, ChickenState, and BeefState in that order. You will now record the states.
Select the TopPIcksDefaultState to verify that the ResultsListBox is the only visible ListBox at this time. If it is not, collapse the BeefListBox and ChickenListBox using the Appearance pane in the Properties panel.
Select the ChickenState in the States panel and then select the ResultsListBox in the Objects and Timeline panel. Locate the Appearance panel in the Properties panel and change the Visibility property to Collapsed.
With the ChickenState still active, select the ChickenListBox and change the Visibility property to Visible.
Select the BeefState in the States panel and then select the ResultsListBox in the Objects and Timeline.
Change the visibility of the ResultsListBox to Collapsed.
Select the BeefListBox in the Objects and Timeline and change its Visibility property to Visible.
Test your states by clicking on Base. This is the default state the user will see. Then select the TopPicksDefualtState, ChickenState, and BeefState to make sure that they are displaying the appropriate ListBox. If they are not, carefully go back through the steps and make sure that the Visibility properties have been set up properly.
Click back on Base in the States panel and then choose File > Save.