[Solved] Change Exemples like DEMO

[Christian]

Hello,
I start to use your demo and I like How you change the différents examples.  Where is the command which do That?

Thanks

[Kaloyan]

Hello Christian,

Attached you can find a small application demonstrating the transition animation between pages.

Regards,
Kaloyan
the Telerik team

Instantly find answers to your questions on the newTelerik Support Portal.
Check out the tipsfor optimizing your support resource searches.

[Erdem Yilmaz]

Hi Kaloyan,

I've been trying to find out how the transition effect was done on your demo site also, than I come across this thread and downloaded the source code you've attached for the original question.

Althought attached code is working fine as it is, I am having issues when trying to implement it on my project where I have exactly the same layout as your demo site. I have a top grid where I have my navigation menu items, left grid where there is a treeview control, and finally a RadFrameContainer which fills the remaining space.

All of the grids(Left,Top,Fill) have transparent background where they show the "MainPage" background image.

I am try to use the navigation / transition effect to load other pages inside the RadFrameContainer on the MainPage but when the animation start you can still see the page that is moving to left behind the transparent Left Grid (Treeview etc).

Could you help me understand, or provide me an example source code as before to achieve the similar layout to your demos site with 2 panels next to each other and the transition effect only isolated inside the 2nd panel.

Many Thanks,

Erdem Yilmaz

[Kaloyan]

Hi 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