Opening multiple views by clicking button using MV

Question

I want to use MVVM approach to achieve something like below:

I have a MainWindow where i have a 3 Buttons like: a)Customers b) Orders c) Sales

By clicking on button, it should open its respective window/usercontrol xaml with customers details,orders details,sales details.

I have tried everything but culdnt able to do so.

How to achieve this using MVVM pattern. Kindly provide the solution?

Thanks

Answer 1

You may want to look into the mediator pattern . Common implementations are the Messenger class in the MVVM Light Toolkit and Event Aggregation in PRISM.

One basic workflow using this pattern... Command is called on viewmodel1. Viewmodel1 registers some message with the mediator. Viewmodel2 subscribes to that message and does something in response (like creates new view2 or changes visual state of the view2).

Answer 2

I tried this using Sliverlight Naviagtion Application and MVVM

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

Pretty simple example. No frameworks involved as such.

But using a MVVM framework makes life easier for future use.

For MVVM and Prism framework check this link..

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

Answer 3

The answer depends on how you want your Customers, Orders and Sales views displayed. If you want them displayed in the same view, simply add a content control bound to a property in your main ViewModel.

For example, if you're using the MVVM Light Toolkit, your MainPage.xaml might look like...

<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>

And your MainPageViewModel would be...

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;
            }
        }
    }
}

This all assumes that you have created views and view models for Customers, Orders, and Sales, and modified the ViewModelLocator to include them.

At this point, if you need to display specific information in your child views, you can create a dependency property in them, and set that from your MainViewModel before you display the view.