Navigate to a TabItem on a different screen in SketchFlow RRS feed

  • Question

  • Hi There

    I have a number of screens with TabControls and can navigate between the TabItems on these TabControls within the current screen using buttons.  Using a button, I would like to be able to select a TabItem in a TabControl on a different screen.  Even if I use XAML to modify the underlying code it will still not let me select a specific TabItem on a another screen.

    Many thanks for any assistance.



    Friday, April 2, 2010 9:18 AM

All replies

  • Are you using Blend 3 or the Blend 4 Beta release?  I know of a fairly easy way to do this with Blend 4, but a Blend 3 solution might take a bit of thinking.
    Friday, April 2, 2010 12:10 PM
  • Hi Kelly

    I'm using Blend 3 so if there is a way of doing it which won't take you too much time it would be appreciated ... I have no issues with going to another version if the general consenus is it's reasonably stable but for once I'm trying to focus on the end solution of my design rather than installing beta software - which is what I would normally do :-)

    best regards



    Friday, April 2, 2010 1:13 PM
  • Well, I have an answer.  I'm not proud of the answer and it actually revealed at least one bug, but I have an answer. :)  Okay, so really I have a way to make it happen.  Answer might be a strong word.

    First, make the screen with the tab control into a component screen.  You can do this on the map by right clicking and selecting the Make Into Component Screen option, or if you have already created the screen you can just make it one when you create it.

    Second, create states for each of the tab items.  That is, if you have 2 tabs named Personal and Business, you'd want to create a PersonalTabSelected state and a BusinessTabSelected state.  Note that you'll have to use the properties panel when you create these states.  Simply clicking on the artboard won't work.  Select the desired state, select the tab control, and edit "SelectedIndex" appropriately.  It's worth mentioning that "SelectedIndex" counts from 0, so if you want the first tab to be selected, input 0, for the second tab input 1, etc. 

    Next, create navigation screens for each of tabs named well for your sanity and drag the component screen onto each of these screens.  Right click on the component screen and choose to activate the appropriate visual state.  So on your "Personal" screen you'd want to activate the PersonalTabSelected state. 

    Since these states will default to being applied on Click and we want them to be applied always, you'll need to expand the instantiation of the component screen, find the ActivateState behavior, and edit the EventName in the properties panel to be "Loaded." 

    Finally (and here's the bug), it seems that our transitions between screens are blocking the application of a state on loading a screen.  Let's say you created a button on your start screen that navigated to the Personal screen I talked about above.  When you right clicked and choose Navigate to and the screen, a navigation connection appeared between those two screens.  Right click on that connection and choose Transition Style -> None. 

    I'm afraid that's the only non-developer way I can come up with to accomplish this in Blend 3. Perhaps someone else is sneakier than I am and knows a better non-programmatic way?  The bug I encountered has already been filed, as well as a suggestion that we find an easier way to do this in our next release. 

    I hope that helps, and let me know if you have any questions.

    Thanks!  Kelly 


    Friday, April 2, 2010 3:56 PM
  • I'm using Blend 4 . . . where is the "SelectedIndex" property?  Or is there a different way to do this in Blend 4?
    Tuesday, September 28, 2010 10:26 PM