CODEWITHSUNDEEP
c#windowsxamlwindows-phone-8uwp
cybergogic
cybergogic

Reputation: 33

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

Upvotes: 2

Views: 80

Answers (2)

cybergogic
cybergogic

Reputation: 33

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>

Upvotes: 1

Michael Puckett II
Michael Puckett II

Reputation: 6749

You can use a LayoutTransform but it's not as clean as RenderTransform as far as smoothness... I would almost always suggest a RenderTransform if you can and this should be about as smooth as it gets for XAML animation.

When you use LayoutTransform you literally move the object to the new specs and with RenderTransform you simply move the visual side of the object. For me, LayoutTransform is best used when you're having trouble with clipping or you need to change the size / location of other elements during animation. For example... If you use a RenderTransform / ScaleTransform / Scale.X and Y and increase the item size it will just grow visually. Interaction with it will grow also so all user input events will work like they visually should. If you use the same as LayoutTransform the control won't just increase in size but all the object around it will move or shrink or whatever is needed to accommodate the new size. A good example would be a grid row with Height set to Auto. If you RenderTransform the object bigger the row won't change in height to accommodate but if you use a LayoutTransform the row will change to accommodate the new size.

Hope this helps.

Upvotes: 1

Related Questions