Как внедрить представление MVVM в область оболочки UWP Page

Question

Я создаю приложение с навигационной панелью вверху и большими боковыми кнопками сенсорного экрана внизу для выполнения функций.Мне нужно, чтобы содержимое в средней области «Основное содержимое» изменялось в зависимости от «страницы», отображаемой на панели навигации.Я ищу способ использовать формат MVVM, и мои различные представления вводятся в эту основную область содержимого без необходимости изменять вид оболочки моего приложения, который содержит все навигационную панель и кнопки.

Я знаю, что у PRISM есть какой-то способ управления регионами, но мне было интересно, есть ли способ сделать это без внешней библиотеки или с MVVM-light, который я уже реализовал в другом месте.

ЭтоWindows 10 UWP Приложение, созданное для обновления 1809 создателей.Таким образом, я попробовал способ, который в настоящее время работает на WPF, в то время как у вас есть таблица данных для каждой ViewModel, и в этой таблице данных просто отображается UserControl, который является вашим View.

Затем, используя элемент ContentControl, я могу привязать ктекущий текстовый текст приложения, позволяющий ему переключаться между различными представлениями, просто меняя текстовый текст данных.

Я попробовал этот же метод на UWP, но безуспешно.Он просто отображает имя строкового объекта представления, которое я пытаюсь отобразить, вместо пользовательского элемента управления, который я определил.

(TestView.xaml) Я создал простой пользовательский элемент управления с именем "TestView"

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

(TestViewModel.cs) У меня также есть пустой ViewModel для представления

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) В ресурсах страницы у меня есть шаблон данных

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

(MainPage.xaml) У меня также есть привязка contentControl к текущему dataContext

<ContentControl Content="{Binding}"/>

(MainPage.xaml.cs) Наконец, в коде позади у меня есть кнопка, которая просто устанавливает контекст данных

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

В WPF он будет обновлять область сетки, в которой у меня есть Content Control, с помощью userControl, а в UWP - нет.Буду признателен за любую помощь в поиске способа сделать это!

Answer 1

Чтобы ответить на мой собственный вопрос, есть несколько способов сделать это! После много исследований я нашел способ, который лучше для моего конкретного применения. Тем не менее, решение @ Going-go по-прежнему отлично подходит для шаблонных рамок приложения!

Для очень простого и понятного способа вот что я сделал.

В моей ShellPage я определил сетку и разделил среднюю часть на части для моего основного контента, который является частью изменений.

(ShellPageView.xaml)

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

Тогда все, что вам нужно сделать в ViewModel, это иметь переменную CurrentPage, которая была привязана к представлению xaml. И измените то, на что это указывает.

(ShellPageViewModel.cs)

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

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

Я использую команды с другими кнопками навигации на странице оболочки для запуска этой команды. Если у вас есть другие вопросы о том, как использовать этот метод, дайте мне знать!

Answer 2

Взгляните на Windows Template Studio в Visual studio. Это должно охватывать конкретную проблему, на которую вы смотрите с навигацией и содержимым оболочки. https://marketplace.visualstudio.com/items?itemName=WASTeamAccount.WindowsTemplateStudio