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.

school.tutorials

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.

More tutorials...

Adding custom images to your SampleData

In this first part of the module, you will add images to your sample data.

  1. To start, make sure that all other lesson files are closed. In Expression Blend, choose File > Open and Browse to the SketchFlowLesson03 folder and open the Prototype03_Start Project file inside the Prototype03_Start folder.
  2. When the project opens, press Ctrl+0 (zero) to see the entire screen. You see only the FavoritesPanoItem, as the others are collapsed to start.

    A collection of data has been started for you, but you will customize it further with images and graphics.
  3. Go to the Data panel and expand Project, then FavoriteData, and then expand the Collection for FavoriteData. In here, you see two properties, FavRecipeName and Image. You will now change the property type for the Image property and add another simple property to this collection.
  4. Select the Change property type icon to the right of Image and when the options appear, change the Type to Image and click on the Browse button.
  5. Navigate to the WPSketchFlowLesson03 folder and select the MealImages folder. You will not see any images, but you should still click on Select Folder button. You will now add an additional property.
    Navigate to folder
  6. Click on the Add simple property button to the right of the Collection in FavoriteData; Property1 is added.
  7. Double-click on Property1 and change the name to Time.
  8. Select the Change property type button to the right of Time and change the property type from String to Number. Make sure that the length is set to a value of 2. You will edit the custom data so these numbers are closer to what the user will see in the real application.
    Change the property type
  9. Go to the Projects panel and open the SampleData folder and then open the FavoriteData. Double-click to open the FavoriteData.xaml file and click on the XAML view button in the upper-right of the artboard.
  10. Scroll to the right of the XAML to see the property for Time. Change these values throughout to be 15, 30, 45 or 60. No specific order is necessary. Press Ctrl + S when you are finished to save the XAML file.
  11. Select the Main screen to return to the Panorama in the Design view.
  12. In the Objects and Timeline, expand the LayoutRoot, and then expand the Panorama. Expand FavoritesPanoItem, and then select the Grid inside.
  13. Click and drag the FavoriteData Collection icon to the grid on the artboard; a default ListBox is created.
  14. Right-click on the ListBox that appears and choose Auto Size > Fill.
  15. Select the Properties panel and select the BorderBrush property and change it to No brush.
  16. Press Ctrl + S to save the file.