Animating Margin Bottom Silverlight

问题

I'm currently working with animations, I have a grid hiding a search panel, clicking on the search button moves the grid down revealing the search options.

I have this part working the problem is that the grid view takes up all available space so when the search bar is hidden it looks fine but if the search bar is visible then the bottom of the grid goes off the page.

I've been trying to fix this using a margin, when the search bar is revealed the bottom margin is increased, reducing its total size and stopping it going off the bottom of the screen.

I've read a few topics that state that animations on margins are not possible. I've managed to get it partially working 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 applies a margin to all sides of the object, I would only like to apply a margin to the bottom. Unfortunatly the code below doesnt work

Is there a work around for this, or would I have to find another way to move the bottom of the grid up.

Thanks

回答1:

The Margin property is of type Thickness, so you should be able to set its component parts 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 might be to position your control using a TranslateTransform, this way you can simple change the X or Y component. I personally think positioning a control via its margin is a bit of a hack!

来源：https://stackoverflow.com/questions/6507954/animating-margin-bottom-silverlight

标签

silverlight

xaml

animation

margin