At PDC, a customer told me about a prototype he had built using several tab controls. He then asked me how one could include the content of different tabs of a tab control in the Microsoft Word documents that the SketchFlow Word Export creates – normally, only the tab set to visible at design time is shown.

It did not occur to me the moment that customer asked me, but there is actually a simple way to make multiple tabs of a screen appear in the Word output. The idea is very simple – just create a visual state for each tab you want to show, and edit the state so that the desired tab is shown.This method does not just work for tabs, but of course for any content that can be shown or hidden on a screen, as long as it can be made visible through a visual state.

Let’s walk through the steps for tabs:

1) Create a new SketchFlow project

2) Add a tab control to the screen and add tabs, so that you have for example 3 tabs

3) Put content into each tab so that you can distinguish the tabs

Now you have an app with a tab control. Run the prototype, and you should be able to switch between the tabs at runtime.

4) Go to the States panel and add a Visual State Group. Name it, for example, “VisibleTabs”.

5) Add one state for each tab, named for example Tab1, Tab2 and Tab3.

6) Select the Tab Control in the object tree

7) For each state in your state group, set the SelectedIndex property in the Common Properties category to the index for one of the tabs. For example, set it to 0 for Tab1, and to 1 for Tab2, and so on.

Note that Blend does not update the tab shown in the tab control on the design surface as you set the SelectedIndex. I have to find out why this is not happening.

Run the prototype and try out the navigation controls that appear in the navigation section of the SketchFlow player. The tabs should switch as you switch states if you set the SelectedIndex properly for each state.

9) If this worked out, you can go back to Blend and export a Word document.

As the Word export function creates a screenshot for every state, and each state contains a view of a different tab, you’ll get all tabs in the word printout.

Regards,
     CS