Навигация с помощью MVVM

 

Навигация с помощью MVVM

Когда я только начинал работать с MVVM, я не понимал, как перемещаться между страницами. Я твердо верю в использование ViewModels для всего (кроме кода, специфичного для View), и что пользовательский интерфейс - это просто удобный интерфейс для ваших ViewModels. Я не хотел создавать кнопку на странице, которая имеет какой-либо код программной части для переключения страниц, и мне не нравилась идея распределения моей навигации по всем моделям просмотра.

В конце концов я понял, что решение было простым: мне нужна была ViewModel для самого приложения, которая содержала бы состояние приложения, например CurrentPage.

Вот пример, основанный на простом примере MVVM .

ViewModel

Обычно я называю ViewModel ApplicationViewModel или ShellViewModel, но вы можете называть это как хотите. Это стартовая страница приложения, и обычно это единственный объект страницы или окна в моем проекте.

Обычно он содержит

List<ViewModelBase> PageViewModels ViewModelBase CurrentPage ICommand ChangePageCommand

Вот пример ApplicationViewModel, который я бы использовал для простого примера MVVM .

public class ApplicationViewModel : ObservableObject {     #region Fields       private ICommand _changePageCommand;       private IPageViewModel _currentPageViewModel;     private List<IPageViewModel> _pageViewModels;       #endregion       public ApplicationViewModel()     {         // Add available pages         PageViewModels.Add(new HomeViewModel());         PageViewModels.Add(new ProductsViewModel());           // Set starting page         CurrentPageViewModel = PageViewModels[0];     }       #region Properties / Commands       public ICommand ChangePageCommand     {         get         {             if (_changePageCommand == null)             {                 _changePageCommand = new RelayCommand(                     p => ChangeViewModel((IPageViewModel)p),                     p => p is IPageViewModel);             }               return _changePageCommand;         }     }       public List<IPageViewModel> PageViewModels     {         get         {             if (_pageViewModels == null)                 _pageViewModels = new List<IPageViewModel>();               return _pageViewModels;         }     }       public IPageViewModel CurrentPageViewModel     {         get         {             return _currentPageViewModel;         }         set         {             if (_currentPageViewModel != value)             {                 _currentPageViewModel = value;                 OnPropertyChanged("CurrentPageViewModel");             }         }     }       #endregion       #region Methods       private void ChangeViewModel(IPageViewModel viewModel)     {         if (!PageViewModels.Contains(viewModel))             PageViewModels.Add(viewModel);           CurrentPageViewModel = PageViewModels             .FirstOrDefault(vm => vm == viewModel);     }       #endregion }

Это не скомпилируется сразу, потому что я внес в него некоторые изменения. Во-первых, все мои модели PageViewModel теперь наследуются от интерфейса IPageViewModel, поэтому они могут иметь некоторые общие свойства, такие как Name.

Я также создал новые модели HomeViewModel и HomeView, поскольку их сложно продемонстрировать, если у вас нет хотя бы двух страниц. HomeViewModel - это пустой класс, унаследованный от IPageViewModel, а HomeView - это просто пустой UserControl.

Кроме того, я добавил с до продукта сек ViewModel , так как он действительно имеет дело с несколькими продуктами, а не один.

Дополнительным преимуществом наличия ViewModel для управления состоянием приложения является то, что ее также можно использовать для обработки других объектов всего приложения, таких как текущий пользователь или сообщения об ошибках.

Вид

Мне также нужен ApplicationView для моей ApplicationViewModel. Он должен содержать какой-то вид навигации, который показывает список моделей PageViewModel, и щелчок по PageViewModel должен выполнять команду ChangePage.

Он также должен содержать элемент управления для отображения свойства CurrentPage, и я обычно использую для этого ContentControl. Это позволяет мне использовать DataTemplates, чтобы сообщить WPF, как рисовать каждую модель IPageViewModel.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 год 22 23 24 25 26 27 28 год 29 30 31 год 32

<Window x:Class="SimpleMVVMExample.ApplicationView"         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"         xmlns:local="clr-namespace:SimpleMVVMExample"         Title="Simple MVVM Example" Height="350" Width="525">       <Window.Resources>         <DataTemplate DataType="{x:Type local:HomeViewModel}">             <local:HomeView />         </DataTemplate>         <DataTemplate DataType="{x:Type local:ProductsViewModel}">             <local:ProductsView />         </DataTemplate>     </Window.Resources>       <DockPanel>         <Border DockPanel.Dock="Left" BorderBrush="Black" BorderThickness="0,0,1,0">             <ItemsControl ItemsSource="{Binding PageViewModels}">                 <ItemsControl.ItemTemplate>                     <DataTemplate>                         <Button Content="{Binding Name}"                                 Command="{Binding DataContext.ChangePageCommand, RelativeSource={RelativeSource AncestorType={x:Type Window}}}"                                 CommandParameter="{Binding }"                                 Margin="2,5"/>                     </DataTemplate>                 </ItemsControl.ItemTemplate>             </ItemsControl>         </Border>           <ContentControl Content="{Binding CurrentPageViewModel}" />     </DockPanel> </Window>

В этом примере я использую ItemsControl для отображения моих PageViewModels. Каждый элемент рисуется с помощью Button, а свойство Command Button привязано к ChangePageCommand.

Поскольку DataContext кнопки является PageViewModel, я использовал привязку RelativeSource, чтобы найти ChangePageCommand. Я знаю, что мое окно - это ApplicationView, а DataContext - это ApplicationViewModel, поэтому эта привязка ищет VisualTree для тега Window и привязывается к Window.DataContext.ChangePageCommand.

Также обратите внимание, что я помещаю DataTemplates в Window.Resources, чтобы сообщить WPF, как рисовать каждую модель IPageViewModel. По умолчанию, если WPF встречает в своем визуальном дереве объект, который не знает, как обрабатывать, он будет рисовать его с помощью TextBlock, содержащего метод .ToString () объекта. Определяя DataTemplate, я говорю WPF использовать определенный шаблон вместо TextBlock по умолчанию.

Если вы продолжаете использовать простой пример MVVM, я переместил ProductView из ResourceDictionary в UserControl, чтобы упростить эту задачу.

Запуск примера

Последнее, что нужно сделать, это изменить App.xaml, чтобы запускать ApplicationView и ApplicationViewModel вместо ProductView / ProductViewModel.

1 2 3 4 5 6 7 8 9 10 11 12

public partial class App : Application {     protected override void OnStartup(StartupEventArgs e)     {         base.OnStartup(e);           ApplicationView app = new ApplicationView();         ApplicationViewModel context = new ApplicationViewModel();         app.DataContext = context;         app.Show();     } }

Запустите проект, и вы должны увидеть что-то похожее на изображения ниже, которые быстро переключают CurrentPage при нажатии кнопок навигации.

Домой

Продукты

Резюме

Вот и все. Простой пример навигации с MVVM.

Вы можете скачать исходный код этого образца здесь .

Как только вы освоитесь с WPF, я бы порекомендовал изучить использование системы обмена сообщениями, такой как Messenger MVVM Light или EventAggregator Microsoft Prism, для трансляции команд ChangePage из любой модели ViewModel, чтобы вам не нужно было искать ApplicationViewModel для выполнения ChangePageCommand, однако это в другой день.

<< Назад - Простой пример MVVM
>> Далее - Связь между моделями просмотра

Оцените это:

 

 

 

 

 

 

79 Голосов

Поделись этим:

• Твиттер
• Facebook

Связанный

Простой пример MVVM8 мая 2011 г.В «МВВМ»

Навигация с помощью MVVM17 июля 2011 г.В «МВВМ»

Переключение между представлениями / пользовательскими элементами управления с помощью MVVM28 мая 2011 г.В «МВВМ»

Эта запись была опубликована в воскресенье, 18 декабря 2011 г., в 15:57 и размещена в MVVM , WPF . Вы можете следить за любыми ответами на эту запись через канал RSS 2.0 . Вы можете оставить отзыв или откликнуться со своего сайта.

Сообщение навигации

" Предыдущий постСледующее сообщение »