canton7 / Stylet

A very lightweight but powerful ViewModel-First MVVM framework for WPF for .NET Framework and .NET Core, inspired by Caliburn.Micro.
MIT License
988 stars 143 forks source link

How to use MaterialDesign Transitioner with Stylet? #174

Closed atresnjo closed 3 years ago

atresnjo commented 3 years ago

Right now I have a ShellView, where I want to display a LoginView first, and once the login succeeds I want to display the MainView. I wish to use the MaterialDesign Transitioner for that. The issue right now is that the initial animation for the LoginView gets played properly, but no animation is played once I activate the MainViewModel. I assume the reason is that Stylet replaces the ContentControl View and the Transitioner has no knowledge of that and thus doesn't animate anything. Thanks for the great library, appreciate any tips! 👍

ShellView

 <Grid>
        <materialDesign:Transitioner SelectedIndex="0">
            <materialDesign:TransitionerSlide >
                <materialDesign:TransitionerSlide.OpeningEffects>
                    <materialDesign:TransitionEffect Kind="SlideInFromBottom"/>
                </materialDesign:TransitionerSlide.OpeningEffects>
                <ContentControl s:View.Model="{Binding ActiveItem}"/>
            </materialDesign:TransitionerSlide>
        </materialDesign:Transitioner>  
    </Grid>

ShellViewModel

    public class ShellViewModel : Conductor<Screen>
    {
        private readonly IViewModelFactory _viewModelFactory;
        private readonly IWindowManager _windowManager;

        public ShellViewModel(IViewModelFactory viewModelFactory, IWindowManager windowManager)
        {
            _viewModelFactory = viewModelFactory;
            _windowManager = windowManager;
            var loginModel = viewModelFactory.CreateLoginViewModel();
            base.ActivateItem(loginModel);
        }

        public void ShowSettingsDialog()
        {
            var settingsViewModel = _viewModelFactory.CreateSettingsViewModel();
            _windowManager.ShowDialog(settingsViewModel);
        }
    }

LoginViewModel

  public class LoginViewModel : Screen
    {
        private readonly IViewModelFactory _viewModelFactory;

        public LoginViewModel(IViewModelFactory viewModelFactory)
        {
            _viewModelFactory = viewModelFactory;
        }

        public async Task Login()
        {
            var mainModel = _viewModelFactory.CreateMainViewModel();
            ((ShellViewModel)Parent).ActivateItem(mainModel);
        }
    }
atresnjo commented 3 years ago

My code was right, but I misunderstood how to use the Transitioner. All I had to do was wrap the MainView with a TransitioningContent property. Thanks for the great library!

canton7 commented 3 years ago

Glad you solved it!