Bottom Silverlight Animated Margin

Question

I'm currently working with animation, I have a grid that hides the search bar, clicking on the search button moves the grid down, revealing the search options.

I have this part of the work, the problem is that the grid view occupies all the free space, so when the search bar is hidden, it looks normal, but if the search bar is visible, then the bottom of the grid is disconnected from the page.

I am trying to fix this using a field, when a search bar is detected, the bottom edge is enlarged, reducing its overall size and stopping it at the bottom of the screen.

I read several topics that indicated that animation over fields was not possible. I managed to partially process it with the following code.

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="Grid"> <DiscreteObjectKeyFrame KeyTime="0" Value="0"/> <DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="170"/> </ObjectAnimationUsingKeyFrames> 

The problem is that this will apply the margin to all sides of the object, I would just like to apply the margin to the bottom. Unfortunately, the code below does not work

Is there any work for this, or will I have to find another way to move the bottom of the grid.

thanks

Answer 1

The Margin property is of type Thickness , so you must set its components as follows:

  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="Grid"> <DiscreteObjectKeyFrame KeyTime="0" Value="0"/> <DiscreteObjectKeyFrame KeyTime="0:0:0.5"> <DiscreteObjectKeyFrame.Value> <Thickness>3,7,5,9</Thickness> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> 

A better alternative would be to position your control with TranslateTransform , so you can simply change the X or Y component. I personally think that positioning the control over its edge is a bit of a hack!