Как сделать несколько простых макетов и операций с использованием WPF с MVVM?

Question

Я только начинаю изучать WPF и MVVM и думаю, что мне нужно начать использовать MVVM.

У меня есть приложение winform, с главной панелью, слева от главной панели есть несколько кнопок, с правой стороны главной панели находится зона для размещения разных дочерних панелей (одна панель за один раз), после щелчка по основному виду формы будет вызван метод дочерней панели.

Можно ли использовать MVVM для выполнения такой компоновки и операций?

Answer 1

Конечно. Левая и правая панели будут связаны с одной ViewModel (это виртуальная машина, которая представляет текущую панель справа). Кнопки слева будут вызывать операции (возможно, с помощью команд) в ViewModel.

Когда активная виртуальная машина изменяется (т. Е. Когда справа отображается другая панель), контекст данных левой панели изменяется на новую виртуальную машину.

Возможно, вы захотите, чтобы какая-то контейнерная виртуальная машина представляла все окно, а несколько дочерних моделей представления представляли каждую из возможных панелей справа. Только один из них установлен в качестве активной панели в любой момент времени. Имеет ли это смысл?

Answer 2

Основная модель представления будет содержать свойства для

• ViewModelBase CurrentPage
• ICommand ChangePageCommand
• ObservableCollection<ViewModelBase> AvailablePages

Главный вид будет содержать

• ContentControl для размещения CurrentPage
• A области меню с левой стороны экрана, отображающей AvailablePages

• Нажатие на ссылку в области меню вызовет команду ChangePage, чтобы переключить CurrentPage на выбранный AvailablePage.

• DataTemplates будет использоваться для отображения ChildViews на основе того, что ChildViewModel отображается в CurrentPage

Поскольку основной ViewModel имеет доступдля всех доступных страниц он может при необходимости выполнять методы для ChildViewModels, и ChangePageCommand можно вызывать из ChildViewModels

. Я написал пример такого интерфейса здесь если вы 'Интересно, хотя он показывает только пример переключения CurrentPage, а не навигации по AvailablePages

Answer 3

Извините за недопонимание в первый раз.Я создал небольшой образец.Вот код XAML:

<Window x:Class="S4SO.ContainerBinding.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="520" Width="425">
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="80" />
      <RowDefinition Height="400" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="400" />
    </Grid.ColumnDefinitions>
    <ContentControl Content="{Binding ContentContent}" Grid.Row="1" Height="400" Width="400" />
    <StackPanel Orientation="Horizontal">
      <Button Content="Use button" Command="{Binding UseButton}" />
      <Button Content="Use Textbox" Command="{Binding UseTextbox}" />
    </StackPanel>
  </Grid>
</Window>

Окно привязано к модели представления. Для простоты я взял MVVMLight за основу:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows.Input;
using System.Windows.Controls;
using System.Windows;
using GalaSoft.MvvmLight.Command;
using GalaSoft.MvvmLight;

namespace S4SO.ContainerBinding {
  public class ViewModel : ViewModelBase {
    private object _ContentContent;

    public object ContentContent {
      get { return _ContentContent; }
      set {
        if ( _ContentContent.GetType() == value.GetType() )
            return;
        _ContentContent = value;
        RaisePropertyChanged( "ContentContent" );
      }
    }

    public ICommand UseButton { get; set; }

    public void CommandUseButton () {
      ContentContent = new Button() {
        Content = "A button",
        Width = 400,
        Height = 400,
        VerticalContentAlignment = VerticalAlignment.Center,
        HorizontalContentAlignment = HorizontalAlignment.Center
      };
    }

    public bool CanUseButton () {
      return !( _ContentContent is Button );
    }

    public ICommand UseTextbox { get; set; }

    public void CommandUseTextbox () {
      ContentContent = new TextBox() {
        Text = "Content here",
        Width = 400,
        Height = 400,
        VerticalContentAlignment = VerticalAlignment.Center,
        HorizontalContentAlignment = HorizontalAlignment.Center
      };
    }

    public bool CanUseTextbox () {
      return !( _ContentContent is TextBox );
    }

    public ViewModel () {
      _ContentContent = new Label() {
        Content = "Please choose content!",
        Width = 400,
        Height = 400,
        HorizontalContentAlignment = HorizontalAlignment.Center,
        VerticalContentAlignment = VerticalAlignment.Center
      };
      UseButton = new RelayCommand( () => CommandUseButton(), () => CanUseButton() );
      UseTextbox = new RelayCommand( () => CommandUseTextbox(), () => CanUseTextbox() );
    }

  }
}

Определенно не уровень производства, но он показывает направление инадеюсь, теперь больше, чем вы просили.Я использовал простые элементы управления и не стал связывать эти динамически созданные элементы управления.Связывание с помощью кода не так просто, как синтаксис связывания в XAML.Я оставлю это на ваше усмотрение, если это правильное направление.