Transition effect on demo site - sliding page effect

[Erdem Yilmaz]

Hi,

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,

[Kaloyan]

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">
            <telerik:RadFrameContainer.Clip>
                <RectangleGeometry Rect="50 0 800 800" />
            </telerik:RadFrameContainer.Clip>
   </telerik:RadFrameContainer>

Hope this helps.

Best wishes,
Kaloyan
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.

[Erdem Yilmaz]

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;
        }

Regards,

Erdem Yilmaz