Metro Themes and Transitions

3 posts, 1 answers
  1. Mark Jakes
    Mark Jakes avatar
    27 posts
    Member since:
    Feb 2010

    Posted 01 Dec 2011 Link to this post

    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.
  2. Answer
    Pana
    Admin
    Pana avatar
    748 posts

    Posted 02 Dec 2011 Link to this post

    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
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
  3. Mark Jakes
    Mark Jakes avatar
    27 posts
    Member since:
    Feb 2010

    Posted 02 Dec 2011 Link to this post

    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.
Back to Top