Search code examples
c#windowsxamlwindows-phone-8uwp

Canvas moving animation in Windows Phone 8.1


I can not solve a problem with canvas smoothly moving out of screen border in windows phone 8.1, although the Opacity property changes nicely.

<Storyboard x:Name="moveOut">
   <DoubleAnimation
        Storyboard.TargetProperty="Opacity"
        Storyboard.TargetName="CanvCalling"
        From="1.0" To="0.0" Duration="0:0:1" />
</Storyboard>

I have solved it for primitives (ellipse, square) using PointAnimation, but it doesn't works for canvas.

previously it worked using ThicknessAnimation and Margin property but it doesn't works in UWP and windows phone 8.1

Briefly:

I need to change Margin property smoothly using animation and I would like to do it in XAML,

OR

I suspect that this is achieved through RenderTransform


Solution

  • Solved using CompositeTransform in TargetProperty XAML below...

                <Canvas.RenderTransform>
                <CompositeTransform />
            </Canvas.RenderTransform>
    
            <Canvas.Resources>
                <Storyboard x:Name="moveTo">
                    <DoubleAnimation
            Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
                        Storyboard.TargetName="CanvCalling"
            From="0" To="200" Duration="0:0:1" RepeatBehavior="Forever"
            />
                </Storyboard>