how to animate transition from one view to another when using data templates to associate view with view-model.

Question

Hello everybody,

i will post my source code i have at the moment and explain my problem after that.

this is the window where i want the transition to happen

<Window x:Class="MyApp.MainView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MyApp" Height="600" Width="800">
<StackPanel>
    <Button Content="View1" Command="{Binding View1Command}"/>
    <Button COntent="View2" Command="{Binding View2Command}"/>
    <ContentControl Content="{Binding MyContent}"/>
</StackPanel>

This is the associated View-Model

public class MainViewModel
{
    public RelayCommand View1Command{ get; private set;}
    public RelayCommand View2Command{ get; private set;}

    //INotifyPropertyChanged is implemented of course
    public ViewModelBase MyContent { get; set;}

    public MainViewModel()
    {
        View1Command = new RelayCommand(() => { MyContent = new ViewModel1();});
        View2Command = new RelayCommand(() => { MyContent = new ViewModel2();});
    }
}

In the app.xaml i used a data template to associate ViewModel1 with View1 and ViewModel2 with View2. That all works as expected. When clicking the buttons, the view changes, databinding works and everything is ok.

What i like to do now is to use an animation when the view changes.

what do i have to do to animate the transition between the two views with let's say a fade in animation for the new view. the old view disappears and the new one is faded in within one second.

hope you can help me.

best regards

pascal

p.s. if my approach with the data template does not make sense and animation is impossible with that approach i am open for other best practices to change from onw view to another. the solution i use is taken from the wpf demo app by karl shifflet, but i have no idea if that's the right solution for the thing i try to do.