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.

Adding Panorama Control

In this section, you will be adding the Panorama control to the initial Main screen. The Panorama is part of the core Windows Phone experience. Unlike standard applications that are designed to fit within the confines of the phone’s screen, panoramic applications offer a unique way to view controls, data and services by using a long, horizontal canvas that extends beyond the confines of the screen. It helps to think of a panorama control as being similar to a magazine cover. A panorama should allow a user to explore content that highlights what is relevant to them. Highlights included on the Panorama control should serve as an entry point to further action. The focus of the panorama should be on a small set of tasks that are fresh, dynamic, and compelling. The panorama should not to be the standalone interaction of your whole application, nor should they be overwhelming, dense, or all encompassing.

Double-click on the Main screen in the Projects panel. Note that when you select the screens, the highlight in the SketchFlow Map panel changes and the .xaml page appears in the artboard.
Click on Assets at the bottom of the Tools panel to display a list of available controls. In the Search button at the top, type Panorama to see the selection limited to items with Panorama in their name. Select the Panorama Control and press OK. The Panorama control appears at the bottom of the Tools panel.
Make sure you have the LayoutRoot selected in the Objects and Timeline panel, and then double-click on the Panorama icon that is at the bottom of the Tools panel. The Panorama control is added to the Main Screen. Note: If the Panorama control is grayed out, you will need to select it from Assets again.
Right-click on Panorama on the Objects and Timeline and choose Auto Size > Fill to have the control fill the entire screen.
Turn down the arrow to the left of the Panorama control in the Objects and Timeline panel to see that the default Panorama has two sections (called PanoramaItems) that are ready to use. Next, you will add the additional PanoramaItems and resize the screen.