Metro Themes and Transitions

[Mark Jakes]

Hello

Our application uses RadTransitions between major parts of the application from a menu control.

<telerik:RadTransitionControl Content="{TemplateBinding Content}" Background="Transparent">
    <telerik:RadTransitionControl.Transition>
        <telerik:SlideAndZoomTransition x:Name="thisSlide" MinZoom ="1" SlideDirection="RightToLeft"/>
    </telerik:RadTransitionControl.Transition>
</telerik:RadTransitionControl>

To start the transition, a new UserControl is instantiated and, to give good visual representation to the user, the palette for the new control is changed.

public partial class ViewMainDashboard : UserControl
{
    public ViewMainDashboard()
    {
        MetroColors.PaletteInstance.AccentColor = Colors.Orange;
        InitializeComponent();
    }
}

This works well except that momentarily the outgoing page palette is also changed as it is leaving the stage, this is not the desired effect.

I realise that the 'PaletteInstance' is a singleton reference and global.  However, is there a way to create a palette that is only applicable to the user control that is in use, i.e. one that isn't global?  

Many thanks

Mark.

[Pana]

Hi,

There is no way you could separate the two instances to use different palette instances. However once the transition starts it captures an image of the old content and the actual transition animates that image and the new content. If your RadTransitionControl uses a SlideAndZoom animation then you should be able to start the transition, wait for some time for the animation to start, the image to be captured and set the colors before the new content appear.

Other option would be to also animate the palette colors instead of instantly setting them. It would require you to create a storyboard, add ColorAnimations that would target the: MetroColors.PaletteInstance, property: AccentColor and instead of instantly swapping the color - animate it over time.

Greetings,
Pana
the Telerik team

[Mark Jakes]

Hello Pana

Thanks for the reply.

I solved it thanks to your cue regarding the transition control taking a snaphot image.  In fact, it was a simple case of changing the colours in the 'OnLoaded' event of the usercontrol because at this point the control has already loaded into the the transition container which has already started the animation.

Now it works as expected.

Easy when you know how, thanks for the clues.  :-)

Regards

Mark.