Search code examples
wpfmvvmcontentpresenter

Fade Out/In when ViewModel Changes


My WPF application's main window has a title bar/navigation area that persists for the lifetime of the application, and then there's the workspace area where most of the user interaction takes place. (It's all coded in the spirit of the MVVM pattern, and I might have an excessive aversion to code-behind :/ ) This workspace area is just a ContentPresenter, and it's content is bound to a MainWindowViewModel's property of type ISomeArbitraryVMInterface. In my code, this property is updated by raising a DomainEvent from wherever.

Having said all of that, when the DomainEvent is fired and the Content of the ContentPresenter is changed, I'd like the ContentPresenter to change its opacity via an animation--From the users perspective, I want it to look as if the current view fades out, the ContentPresenter updates with the new ISomeArbitraryVMInterface, then the new View corresponding to the new ISomeArbitraryVMInterface fades in.

My first thought was to have the ViewModel fire off an event whenever the Content property changes which I then realized I've already done with my DomainEvent implementation, but then I couldn't think of a way to make the View "listen" to the event and then fade-out/update/fade-in synchronously. Any insights into solving this type of problem would be much appreciated. If there's an elegant solution to be had, I'll post some code-snippets for posterity.


Solution

  • AnimatedTransition is what you might be after:

    Alternatively, you might be able to roll your own with the Visual State Manager and some Behaviours to trigger on your DomainEvent, go to the different fade states.

    Some other answers: