Changing frame in windows store app using MVVM

Question

I'm making a windows store app with c#. Inside my MainPage i have a frame. My button is binded to a RelayCommand, and when the user clicks the button, the frame should change AddMovie frame. Why wont it change the frame? My frame is binded to a Frame property in my viewmodel.

 private Frame _frame;

    public Frame Frame
    {
        get { return _frame; }
        set
        {
            _frame = value;
            OnPropertyChanged();
        }
    }

In Constructor

   _frame = new Frame();
   NavToCommand = new RelayCommand(() =>
    {
        Frame.Navigate(typeof(AddMovie));
    });

Please note, using View related stuff inside your ViewModel is a direct violation of MVVM principles — Tseng, Dec 19 '15 at 00:31
why is it a direct violation? can you send a link so i can read up on that particular violation? — Kasper Due, Dec 19 '15 at 08:49
MVVM is meant to separate presentation logic into ViewModels and have ViewModels decoupled and reusable amongst different platforms (i.e. have the same ViewModel work in Windows Store Apps, Silverlight, WPF and even a console application) and be easily testable. When you reference View related types in your ViewModels, you tightly couple you Viewmodel to a certain technology (i.e WPF or UWP) and you can't unit test this code anymore. It is very easy to violate this rule, if you have ViewModel and Views in the same project, as many view related types aren't as obvious as `Frame` — Tseng, Dec 19 '15 at 10:12
So to really enforce this separation, one has to put ViewModels into their own assembly which has no reference to Presentation.dll or other View related assemblies. Then the violation is more obvious. If you then would have tried to use `Frame` in your ViewModel, you would be able to because of "missing assembly reference" to Presentation.dll (WPF) or the Windows Store App reference and the violation becomes obvious and you know: "What I tried is wrong. I need to find another way" — Tseng, Dec 19 '15 at 10:14

score 0 · Answer 1 · answered Jan 04 '18 at 16:58

Make sure that the frame you are using for navigation in your MainPage is the same your app is using as the content for it's current window.

Usually you don't need to create a new frame in your MainPage. Instead it is set in the App.xaml.cs in a method that looks like this:

    /// <summary>
    /// Invoked when the application is launched normally by the end user.  Other entry points
    /// will be used such as when the application is launched to open a specific file.
    /// </summary>
    /// <param name="e">Details about the launch request and process.</param>
    protected override void OnLaunched(LaunchActivatedEventArgs e)
    {
        Frame rootFrame = Window.Current.Content as Frame;

        // Do not repeat app initialization when the Window already has content,
        // just ensure that the window is active
        if (rootFrame == null)
        {
            // Create a Frame to act as the navigation context and navigate to the first page
            rootFrame = new Frame();

            rootFrame.NavigationFailed += OnNavigationFailed;

            if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
            {
                //TODO: Load state from previously suspended application
            }

            // Place the frame in the current Window
            Window.Current.Content = rootFrame;
        }

        if (e.PrelaunchActivated == false)
        {
            if (rootFrame.Content == null)
            {
                // When the navigation stack isn't restored navigate to the first page,
                // configuring the new page by passing required information as a navigation
                // parameter
                rootFrame.Navigate(typeof(MainPage), e.Arguments);
            }
            // Ensure the current window is active
            Window.Current.Activate();
        }
    }

You can inject the rootFrame in your MainPage at that stage and use it for navigation purposes instead of creating a new instance.

However, if you would like to use Navigation with MVVM, check out how to implement the NavigationService pattern in my other answer here: https://stackoverflow.com/a/38362370/1008758

Changing frame in windows store app using MVVM

1 Answers1