Why does Implicit.HideAnimations shift an Element on the X axis?

Question

Why does Implicit.HideAnimations shift an Element on the X axis?

Hong 1,526

The following code works great for showing the Grid

<Grid
    Width="300"
    Visibility="{x:Bind bShow, Converter={StaticResource BooleanToVisibilityConverter}}"
    Background="#8111"
    Padding="5">
    <animations:Implicit.ShowAnimations>
        <animations:TranslationAnimation Duration="0:0:1" From="0, 200, 0" To="0" ></animations:TranslationAnimation>
        <animations:OpacityAnimation Duration="0:0:3" From="0" To="1.0"></animations:OpacityAnimation>
    </animations:Implicit.ShowAnimations>
    <animations:Implicit.HideAnimations>
        <animations:ScalarAnimation Target="Translation.Y" Duration="0:0:1" From="-200"  To="0"/>
    </animations:Implicit.HideAnimations>

However, it shifts the Grid to the right when hiding the Grid. I have to add the following to get around it:

<animations:ScalarAnimation Target="Translation.X" Duration="0:0:1" From="-150"  To="-150"/>

Could anyone shed some light on this?

Anonymous

2021-02-08T03:24:24.453+00:00

Could you please share the complete XAML and code snippet about how to reproduce the behavior you are getting? When running your code and change the Visibility of the grid, there is no movement on the X axis. I could not understand your issue with the code you provided. And could you please tell me what exactly is the expected behavior you want as well?
Hong 1,526 Reputation points

2021-02-08T03:29:57.287+00:00

Thank you for looking into it.
I meant when bShow changes from false to true, it works exactly as expected. However, when bShow changes from true to false, it shifts horizontally. I will try to make a separate page to reproduce this.
Anonymous

2021-02-08T07:12:40.507+00:00

Do you mean you want to have an animation that moves the Grid on the X axis when bShow changes from true to false?
Hong 1,526 Reputation points

2021-02-08T12:58:13.317+00:00

Nope. I actually want exactly the opposite - no movement on the X axis.
Anonymous

2021-02-09T03:14:38.607+00:00

Well, that's interesting because when running the code on my side, the grid did not move on the X-axis. If I change the bShow from Visible to Collapsed, the changes happen on the Y-axis. Could you please share the complete XAML code snippet that could reproduce this behavior?
Hong 1,526 Reputation points

2021-02-10T02:40:25.353+00:00

@Anonymous Could you check out [this project for debugging][1]?
The key file is the [Xaml one][2].
If you run the UWP head, you will see what I mean by shift on the X axis.
Anonymous

2021-02-10T06:42:03.217+00:00

I have to say that Microsoft Q&A does not support questions about the Uno project which is a third-party platform. I tried to narrow down the issue by using the XAML code from UserControlDebug control directly in a blank UWP project. But the gird in the MainPage still moves on the Y-axis.
Could you please make a simple demo in a blank UWP app?
Hong 1,526 Reputation points

2021-02-10T15:03:48.777+00:00

The UWP head of the solution has little to do with Uno Platform.
Anyway, here is [the pure UWP version of the debug project][1].
Anonymous

2021-02-11T06:01:15.53+00:00

Sorry to make you confused but it is the forum policy that we do not handle questions related the third-party platform.

After getting the sample, I could reproduce the issue and find out what causes it. Please check my answer.
Hong 1,526 Reputation points

2021-02-11T08:36:24.337+00:00

Understood.

1 answer

Your answer

Anonymous

2021-02-08T03:24:24.453+00:00

Could you please share the complete XAML and code snippet about how to reproduce the behavior you are getting? When running your code and change the Visibility of the grid, there is no movement on the X axis. I could not understand your issue with the code you provided. And could you please tell me what exactly is the expected behavior you want as well?
Hong 1,526 Reputation points

2021-02-08T03:29:57.287+00:00

Thank you for looking into it.
I meant when bShow changes from false to true, it works exactly as expected. However, when bShow changes from true to false, it shifts horizontally. I will try to make a separate page to reproduce this.
Anonymous

2021-02-08T07:12:40.507+00:00

Do you mean you want to have an animation that moves the Grid on the X axis when bShow changes from true to false?
Hong 1,526 Reputation points

2021-02-08T12:58:13.317+00:00

Nope. I actually want exactly the opposite - no movement on the X axis.
Anonymous

2021-02-09T03:14:38.607+00:00

Well, that's interesting because when running the code on my side, the grid did not move on the X-axis. If I change the bShow from Visible to Collapsed, the changes happen on the Y-axis. Could you please share the complete XAML code snippet that could reproduce this behavior?
Hong 1,526 Reputation points

2021-02-10T02:40:25.353+00:00

@Anonymous Could you check out [this project for debugging][1]?
The key file is the [Xaml one][2].
If you run the UWP head, you will see what I mean by shift on the X axis.
Anonymous

2021-02-10T06:42:03.217+00:00

I have to say that Microsoft Q&A does not support questions about the Uno project which is a third-party platform. I tried to narrow down the issue by using the XAML code from UserControlDebug control directly in a blank UWP project. But the gird in the MainPage still moves on the Y-axis.
Could you please make a simple demo in a blank UWP app?
Hong 1,526 Reputation points

2021-02-10T15:03:48.777+00:00

The UWP head of the solution has little to do with Uno Platform.
Anyway, here is [the pure UWP version of the debug project][1].
Anonymous

2021-02-11T06:01:15.53+00:00

Sorry to make you confused but it is the forum policy that we do not handle questions related the third-party platform.

After getting the sample, I could reproduce the issue and find out what causes it. Please check my answer.
Hong 1,526 Reputation points

2021-02-11T08:36:24.337+00:00

Understood.

Answer 1

Anonymous

Hello,

Welcome to Microsoft Q&A!

However, it shifts the Grid to the right when hiding the Grid.

According to the result I got after testing, the behavior you got is caused by the HorizontalAlignment property of the UserControl object. If I move it, the Grid will not move on the X-axis when the bShow changes to false. I've confirmed it with the sample you provided. It looks like the UserControl's position is recalculated when it is going to begin the hidden animation due to the HorizontalAlignment property.

Like this:

   <local:MyUserControl1  
            x:Name="ucDebug"  
                VerticalAlignment="Bottom"/>

Thank you.

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Hong 1,526 Reputation points

2021-02-11T08:46:14.023+00:00

Thank you for the answer.
Without HorizontalAlignment="Center", the UserControl occupies the entire width. If I set the width of the Grid in the UserControl (not the width of the UserControl in MainPage), the Implicit.HideAnimations does not work. Could you shed some light on this?
Anonymous

2021-02-12T03:22:17.777+00:00

Two ways that might be help. 1) You could set the width of the UserControl in MainPage. 2) You could set the Margin property of the UserControl in MainPage like Margin="300,0,300,0"
Hong 1,526 Reputation points

2021-02-12T03:32:46.077+00:00

Thank you for the tips. The UserControl is in a library shared by lots of apps. Specifying the margin or width of the UserControl in an app's Xaml page is out of the question because the UserControl can change at any moment and I do not want to adjust the code of every app using the UserControl after its change.
Anonymous

2021-02-12T07:33:22.147+00:00

Well, currently I'd suggest you create native translation and opacity animations on your own instead of Implicit.ShowAnimations. This might be an issue with the Implicit Animation of the toolkit and you could submit this in the GitHub issues.
Hong 1,526 Reputation points

2021-02-15T16:39:14.1+00:00

Thank you. I have submitted the issue per your suggestion.
Anonymous

2021-02-16T02:23:20.303+00:00

Yes, please follow the issue on Github to see if the toolkit team has a better solution for your scenario.

Share via

Why does Implicit.HideAnimations shift an Element on the X axis?

1 answer

Your answer