Click here to Skip to main content
15,900,907 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Could someone please help me out with a problem? Basically I have a WPF window with a Grid as layout control inside grid a Panel and 2 buttons <close> and <new>.
I want to animate the panel in such a way when user click on Close button within ½ second panel collapse behind Close button and stay hidden, and similarly when user click on New button same panel animate and expands to restore all the elements to add new record.

PROBLEM

I have created animation that works fine as long as user does not change the size of window, as soon as user maximize window my animation does not finish (at Location of close button) but finishes somewhere middle of window.

Can someone guide me how can I make my animation to always finish where ever the close button is on screen?

ADDED CODE:
HTML
<Storyboard x:Key="ClosePannel">
               <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty=
                                                               "(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
                                                               Storyboard.TargetName="rect">
                    <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                    <EasingDoubleKeyFrame KeyTime="0 .2" Value="0.168"/>
               </DoubleAnimationUsingKeyFrames>
               <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty=
                                                               "(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" 
                                                               Storyboard.TargetName="rect">
                    <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                    <EasingDoubleKeyFrame KeyTime="0 .2" Value="0.135"/>
               </DoubleAnimationUsingKeyFrames>
                  <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty=
                                                                  "(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" 
                                                                  Storyboard.TargetName="rect">
                        <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                        <EasingDoubleKeyFrame KeyTime="0 .2" Value="240.8"/>
                  </DoubleAnimationUsingKeyFrames>
                  <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty=
                                                                  "(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" 
                                                                  Storyboard.TargetName="rect">
                       <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                       <EasingDoubleKeyFrame KeyTime="0 .2" Value="69.6"/>
                  </DoubleAnimationUsingKeyFrames>
            </Storyboard>
Posted
Updated 30-Dec-11 9:44am
v2
Comments
Wendelius 30-Dec-11 14:16pm    
Can you post the storyboard
mahmas01 30-Dec-11 15:13pm    
<storyboard x:key="ClosePannel">
<doubleanimationusingkeyframes storyboard.targetproperty="
" "(uielement.rendertransform).(transformgroup.children)[0].(scaletransform.scalex)"
="" storyboard.targetname="rect">
<easingdoublekeyframe keytime="0" value="1">
<easingdoublekeyframe keytime="0:0:0.2" value="0.168">

<doubleanimationusingkeyframes storyboard.targetproperty="
" "(uielement.rendertransform).(transformgroup.children)[0].(scaletransform.scaley)"=""
="" storyboard.targetname="rect">
<easingdoublekeyframe keytime="0" value="1">
<easingdoublekeyframe keytime="0:0:0.2" value="0.135">

<doubleanimationusingkeyframes storyboard.targetproperty="
" "(uielement.rendertransform).(transformgroup.children)[3].(translatetransform.y)"=""
="" storyboard.targetname="rect">
<easingdoublekeyframe keytime="0" value="0">
<easingdoublekeyframe keytime="0:0:0.2" value="240.8">

<doubleanimationusingkeyframes storyboard.targetproperty="
" "(uielement.rendertransform).(transformgroup.children)[3].(translatetransform.x)"=""
="" storyboard.targetname="rect">
<easingdoublekeyframe keytime="0" value="0">
<easingdoublekeyframe keytime="0:0:0.2" value="69.6">

[no name] 30-Dec-11 15:09pm    
Hook in to minimize/maximize/resize events and nerve your applicaton's users waiting on finishing your animation. Keep in mind some (I bet most) of the users will hate you for that.

I definitively hate importunately splash screens / animations

Regards.
mahmas01 30-Dec-11 15:23pm    
Hi idle63, thanks for your reply, problem is not that user has to wait for animation to finish; I am looking for a solution for the rectangle to always animate like closing and merging in close button. I need to change the values I know that I have to change the X & Y values of TranslateTransform to match the location of button but can work out how.
[no name] 30-Dec-11 15:41pm    
Hi thanks for reply will check again. Good chance that I react to much...sorry.

Regards.

1 solution

HTML
<Storyboard x:Key="ClosePannel">
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty=
                                           "(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
                                           Storyboard.TargetName="rect">
				<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
				<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.168"/>
			</DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty=
                                           "(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" 
                                           Storyboard.TargetName="rect">
				<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
				<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.135"/>
			</DoubleAnimationUsingKeyFrames>
             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty=
                                            "(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" 
                                            Storyboard.TargetName="rect">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="240.8"/>
            </DoubleAnimationUsingKeyFrames>
             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty=
                                            "(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" 
                                            Storyboard.TargetName="rect">
             	<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
             	<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="69.6"/>
             </DoubleAnimationUsingKeyFrames>
        </Storyboard>
 
Share this answer
 
v2
Comments
Wendelius 30-Dec-11 15:45pm    
Instead of posting a solution you can use the "Improve question" link to modify the original question.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900