通过使用 MVVM silverlight 方法单击按钮打开多个视图答案

【问题标题】：Opening multiple views by clicking button using MVVM silverlight approach通过使用 MVVM silverlight 方法单击按钮打开多个视图
【发布时间】：2010-06-23 09:36:42
【问题描述】：

我想使用 MVVM 方法来实现如下所示：

我有一个主窗口，其中有 3 个按钮，例如：a) 客户 b) 订单 c) 销售

通过单击按钮，它应该打开其各自的窗口/用户控件 xaml，其中包含客户详细信息、订单详细信息、销售详细信息。

我已经尝试了所有方法，但无法做到。

如何使用 MVVM 模式来实现这一点。请提供解决方案？

谢谢

【问题讨论】：

标签： silverlight mvvm

【解决方案1】：

答案取决于您希望如何显示客户、订单和销售视图。如果您希望它们显示在同一个视图中，只需在主 ViewModel 中添加一个绑定到属性的内容控件即可。

例如，如果您使用的是MVVM Light Toolkit，您的 MainPage.xaml 可能看起来像...

<UserControl x:Class="MvvmLight2.MainPage"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             Height="300"
             Width="300"
             DataContext="{Binding Main, Source={StaticResource Locator}}">

    <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Skins/MainSkin.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </UserControl.Resources>

    <StackPanel Orientation="Vertical">

        <StackPanel Orientation="Horizontal">
            <Button Content="Customers" Command="{Binding DisplayView}" CommandParameter="Customers" Margin="10" />
            <Button Content="Orders" Command="{Binding DisplayView}" CommandParameter="Orders" Margin="10" />
            <Button Content="Sales" Command="{Binding DisplayView}" CommandParameter="Sales" Margin="10" />
        </StackPanel>

        <ContentControl Content="{Binding CurrentView}" IsTabStop="False" Margin="10" />

    </StackPanel>
</UserControl>

而您的 MainPageViewModel 将是...

using System.Windows.Controls;
using GalaSoft.MvvmLight;
using GalaSoft.MvvmLight.Command;

namespace MvvmLight2.ViewModel
{
    public class MainViewModel : ViewModelBase
    {
        public MainViewModel()
        {
            DisplayView = new RelayCommand<string>(DisplayViewCommandExecute);
        }

        #region Commands

        public RelayCommand<string> DisplayView { get; private set; }

        #endregion

        #region CurrentView Property

        public const string CurrentViewPropertyName = "CurrentView";

        private UserControl _currentView;

        public UserControl CurrentView
        {
            get { return _currentView; }
            set
            {
                if (_currentView == value)
                    return;

                _currentView = value;
                RaisePropertyChanged(CurrentViewPropertyName);
            }
        }

        #endregion

        private void DisplayViewCommandExecute(string viewName)
        {
            switch (viewName)
            {
                case "Customers":
                    CurrentView = new CustomersView();
                    break;
                case "Orders":
                    CurrentView = new OrdersView();
                    break;
                case "Sales":
                    CurrentView = new SalesView();
                    break;
            }
        }
    }
}

这一切都假设您已经为客户、订单和销售创建了视图和视图模型，并修改了 ViewModelLocator 以包含它们。

此时，如果您需要在子视图中显示特定信息，您可以在其中创建一个依赖属性，并在显示视图之前从您的 MainViewModel 中设置它。

【讨论】：

感谢您的回复。我是这个 MVVM 设计模式的新手，所以我不知道在哪里放什么。以及如何调用命令和所有。还有在哪里设置什么窗口的数据上下文。请建议？谢谢
看看 MVVM Light Toolkit (mvvmlight.codeplex.com)。它为您的所有问题提供指导。
嗨，马特，如何修改 ViewModelLocator 来实现这一点？请建议？谢谢

【解决方案2】：

您可能想查看 mediator pattern 。常见的实现是 MVVM Light Toolkit 中的 Messenger class 和 PRISM 中的 Event Aggregation。

使用此模式的一个基本工作流程...在 viewmodel1 上调用命令。 Viewmodel1 向中介注册一些消息。 Viewmodel2 订阅该消息并做一些响应（例如创建新的 view2 或更改 view2 的视觉状态）。

【讨论】：

【解决方案3】：

我使用 Sliverlight 导航应用程序和 MVVM 进行了尝试

http://garfoot.com/blog/2010/09/silverlight-navigation-with-the-mvvm-pattern/

很简单的例子。不涉及任何框架。

但是使用 MVVM 框架可以让未来的使用变得更轻松。

对于 MVVM 和 Prism 框架，请查看此链接..

http://blog.roboblob.com/2010/10/24/introducing-prism-navigation-framework-for-silverlight-mvvm-applications/

【讨论】：