Never Argue With Stupid People

I have been putting together a SketchFlow demo, and I wanted to tie some states to a combobox control, and I had a little trouble. As I discovered, there are a few ways to do this, but I finally found one that was pretty simple. I am a NASCAR fan, so my demo consists of creating a ‘Fan Site’ utilizing social media and chat. I am going to use one page to demonstrate how I did accomplished this.

Creating the Project

Firs of all, I have a project consisting of a single page, the driver page. To create a SketchFlow project in Blend3, one does the following:

• Click File or Shift+F
• Click New Project or Ctrl+Shift+N
• Select WPF, then Sketchflow, and type in a name.

Next, we want to resize our workspace just a little. On the top right of the Design Workspace, open up the xaml by clicking on the button that says ‘<>’. In the xaml, change the size to width = 800 and height = 600. To go back to design view, click the button directly above the one that you clicked.

Creating States

You should just have a blank canvas in front of you for now. The first thing I want to do is create a state. Since I want to demo some of the functionality of the website, I’ll create two states representing two different drivers. In the upper left, find the tab that says “States”.

Now Click on the  small button to add a state group.

Double-Click where  it says VisualStateGroup and rename it to ‘Driver_States”. Then we want to add 2 states and rename them to be something meaningful to us.

Now it is time to add some content. I have the state ‘JG’ selected, and we can see in the upper left corner of the edit window that ‘JG state recording is on’. Now what we want to do is add some content. I went onto the web and pulled off a picture of Jeff Gordon and pasted it in. Then I created a title for the page, and added a textfield for content. Then I switched to the other state, and added a picture of Dale Jr, label, etc.

Creating the ComboBox

Now that I have some content, it is time to tie the states to a control. We need to select the root page. We select a ComboBox from under the assets tab and place it in our page.

I renamed my ComboBox to Names_Combo so I can identify it. It should be visible in the Objects and Timeline Window. If you don’t see this window, you can open it from the Window option in the top menu bar.

Right click on it, and find the option to add a ComboBoxItem. Rename the ComboBoxItem in the properties on the right side to Jeff_State, and change the content to ‘JeffGordon"’. Add another ComboBoxItem and rename it to ‘Dale_State’, and change the content to ‘Dale Jr’. You should have a combox that looks like this:

I stuck mine at the bottom, but you can put yours anywhere that you want.

Putting it Together

Now to tie things together. In the Objects and Time window, right-click on Jeff_State, and select ‘Activate State’. Select whatever state you had associated with this driver. Do the same thing for Dale_State, and select the state that you created for Dale Jr. Expand both of the selected states to show the ‘[ActivateStateAction]’ label and click on it.

In the properties window on the left side, you will see some information associated with the state. We need to change the EventName to ‘Selected’. It is towards the top of the list, under ListBoxItem. Do the same for both [ActivateStateAction] properties.

When you are done, build the project (CTRL+Shift+B), then run the project (F5). You should first see a blank page. Select one of the names from the combobox, and you should see the page change depending on which name is selected.

Where can I get Sketchflow?

Sketchflow is currently part of the Expression 3 RC, and the 60 day trial can be downloaded from the Microsoft Download Center.

Tweet This Post