How to use Transition Control inside canvas?

[Alfonso]

Dear expert,

We have a Canvas which contain several controls, after some interval(let's say 1 minites), the children of the Canvas will be removed and readd some other different controls to that Canvas. We really want to implement the transition effect at the time Children changing(Slide and zoom effect).

Can such transition effect be implemented use Transition Control?

I have seen the code of the demo http://demos.telerik.com/silverlight/#TransitionControl/FirstLook , and I have also seen the Transitions been used in TabControl
http://blogs.telerik.com/SilverlightTeam/Posts/10-05-12/using_transitions_with_radtransitioncontrol_and_transitionpresenter_in_radtabcontrol.aspx
But still very confused, seems there is no document to help to use this Transition Control.

Any advice on this? It will be great if you can provide some simple demo about this.I am sure this scenario will be used widespreadly.

Many thanks,

Alfonso

[Pana]

Hello Alfonso,

The RadTransitionControl uses transitions to display animation when its content changes. If you have canvases with somewhat content in them you will have to set the Content of the RadTransitionControl to be the new Canvas. Then the RadTransitionControl will display animation with transition from the old canvas to the new one.

Another idea would be to use the code from the blogpost, remove the tabs strip (so the RadTabControl will display content but will not have tabs on top) and then put the Canvases in different RadTabItems in the RadTabControl. Then changing the selected RadTabItem will display the Canvas in the new selected RadTabItem.

Greetings,
Panayot
the Telerik team

[Alfonso]

For the second approach, how to remove the tab strip? Thanks.

[Alfonso]

For the first approach, I switch two canvas as the content of the Transition Control, however, the mouse down event can only be fired when user click one of the children of the canvas(which is the current content of the Transition Control). Why will this happen? Thanks for your great help.

[Pana]

Hi Alfonso,

To remove the tab strip you will have to edit the RadTabControl in Blend. You will have to create a copy of the default style for the TabControl and edit its ControlTemplate.

As for the MouseEvent probably it gets fired because the Canvas is transparent and does not gets hits while its children does. You can try to set somewhat background on the canvas that will get hit by the hit test and fire the MouseDown event.

Regards,
Panayot
the Telerik team

[Ulrich Fiege]

hello, i have following situation. We are using a layout grid inside a mainpage. When side changes the
new side is added as child into mainpage. How can i use the transition when in radmenu a new page is selected and
loaded as child into mainpage?
thank you ...

[Konstantina]

Hi Ulrich,

You could refer to this blog post. In it is explained how you can use the TransitionControl to navigate between pages. You could refer to point 2.

Hope it will be useful. If you need further help please let us know.

Best wishes,
Konstantina
the Telerik team