Animate RadWindow opening like standard ChildWindow

[James]

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

[Miroslav Nedyalkov]

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]

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]

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]

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]

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]

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]

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]

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.

[Miroslav Nedyalkov]

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.

[André Luiz Ferreira Dias]

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]

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]

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