Animate a grid
Last post 05-08-2008 9:51 AM by Simbalight. 8 replies.
Sort Posts:
04-15-2008 11:58 AM
Animate a grid

I'm using Expression Blend 2.5 to do this:

I have a grid which contain some rows which gets its values from a webservice. I want to move it from one point of page to another point with a Storyboard. I have no problem until this point. I do it with creating storyboard and timeline to do it. The things that I can't find is to make the Grid smaller and smaller until it reach to the second point and its fade out.

 

Thanks

mazdak78

Joined on 04-01-2008
Posts 7
04-16-2008 11:32 PM
Marked as Answer
Re: Animate a grid

Hello, you need three animations. Move the Grid by animating its TranslateTransform property, make it smaller and smaller by animating its ScaleTransform property, and fade it out by animating its Opacity property. All three animations can be put in the same Storyboard. You already know how to animate TranslateTransfrom. Just move your object. To animate ScaleTransform, you can resize your object. Note if you resize the object in the normal design mode, Blend won't modify ScaleTransform. It'll modify the size of the object directly. But if you resize the object in the animation mode (with a Storyboard open), Blend will modify the ScaleTransform property. To animate Opacity, you need to explicitly set this property in the Properties pane.

shanaolanxing - Please mark the posts as answers if they help and unmark if they don't.

Yi-Lun Luo - MSFT

Joined on 10-29-2007
Posts 1,084
05-05-2008 6:45 PM
Re: Animate a grid

I'm not sure if this is the same thing or not, but I'm looking to actually animate GridLength.  I have a Grid with 2 cols and 2 rows.  On Click in each col, I'd like to animate the GridLength of that column's Height and Width to take up about 90% of the screen.  I would like the rest of the cols to shrink appropriately when the one particular column expands. 

Here is an example of what I'm trying to accomplish:  http://www.codeproject.com/KB/WPF/GridLengthAnimation.aspx?display=Print

The issue is that I've attempted to use that code for my Silverlight project but I'm getting errors finding classes like AnimationTimeline and Freezable.

Any thoughts/help would be greatly appreciated.

 

Thanks.

 

translucent

Joined on 04-17-2008
Posts 5
05-06-2008 9:50 AM
Re: Animate a grid

okay, so after searching more, i still haven't found anything that says it's possible to animate the Height and Width of Grid columns, just the Height and Width of the entire Grid.  Is this correct? 

 

translucent

Joined on 04-17-2008
Posts 5
05-07-2008 4:40 AM
Re: Animate a grid

Hi! I do not have a solution neither. I tried to animate the height of a GridRow and I was told that the animation won't work because the RowDefinition is not a FrameworkElement (http://silverlight.net/forums/p/15558/51456.aspx#51456).

Take a look at the SourceCode of GridSplitter. They change the width and height of rows and columns manually.

Simbalight

Joined on 03-18-2008
Posts 18
05-07-2008 8:36 AM
Re: Animate a grid

Look at this, it will provide you a solution: 

 http://dedjo.blogspot.com/2007/03/grid-animation.html

Simbalight

Joined on 03-18-2008
Posts 18
05-07-2008 3:20 PM
Re: Animate a grid

I've tried that before and received the following errors when I try to build:

Error 1 The type or namespace name 'AnimationTimeline' could not be found (are you missing a using directive or an assembly reference?)

Error 2 The type or namespace name 'AnimationClock' could not be found (are you missing a using directive or an assembly reference?)

Error 3 The type or namespace name 'Freezable' could not be found (are you missing a using directive or an assembly reference?)

I checked my using statements and they're all the same as what was in the original demo code. For example, AnimationTimeline is supposed to be a class in System.Windows.Media.Animation but my VS Intellisense is not finding it.  It's doing the same thing for AnimationClock and Freezable.

This was the original issue I was having.  Sorry I wasn't more clear.  Thanks.

 r

translucent

Joined on 04-17-2008
Posts 5
05-08-2008 8:21 AM
Re: Animate a grid

It's true. AnimatedTimeline is not included in the framework.

I tried subclassing the grid and add my own gridRowHeight-DependencyProperty that holds a double value (to be able to use DoubleAnimation) but I still receive the same exception. I think it's like stated before: It's not an UIElement and hence cannot be animated.

I'm still not giving up. My next try will be to build a UIElement-container around the grid and add the DependencyProperty there. I think this should work. Let's try... 

Simbalight

Joined on 03-18-2008
Posts 18
05-08-2008 9:51 AM
Re: Animate a grid

Tried it. Same result :(

And finally I found out why: Animating an own DependencyProperty is a Beta 2 feature (not implemented in Beta 1).

See: http://silverlight.net/forums/p/11896/38185.aspx#38185 

Since Beta 2 should be out this month I'll wait for it. 

Simbalight

Joined on 03-18-2008
Posts 18