Materialdesigninxamltoolkit: Transitioner animation incomplete

[olegsavelos]

Hi there.
I am using the toolkit in one of my projects and lately came to a strange problem with transitioner control and hoped somebody could help me out figuring whats going on.
So i have a transitioner with two slides.
The current slide is changed by binding defined in its style like this

<md:Transitioner.Style> <Style TargetType="md:Transitioner"> <Setter Property="SelectedIndex" Value="1" /> <Style.Triggers> <DataTrigger Binding="{Binding UserLoginViewModel.IsUserLoggedIn}" Value="True"> <Setter Property="SelectedIndex" Value="0" /> </DataTrigger> <DataTrigger Binding="{Binding UserLoginViewModel.IsUserLoggedIn}" Value="Fase"> <Setter Property="SelectedIndex" Value="1" /> </DataTrigger> </Style.Triggers> </Style> </md:Transitioner.Style>

The animations works correctly in most cases but on some machines animation is triggered and not completed , so transition is stuck somewhere in between the change. The strange thing is that clicking on the UI causing the transition to start/continue. I dont have any other code to control the transition just the binding.

I am using the 2.4.1.1101 version of dll.
Any ideas?

[jespersh]

Because it says Faseinstead of False?

[olegsavelos]

Whoa it is indeed an typo :P But again this cant explain the need to click on the UI to make the animation to continue.
In any case thanks for pointing out the mistake , i will make changes and see if it resolves the problem.

[olegsavelos]

So after changes and fixes in bindings i still the the problem.
I was able to replicate the problem and it seems that when transition happens the going out item remains visible and disabled. I suppose IsHitTestVisible property is set false so you can actually interact with an item that transition just switched to.
I have recorded a video , not sure if i should post it here.

[Keboo]

@olegsavelos yes please post the video. And if you have a reproduction project that would be very helpful as well.

When the Transitioner does the animation it does keep the items visible, but changes the opacity down to 0.

[olegsavelos]

Well the way to replicate it is to make constant switch between transitions.
In some cases it might be caused based by binding value changes.
As i said in that cases clicking on UI will cause the animation to continue and finish which honestly i cant explain.

I dont have a project that i could easily share but you can see the effect by the end of this video
https://drive.google.com/file/d/1ilpFodUTXnZW-ZUvEnRWhJwHEQhE_09A/view

[alex6dj]

Ok I see a similar issue. I have a listbox with several item, and the transitioner binding to this. If I switch from item 1 to 2 and very fast select back 1 then it happen. In fact the item is there and I can write in a textbox for example, but is fully transparent.

Actually using MaterialDesignThemes 3.0.1, net 4.7.2 and vs 2019.

Any solution is welcome...

[alex6dj]

Another detail. I m observing changes in the observablecollection feeding the listbox, after added a new item I set as selected this new item, or when deleting select the first on the list. Well, in this case the transitioner gets an empty view.

I m using Rx.Net and after applying a delay between the listbox addition and the selection set everything work ok. The delay used can be as short as 15 ms.

[Keboo]

@alex6dj is that project public? I would love to have a sample the reproduces the issue.

[alex6dj]

Sorry, in fact no. I m try to prepare a blank project to see if I can reproduce the same problem.

[alex6dj]

Ok, the test project is ready.

Client.zip

[jespersh]

@Keboo it is also reproducible in the demo. To trigger it (let's call them TransitionerSlide A and TransitionerSlide B:

• Go forward - TransitionerSlide A begins sliding away and TransitionerSlide B begins to slide into view.
• Quickly before the transitions complete. Go back - TransitionerSlide B begins to slide away and TransitionerSlide A begins to slide into view.
• Now because TransitionerSlide A is still actually doing its sliding away transition, then on its completion then it

To do this in the demo, when you click the first transition, then quickly Tab then Enter.
To fix the demo (first two slides) this seems to be required: https://github.com/jespersh/MaterialDesignInXamlToolkit/commit/f5af2c3a83fdb56c5413811aad093e52c11d0d64

It might be required to look through all the Completed handlers and disable them if it is suddenly the current slide.