Telerik Forums / UI for Silverlight Forum / Window /

Animate RadWindow opening like standard ChildWindow

Telerik UI for Silverlight
Resources Buy Try

13 posts, 1 answers

James

26 posts

Member since:
Oct 2008

Posted 02 Aug 2009 Link to this post

Hi Guys,

We know that there is no more WindowAnimation for RadWindow in the new Q2 release of the RadControls.

We have RadWindow with CanMinimize, NoPin, Width="Auto", Height="Auto", CloseMode="Close" (We have the Width and Height to be "Auto" because we want to resize the window automatically on expand/collapse of inside control of window)

What we want to achieve here is, Animate the RadWindow during "Opening" effect to look like standard ChildWindow's opening effect.

I have tried with Height and Width using storyboard to animate from 0 to ActualHeight and ActualWidth.
But with my approach the problem is that,
Window's height and width is not resizing automatically after storyboard animation.

I already have looked at telerik forums and the places where i should be looking.

I have spent more than enough time on this and i will appreciate if you could provide with a sample or code which would do the "Opening" animation to look like standard ChildWindow "Opening" animation.

Cheers,
James

Answer

Miroslav Nedyalkov

Admin

1718 posts

Posted 03 Aug 2009 Link to this post

Hello James,

It is true that animated Window looks better, but we decided to concentrate on more important features instead and to add animations after that.

The following code demonstrates how you can add animation to your window. It doesn't use the Width and Height properties as you want to keep them "Auto" but it uses RenderTransform.

                    <telerikNavigation:RadWindow x:Name="Window"          
                                         Header="HEADER"          
                                         Width="Auto"          
                                         Height="Auto"         
                                         Opened="Window_Opened">         
                <telerikNavigation:RadWindow.Resources>         
                    <Storyboard x:Key="Animation" Storyboard.TargetName="Transform">         
                        <DoubleAnimation From="0.1" To="1.0"         
                                Storyboard.TargetProperty="ScaleX" Duration="0:0:0.300" />         
                        <DoubleAnimation From="0.1" To="1.0" Storyboard.TargetProperty="ScaleY"         
                                Duration="0:0:0.300" />         
                    </Storyboard>         
                </telerikNavigation:RadWindow.Resources>         
                <telerikNavigation:RadWindow.RenderTransform>         
                    <ScaleTransform x:Name="Transform" />         
                </telerikNavigation:RadWindow.RenderTransform>         
                <Button Content="content" Width="150" Height="150" />         
            </telerikNavigation:RadWindow>         

                    var storyBoard = Window.Resources["Animation"] as Storyboard;         
            if (storyBoard != null)         
            {         
                storyBoard.Begin();         
            }         

If you have more windows that need to be animated you could create attached behavior that creates animation and starts it when the Window is opened.

Regards,
Miroslav Nedyalkov
the Telerik team

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

James

26 posts

Member since:
Oct 2008

Posted 03 Aug 2009 Link to this post

Hi Miroslav,

Thank you for your response.
It works great with window opening animation.
I was wondering, if i could get the same reversed animation on closing the window.

I have tried setting "From=1.0 To=0.0" and start animation on Closed event.

However, it doesnt seem to work for closing window.

Can you see why ??
Here is the animation, i "begin" on closed event

<Storyboard x:Key="ClosingAnimation" Storyboard.TargetName="Transform" >

<DoubleAnimation From="1.0" To="0.0" By="-0.01" Storyboard.TargetProperty="ScaleY" Duration="0:0:1.000" />

<DoubleAnimation From="1.0" To="0.0" By="-0.01" Storyboard.TargetProperty="ScaleX" Duration="0:0:1.000" />

</Storyboard>

Regards,
James
Miroslav Nedyalkov
Admin

1718 posts

Posted 06 Aug 2009 Link to this post

Hi James,

I've created a blog post that explains how do both animations. You can see it here: http://blogs.telerik.com/miroslavnedyalkov/posts/09-08-05/animating_the_radwindow_control_for_silverlight_and_wpf.aspx.

Kind regards,
Miroslav Nedyalkov
the Telerik team

Instantly find answers to your questions on the newTelerik Support Portal.
Check out the tipsfor optimizing your support resource searches.
André Luiz Ferreira Dias

4 posts

Member since:
Aug 2009

Posted 27 Oct 2009 Link to this post

Hi Miroslav,

   I would like to know how to do this using Generic.xaml of Silverlight 3, that is, I want to put these in storyboardies on Generic.xaml instead of creating an attached property. A solution based on C# code it's too pretty welcome.

   Thanks a lot,
   André Luiz.
Miroslav Nedyalkov
Admin

1718 posts

Posted 28 Oct 2009 Link to this post

Hello André,

I'm not sure I understand you correctly, but if you want to set this as a style for all windows in your application you can still use the Attached properties as they behave like properties of the RadWindow control. Could you please explain in more details why the suggested solution doesn't fit in your case?

Regards,
Miroslav Nedyalkov
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.
André Luiz Ferreira Dias

4 posts

Member since:
Aug 2009

Posted 28 Oct 2009 Link to this post

Hello Miroslav,

My scenario is: I have a class called DialogWindow, this class inherits from RadWindow and is located inside a DLL responsible for holds the controls specific to my application. On this DLL I have the Generic.xaml inside the Themes folder. So, I want to define a style on this Generic.xaml just like I'm doing for my other controls. How can I adapt your solution for this scenario?

Thanks a lot,
André Luiz
Miroslav Nedyalkov
Admin

1718 posts

Posted 28 Oct 2009 Link to this post

Hi André,

What you need to do is to put the class that holds the attached properties to the project with your custom controls and set the attached properties using the style for your DialogWindow class. Another way to do that is to add the functionality directly to the DialogWindow control instead of using attached propeties.

As there are different ways to implement this, I cannot point a way to do it without know how exactly you inherit from the RadWindow control. If you could send project that contains your custom DialogWindow and the generic.xaml I could add the animations functionality for you and send it back.

Greetings,
Miroslav Nedyalkov
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.
André Luiz Ferreira Dias

4 posts

Member since:
Aug 2009
Posted 28 Oct 2009 Link to this post

Hi Miroslav,

   The attached project follows this post. Please, rename it to .zip instead of .png in order to obtain to the project. I had to rename it to attach via post editor.

   Thanks a lot.
   André Luiz.

silverlightapplication3.png
Miroslav Nedyalkov
Admin

1718 posts
Posted 29 Oct 2009 Link to this post

Hi André,

There is a problem when you want to set a Storyboard using a Style, because of the name scopes - there is no way to point what object you want to animate. Of course this could be achieved, but it is not straight forward and I have a different suggestion - you could inherit the RadWindow control in XAML (like you do with the UserControl) and set your storyboards there. You could still use the Generic.xaml approach to set your default style if you need to, but the RenderTransform and the Storyboards should be set in one place because of the name scope problem I told you about. I edited your project to implement the pointed approach and I'm attaching it to this post. Hope this helps.

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

silverlightapplication3.zip
André Luiz Ferreira Dias

4 posts

Member since:
Aug 2009

Posted 29 Oct 2009 Link to this post

Hi Miroslav,

   I have used your approach and that works pretty fine. Thank you very much for the idea.

   André Luiz Ferreira Dias
   MCP - .Net Application Development Foundation.
suresh

30 posts

Member since:
Apr 2011

Posted 01 Jun 2011 Link to this post

Hi there,
I am using Q2 2010 Net 3.5 telerik version.I cant understand your examples for radwindow animation.Are you using any dll for that code. Because I cant use RadWindow x: etc and RadWindow.Resources.I have to use radwindow animation in my application.Please provide me valuable solution.

Thanks,
suresh
Yana
Admin

5037 posts

Posted 03 Jun 2011 Link to this post

Hello suresh,

This forum thread is for RadWindow for Silverlight, I guess that you're using RadWindow for ASP.NET AJAX. Please post your questions in the asp.net forum here.

All the best,
Yana
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Animate RadWindow opening like standard ChildWindow

James

Miroslav Nedyalkov

James

Miroslav Nedyalkov

André Luiz Ferreira Dias

Miroslav Nedyalkov

André Luiz Ferreira Dias

Miroslav Nedyalkov

André Luiz Ferreira Dias

Miroslav Nedyalkov

André Luiz Ferreira Dias

suresh

Yana