Animate RadWindow opening like standard ChildWindow

13 posts, 1 answers
  1. James
    James avatar
    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
  2. Answer
    Miroslav Nedyalkov
    Admin
    Miroslav Nedyalkov avatar
    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.
  3. DevCraft banner
  4. James
    James avatar
    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

     

  5. Miroslav Nedyalkov
    Admin
    Miroslav Nedyalkov avatar
    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.
  6. André Luiz Ferreira Dias
    André Luiz Ferreira Dias avatar
    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.
  7. Miroslav Nedyalkov
    Admin
    Miroslav Nedyalkov avatar
    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.
  8. André Luiz Ferreira Dias
    André Luiz Ferreira Dias avatar
    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
  9. Miroslav Nedyalkov
    Admin
    Miroslav Nedyalkov avatar
    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.
  10. André Luiz Ferreira Dias
    André Luiz Ferreira Dias avatar
    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.
  11. Miroslav Nedyalkov
    Admin
    Miroslav Nedyalkov avatar
    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.
  12. André Luiz Ferreira Dias
    André Luiz Ferreira Dias avatar
    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.

  13. suresh
    suresh avatar
    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
  14. Yana
    Admin
    Yana avatar
    4554 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
Back to Top
DevCraft banner