Transition to a New Canvas or a New Page? RRS feed

  • Question

  • Forgive my ignorance on this topic, since I am brand new to Silverlight and Expression. Blend  The Silverlight RIA I am attempting to author contains a main page with a map of the United States with each State (I will capitalize the "S" when referring to states such as Arkansas, Texas, etc. as opposed to a component state) masked and hyperlinked to transition to a new page, i.e. when you click on Texas, a new Texas page loads.

    My question is How do I create transition effects such as fading in/out when going between pages?  The tutorials I have read have shown how to do this with canvases on the same page.  However, if I do this (correct me if I'm wrong), I will have to have 50 canvases for each State, making the load time unbearable.

    In order to maximize load time for the Silverlight application, should I have separate pages for each State, or load the canvases to transition upon an event?

    Thursday, May 13, 2010 10:20 PM

All replies

  • I think what you might want to do is create a custom usercontrol that can display a subpage (implemented as a usercontrol), which can implement nice transitions between subpages, and also have an option to display nothing.  That way your map page can also include the "host control".  When a user clicks on a State, you could use a behavior to have that load the appropriate subpage into the "host control".


    Does that make sense?

    Friday, May 14, 2010 12:38 PM
  • Could you use a Frame control to display the site to which the user navigates when he clicks on a state?

    A solution might go as follows:

    Build HyperlinkButtons out of each of your States and arrange them in a canvas for example. Build this inside a Page. This Page should be the "Home" page for a navigation, so you could name this page e.g. "Home.xaml".

    Add a Frame control to MainPage, and when your site is loaded first time, navigate to page "Home.xaml".

    Then use the Navigate method of your Frame in Mainpage to navigate to the corresponding site when the user clicks on a State (which is a hHypelinkButton as I mentioned).

    The key thing to implement a Transition is to edit the template of the Frame control through replacing the default ContentPresenter in the visual trre of the Frame control template with a TransitioningContentControl as it is described in one of the articles below:



    Then, edit the template of the TransitioningContentControl to implement the custom Transition itself. Do do this, you have to edit the XAML directly. (Using Blend for this special task of adding or editing a VisualStates to the TransitiongContentControl is quite confusing, in parts impossible and not to recommend). Search for example for the VisualState "DefaultTransition" in the XAML of the TransitiongContentControl you are about to edit, delete the content of the Storyboard of this VisualState and replace it with the XAML of your custom Transistion.

    Here are some examples I contributed to the Expression Gallery for page navigations with custom Transistion. This might help additionally:






    Monday, September 13, 2010 8:31 AM