Is it possible to implicitly animate an element's size using the XAML Composition extensions?

536 Views Asked by At

I'm attempting to achieve automatic animation of size changes for elements. I think there's some interplay of Composition and XAML I don't fully understand.

First, I tried using the XAML extensions from the toolkit:

<TextBox x:Name="TextBoxControl" VerticalAlignment="Center" Width="50">
    <animations:Implicit.Animations>
        <animations:Vector3Animation Target="Size" Duration="0:0:0.5"/>
    </animations:Implicit.Animations>
</TextBox>

...and hoped that it would automatically animate the TextBox as it expanded to accommodate more text. No dice there. I then attempted to wrap the TextBox in an outer Grid, attach the Implicit Animation to the Grid instead. No change.

Next, I tried animating the TextBox Visual's Size by hand:

var visual = ElementCompositionPreview.GetElementVisual(TextBoxControl);
var newSize = new Vector2(visual.Size.X + 20f, visual.Size.Y);
visual.Size = newSize;

Bizarrely, this resulted in a The Parameter is incorrect exception when attempting to set the new Size.

Finally, I tried changing the TextBox UIElement's Width instead of it's Visual Width:

TextBoxControl.Width += 20;

...which didn't animate either.

Finally, in a fit of frustration, I tried to animate the SCALE doing the same thing:

XAML

<TextBox x:Name="TextBoxControl" VerticalAlignment="Center" Width="50">
    <animations:Implicit.Animations>
        <animations:Vector3Animation Target="Scale" Duration="0:0:0.5"/>
    </animations:Implicit.Animations>

C#

var visual = ElementCompositionPreview.GetElementVisual(TextBoxControl);
visual.Scale = new Vector3(visual.Scale.X + 0.1f, visual.Scale.Y + 0.1f, visual.Scale.Z);

...which worked exactly as expected. When I ran the C# code, the TextBox's scale increased, and was animated.

So is there a way to achieve automatic animation of size changes for UI elements by using implicit animations?

0

There are 0 best solutions below