Question

I’d like to animate the horizontal (and vertical) alignment of an element within a Grid. I’d also like the animation to be continuous (not discrete left, center, and right values).

<!-- starting state -->
<Grid>
  <Button 
    HorizontalAlignment="Left" 
    VerticalAlignment="Bottom"
    Content="Test"/>
  </Button>
</Grid>

<!-- ending state -->
<Grid>
  <Button 
    HorizontalAlignment="Right" 
    VerticalAlignment="Top"
    Content="Test"/>
  </Button>
</Grid>

How do I accomplish this? There doesn’t seem to be any animation type that supports this. Obviously this would be ideal:

<AlignmentAnimation From="Left" To="Right" />

Ideas?

Answer 1

You can’t animate that property since it is just an enum. It would need intermediate values to have for the animation to work, like double, Point, Color, Thickness, Size, etc..