c# - WPF 使用 MVVM 模式在 View 中导航

Question

我正在使用 MVVM 模式构建我的第一个 WPF。在这个社区的帮助下，我设法创建了我的模型、我的第一个 ViewModel 和 View 。现在我想为设计基本应用程序布局界面的应用程序添加一些复杂性。我的想法是至少有 2 个 subview 和一个主视图，并在多个 XAML 上将它们分开:

• Main.XAML
• Products.XAML
• Clients.XAML

Main 将有一个菜单和一个空间来加载 subview (产品和客户)。现在遵循 MVVM 模式， View 之间的所有导航逻辑都应该写在 ViewModel 上。所以我的想法是拥有 4 个 ViewModel:

• MainViewModel
• ProductsViewModel
• ClientsViewModel
• NavigationViewModel

所以 NavigationViewModel 应该包含 subview 模型的集合？事件 View 模型对吗？

所以我的问题是:

1) 如何使用 MVVM 模式在主视图上加载不同的 View (产品、​​客户)？

2) 如何实现导航 View 模型？

3) 如何控制打开或事件 View 的最大数量？

4) 如何在打开的 View 之间切换？

我进行了大量搜索和阅读，但找不到任何使用 WPF 进行 MVVM 导航的简单工作示例，可在主视图中加载多个 View 。许多然后:

1) 使用我现在不想使用的外部工具包。

2) 将创建所有 View 的所有代码放在一个 XAML 文件中，这似乎不是一个好主意，因为我需要实现近 80 个 View !

我走的路对吗？任何帮助，尤其是一些代码，我们将不胜感激。

更新

因此，我按照@LordTakkera 的建议构建了一个测试项目，但卡住了。这是我的解决方案的样子:

我创造:

• Two Models (Clients and Products)

• One MainWindow and two wpf user controls(Clients and Products) XAML.

• Three ViewModels (Clients, Products and Main ViewModel)

然后我将每个 View 的 dataContext 设置为对应的 viewModel。之后，我像这样使用 ContentPresenter 创建 MainWindow 并将其绑定(bind)到 View 模型的属性。

MainWindow.XAML

<Window x:Class="PruevaMVVMNavNew.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="519" Width="890">    
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="150"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="80"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="20"/>
    </Grid.RowDefinitions>        
    <Border Grid.Column="0" Grid.ColumnSpan="2" Background="AntiqueWhite" ></Border>
    <Border Grid.Row="1" Grid.RowSpan="2" Background="AliceBlue"></Border>
    <Border Grid.Row="1" Grid.Column="1" Background="CadetBlue"></Border>                
    <ContentPresenter Grid.Row="1" Grid.Column="1" x:Name="ContentArea" Content="{Binding CurrentView}"/>        
    <StackPanel Margin="5" Grid.Column="0" Grid.Row="1">            
        <Button>Clients</Button>
        <Button>Products</Button>
    </StackPanel>
</Grid>

这也是来自 MainWindow 的 View 模型:

class Main_ViewModel : BaseViewModel
    {
        public Main_ViewModel()
        {
            CurrentView = new Clients();
        }

        private UserControl _currentView;
        public UserControl CurrentView
        {
            get
            {
                return _currentView;
            }
            set
            {
                if (value != _currentView)
                {
                    _currentView = value;
                    OnPropertyChanged("CurrentView");
                }
            }
        }

    }

所以这个加载默认客户端 View 看起来像这样(这恰到好处!):

所以我想我需要一种方法将左侧的按钮与某个 viemodel 相关联，然后将它们与 Main viewModel 的 CurrentView 属性绑定(bind)。我该怎么做？

更新 2

根据@LordTakkera 的建议，我以这种方式修改我的主要 viewModel:

class Main_ViewModel : BaseViewModel
    {
        public ICommand SwitchViewsCommand { get; private set; }

        public Main_ViewModel()
        {
            //CurrentView = new Clients();
            SwitchViewsCommand = new RelayCommand((parameter) => CurrentView = (UserControl)Activator.CreateInstance(parameter as Type));
        }

        private UserControl _currentView;
        public UserControl CurrentView
        {
            get
            {
                return _currentView;
            }
            set
            {
                if (value != _currentView)
                {
                    _currentView = value;
                    OnPropertyChanged("CurrentView");
                }
            }
        }
    }

我使用 RelayCommand 而不是 DelegateCommand，但我认为它的工作方式相同。当我按下按钮时执行命令并且类型参数字符串正常但我收到此错误:

翻译:值不能为空。参数名称:类型。建议使用New关键字创建对象实例我不知道将 New 关键字放在哪里。我试过 CommandParameter 但它不会工作。任何想法？谢谢

更新 3

在收到所有建议和帮助以及大量工作之后，这是我最终的导航菜单和我的应用程序界面的基础。

Answer 1

我不确定您是否需要一个单独的“导航” View 模型，您可以轻松地将它放入主视图模型中。无论哪种方式:

为了分离您的“子” View ，我会在您的“主” View 上使用一个简单的 ContentPresenter:

<ContentPresenter Content="{Binding CurrentView}"/>

实现支持属性的最简单方法是将其设为 UserControl ，尽管有些人会争辩说这样做违反了 MVVM(因为 ViewModel 现在依赖于“View”类)。你可以使它成为一个对象，但你失去了一些类型安全。在这种情况下，每个 View 都是一个 UserControl。

要在它们之间切换，您将需要某种选择控件。我以前用单选按钮做过这个，你可以像这样绑定(bind)它们:

<RadioButton Content="View 1" IsChecked="{Binding Path=CurrentView, Converter={StaticResource InstanceEqualsConverter}, ConverterParameter={x:Type views:View1}"/>

转换器非常简单，在“Convert”中它只是检查当前控件是否是一个参数类型，在“ConvertBack”中它返回一个新的参数实例。

public class InstanceEqualsConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        return (parameter as Type).IsInstanceOfType(value);
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        return (bool)value ? Activator.CreateInstance(parameter as Type) : Binding.DoNothing;
    }
}

绑定(bind)到组合框或其他选择控件将遵循类似的模式。

当然，您也可以使用 DataTemplates(带有选择器，不幸的是我以前没有做过)并使用合并的字典(允许单独的 XAML)将它们加载到您的资源中。我个人更喜欢用户控制路线，选择最适合您的路线!

这种方法是“一次一个 View ”。转换为多个 View 会相对容易(您的 UserControl 成为用户控件的集合，在转换器中使用 .Contains 等)。

要使用按钮执行此操作，我会使用命令并利用 CommandParameter。

按钮 XAML 看起来像:

<Button ... Command={Binding SwitchViewsCommand} CommandParameter={x:Type local:ClientsView}/>

然后你有一个委托(delegate)命令(教程 here)运行来自转换器的激活代码:

public ICommand SwitchViewsCommand {get; private set;}

public MainViewModel()
{
    SwitchViewsCommand = new DelegateCommand((parameter) => CurrentView = Activator.CreateInstance(parameter as Type));
}

这超出了我的想象，但应该非常接近。让我知道进展如何!

如果我提供任何进一步的信息，请告诉我!

更新:

回答您的问题:

1. 是的，每次您按下按钮时，都会创建一个新的 View 实例。您可以通过按住 Dictionary<Type, UserControl> 轻松解决此问题具有预先创建的 View 和索引。就此而言，您可以使用 Dictonary<String, UserControl>并使用简单的字符串作为转换器参数。缺点是您的 ViewModel 与它可以呈现的 View 类型紧密耦合(因为它必须填充所述字典)。

2. 只要没有其他人持有对它的引用(想想它注册的事件处理程序)，就应该处置该类。

3. 正如您所指出的，一次只创建一个 View ，因此您不必担心内存问题。当然，您是在调用构造函数，但这并不昂贵，尤其是在我们往往有大量 CPU 空闲时间的现代计算机上。与往常一样，性能问题的答案是“对其进行基准测试”，因为只有您才能访问预期的部署目标和整个源代码，才能了解实际性能最佳的内容。