Animate Margin / Thickness

Nasenbaer picture Nasenbaer · Sep 3, 2011 · Viewed 17.4k times · Source

I just thought I already know how WPF and XAML Syntax works.... wrooong.

I got the message:

'WithEvents' variables can only be typed as classes, interfaces or type parameters with class constraints.

Please, do you know why this syntax is wrong?

I need to use the single value as double. It works later with an storyboard in codebehind.

Regards Error Screenshot

I just want to animate the Red rectangle with a storyboard in location and size. Perhaps XAML is the right solution anyway? Red rectangle

Answer

Louis Kottmann picture Louis Kottmann · Sep 3, 2011

To animate thickness, use a Storyboard like this (from msdn example):

<BeginStoryboard>
    <Storyboard>    
      <!-- BorderThickness animates from left=1, right=1, top=1, and bottom=1 to
      left=28, right=28, top=14, and bottom=14 over one second. -->
      <ThicknessAnimation
        Storyboard.TargetProperty="BorderThickness"
        Duration="0:0:1.5" FillBehavior="HoldEnd" From="1,1,1,1" To="28,14,28,14" />
    </Storyboard>
  </BeginStoryboard>

Actually, to animate any property that takes values as "w,x,y,z" you use a ThicknessAnimation

It seems to me that what you want to do is move the red rectangle to the right.

In that case, put the whole thing in a Canvas and use a DoubleAnimation on the red rectangle's position.

Either way, the error you're getting does not come from the small piece of code you provided, if you want to adress that, please provide use with more code.

Edit: since ThicknessAnimation seems to be not available on WP7, try this instead:

<BeginStoryboard>
    <Storyboard>    
      <DoubleAnimation
        Storyboard.TargetProperty="BorderThickness.Top"
        Duration="0:0:1.5" To="15" />
      <DoubleAnimation
        Storyboard.TargetProperty="BorderThickness.Left"
        Duration="0:0:1.5" To="25" />
    </Storyboard>
  </BeginStoryboard>