Transition effect on demo site - sliding page effect

3 posts, 0 answers
  1. Erdem Yilmaz
    Erdem Yilmaz avatar
    4 posts
    Member since:
    Sep 2009

    Posted 24 Sep 2009 Link to this post


    I've been trying to find out how the beautiful transition effect was done on your main demo web site for Silverlight controls, than I found a thread under the name of "Change Exemples like DEMO" which a member of the telerik team (Kaloyan) replied with a source code (telerikqsftransition.rar) for this. I am trying out the source provided on the previous thread and realized that the transition effect occurs outside of the target frame.

    I have a very similar layout as your demo site, I am using 3 RadFrameContainers; top and left frame's are used for navigation buttons, treeview and the third one fills up the remaining space on the main page, where I wanted to configure the sliding page transition. All frames have transparent background so the main page background is visible for all.

    I have implemented the code attached for the previous thread exactly as it is with no modification, when navigating between pages, page that is sliding to the left is visible behind the transparent treeview frame docked to the left of the screen.

    Could you please point me in the right direction on how to achieve the exact layout and transition effect as your demo site where 2 transparent panels are side by side and the transition effect is isolated to only 2nd panel.

    Many Thanks,
  2. Kaloyan
    Kaloyan avatar
    920 posts

    Posted 25 Sep 2009 Link to this post

    Hello Erdem Yilmaz,

    As we are not very familiar with your code implementation, my advice is to use the Clip property of the RadFrameContainer or set a masked behind your Transparent grid.

     <telerik:RadFrameContainer x:Name="frameContainer" Width="500" Grid.Row="1">
                    <RectangleGeometry Rect="50 0 800 800" />

    Hope this helps.

    Best wishes,
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. DevCraft R3 2016 release webinar banner
  4. Erdem Yilmaz
    Erdem Yilmaz avatar
    4 posts
    Member since:
    Sep 2009

    Posted 28 Sep 2009 Link to this post

    Hi Kaloyan,

    Thank you very much for the reply, I have fixed the issue with your suggested resolution here is what I did to resolve using C#

    private void FrameFill_SizeChanged(object sender, SizeChangedEventArgs e)
                RectangleGeometry _Rect = new RectangleGeometry();
                _Rect.Rect = new Rect(0, 0, FrameFill.ActualWidth, FrameFill.ActualHeight);
                FrameFill.Clip = _Rect;


    Erdem Yilmaz
Back to Top