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.

Linking states to ListItems

In this next section, you will connect the states you just created with the ListItems that are in the Main screen.

Start by making the first PanoramaItem visible. Select the MainMealPanoItem and choose Visible in the Appearance pane, located in the Properties panel.
If the Main panel does not appear right away, choose Project > Build Project to refresh the view.

You can connect a selected item to a state change by binding a conditional behavior to the ListBox.
Select the Assets panel and navigate down to the Behaviors category. In Behaviors select the GoToState action and drag it to the ListBox located in the Grid inside the MainMealPanoItem. Note that you can drag right out to the artboard, or to the item listed in the Objects and Timeline panel.
In the Properties panel, in the Trigger section, change the EventName to SelectionChanged.
Expand the Conditions section and click on the Add condition button.
Change the top Data Store to Value and then click on the Advanced options button to the right and select Data Binding.
When the Create Data Binding dialog box appears, click on the Element Property tab and expand the LayoutRoot and Panorama controls. Continue expanding until the ListBox in the MainMealPanoItem is visible and select it.
With ListBox selected, choose SelectedIndex : [Int32] from the Properties side of the Create Data Binding dialog box, and click OK. The value appears as -1, as there is not selection at this time.

When working with selected items in a ListBox, keep in mind that the first item is at a value of 0 (zero), the second item is 1, and so on. In this next example, you will have the selection of the first item Chicken, activate the state change and show only the ChickenState.
Change the bottom Data Store to Value and then type the value of 0 (zero) into the TextBox to the right. Essentially you are indicating that if the first ListItem is selected; activate the state that you are selecting in the Common Properties pane.
In the Common Properties pane, select ChickenState for the StateName.
Press F5 to test your project. When the player window appears, select Chicken to see the TopPicks data change to the ChickenState. Now you will apply the same behavior to show the BeefState
Return to Expression blend and select the GoToState action listed under the listbox in the MainMealPanoItem and right-click on it; choose Copy.
Select the listbox directly above and right-click and choose Paste. You now have two GoToState actions. You will make some minor changes to one of them so that you can activate the BeefState.
Select the bottom GoToState action and locate Conditions pane. Change the value of 0 (zero) to 1. This represents the second item in the list, Beef.
In the Common Properties pane, change the Statename to BeefState.
Press F5 to test your project.