Test sketchflow for Windows Phone 7

For more information about downloading and installing the sketchflow template in expression blend, see my previous blog "sketchflow for Windows Phone 7 in expression blend".

This article assumes that you have installed this template and created a WP7 prototype design project. The following interface is displayed, including

 

Press F5 first and you will find that the prototype is displayed in the browser, instead of the Windows Phone 7 emulator you may think. In fact, it is a theme with WP7 added (image) silverlight sketchflow, such as the initial running result

Among them, only the beating start application and the three buttons below are useful, and the others are static images. To make you feel that you are using Windows Phone 7. click the icon and you will see the text in the design interface, as shown in:

 

Let's take a look at the sketchflow map generated by default. The green background represents the component, and the blue background represents the XAML page. We can see that there are many connections between each square block, that is the navigation between pages.

 

Let's add a page by ourselves and implement some animations. Move the mouse over the app Info screen. Several small buttons are displayed. Select "Create a connected screen" to create a new screen linked to the current screen.

 

Note that the newly added page is a standard page with auto size, that is, the default 640*480. We know that Windows Phone 7 supports two screen resolutions, that is, 480*800 and 320*400. Obviously, we need to reset the size. Refer to the size of other pages.

 

We add the phoneui to the newly added page, that is, the application.ProgramThe outer skin can be found in asset.

 

How do we navigate to the newly added page? Add a button in APP Info screen, right-click, select navigateto, and select the newly created page, for example:

 

Note: If you run the program at this time, the following button does not work, because the component has not been added to the new page, move the mouse to screen1, select connect an existing screen"

 

You can try it out and make full use of your creative power!