How to animate CornerRadius property with four distinct values - "0,0,0,0" to "0,0,10,10" ?

Question

Hi all

I have to transition the CornerRadius property of a Border from value "0,0,0,0" to value "0,0,10,10" via an animation. This must be done directly in the XAML file w/o using code behind other than a ValueConverter or similar.

I think CornerRadius is animatable using an ObjectAnimationUsingKeyFrames - but how to animate just two of the four values of the CornerRadius structure ?

Thanks in advance !

Answer 1

Using key frames:

<ObjectAnimationUsingKeyFrames.KeyFrames>
    <DiscreteObjectKeyFrame KeyTime="0:0:1">
        <DiscreteObjectKeyFrame.Value>
            <CornerRadius BottomLeft="0" BottomRight="0" TopLeft="2" TopRight="2" />
        </DiscreteObjectKeyFrame.Value>
    </DiscreteObjectKeyFrame>

    <DiscreteObjectKeyFrame KeyTime="0:0:2">
        <DiscreteObjectKeyFrame.Value>
            <CornerRadius BottomLeft="0" BottomRight="0" TopLeft="5" TopRight="5" />
        </DiscreteObjectKeyFrame.Value>
    </DiscreteObjectKeyFrame>

    ...

</ObjectAnimationUsingKeyFrames.KeyFrames>

This is won't be a particularly nice animation though. Another approach is to create a custom animation derived from AnimationTimeline. MSDN page on Custom Animations: http://msdn.microsoft.com/en-us/library/aa970564.aspx#createcustomanimationtype.