This is a migrated thread and some comments may be shown as answers.

Animate RadWindow opening like standard ChildWindow

12 Answers 408 Views

Window

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

James asked on 03 Aug 2009, 01:05 AM

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

12 Answers, 1 is accepted

Accepted

answered on 03 Aug 2009, 11:49 AM

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.

answered on 04 Aug 2009, 02:18 AM

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>

Regards,
James

answered on 28 Oct 2009, 12:04 PM

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.

answered on 28 Oct 2009, 12:57 PM

silverlightapplication3.png

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.

answered on 29 Oct 2009, 11:38 AM

silverlightapplication3.zip

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.