canton7 / Stylet

A very lightweight but powerful ViewModel-First MVVM framework for WPF for .NET Framework and .NET Core, inspired by Caliburn.Micro.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

How to use MaterialDesign Transitioner with Stylet?

atresnjo opened this issue · comments

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);
        }
    }

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!

Glad you solved it!