CODEWITHSUNDEEP
c#xamlmvvmuwp
BWhelan
BWhelan

Reputation: 438

How to inject a MVVM view into a region of a shell UWP Page

I am creating an application that has a navigation bar along the top, and large touchscreen sidebar buttons down both sides to perform functions. I need the content in the middle "Main Content" area to change based on with "page" the navigation bar is displaying. I am looking for a way to be able to use an MVVM format, and have my different views injected into this main content area without having to change the shell view of my application which holds all the navigation bar and buttons.

I know PRISM has some sort of way to do region management but i was wondering if there is a way to do this without an external library or with MVVM-light which I have already implemented elsewhere.

This is a Windows 10 UWP Application built for the 1809 creators update. Thusfar, I have tried the way that currently works on WPF whereas you have a datatemplate for each ViewModel and in that datatemplate it simple displays a UserControl which is your View.

Then using a ContentControl element I can bind to the current datacontext of the application to have it switch between different views by purely changing the datacontext.

I tried this same method on UWP with no success. It simply displays the string object name of the View I am trying to display instead of the usercontrol I have defined.

(TestView.xaml)I created a simple userControl called "TestView"

    <Grid Background="Red">
        <Rectangle Margin="50" Fill="White"/>
    </Grid>

(TestViewModel.cs)I also have a empty ViewModel for the View

using GalaSoft.MvvmLight;
using GalaSoft.MvvmLight.Views;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace UIMockUp2.ViewModels
{
    public class TestViewModel : ViewModelBase
    {

    }
}

(MainPage.xaml)In the page resources I have a data template

    <Page.Resources>
        <DataTemplate x:DataType="data:TestViewModel" x:Key="TestTemplate">
            <views:TestView/>
        </DataTemplate>
    </Page.Resources>

(MainPage.xaml)I also have the contentControl bind to the current dataContext

<ContentControl Content="{Binding}"/>

(MainPage.xaml.cs)Finally in the code behind I have a button that just sets the data context

        private void TestView_Clicked(object sender, RoutedEventArgs e)
        {
            DataContext = new TestViewModel();
        }

In WPF it will then update the grid region that I have the Content Control in with the userControl but in UWP in doesn't. Any help would be much appreciated in finding a way to do this!

Upvotes: 2

Views: 912

Answers (2)

BWhelan
BWhelan

Reputation: 438

To answer my own question, there are several ways to do this! After MUCH exploring I have discovered a way that is better for my particular application. However, @Going-gone's solution is still great for a template framework of an app!

For a very simple and straightforward way here is what I did.

In my ShellPage, I defined a Grid and sectioned up the middle section to be for my Main Content which is the part the changes.

(ShellPageView.xaml)

        <Grid x:Name="Video" Grid.Row="1" Grid.Column="1">
            <Frame x:Name="MainContentRegion" Margin="5" Content="{Binding CurrentPage}"/>
        </Grid>

Then all you have to do in your ViewModel is have a CurrentPage variable that was binded to in the xaml View. And change what view that points to.

(ShellPageViewModel.cs)

        private Page _currentPage;
        public Page CurrentPage
        {
            get { return _currentPage; }
            set
            {
                _currentPage = value;
                RaisePropertyChanged();
            }
        }

        public void GoToSettingsPage()
        {
            CurrentPage = new SettingsView();
        }

I use commands with other navigation buttons on the shell page to trigger this command. If you have any other questions on how to use this method, let me know!

Upvotes: 1

Going-gone
Going-gone

Reputation: 292

Take a look at the Windows Template Studio in Visual studio. This should cover the specific issue you are looking at with navigation, and shell content. https://marketplace.visualstudio.com/items?itemName=WASTeamAccount.WindowsTemplateStudio

Upvotes: 2

Related Questions