Question

I have a mvvm(model view viewmodel) silverlight application that has several views that need to be loaded into ContentControls (i made it all in expression blend). What i dont know how to do is, for example, to load one view (user control) in one content control by clicking a button from another view that is in another content control. To make it easier to understand the problem, i need to do something similar to this:

http://www.codeproject.com/KB/silverlight/BlendableVMCom.aspx

with that difference that child1 and child2 are supposed to be loaded into theirown content controls by clicking Call child1 or call child2 buttons.

and example would be appreciated. Thanks in advance!

Answer 1

This example is very simplified, but I think you now how to adjust it to your application.

The main view:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Border x:Name="commandsView">
        <Button Content="Call view 1" Command="{Binding CallView1Command}" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="5" />
    </Border>
    <Border x:Name="displayedView" Grid.Column="1">
        <ContentControl Content="{Binding CurrentView}" />
    </Border>
</Grid>

I haven’t created separated views as user controls, here are just borders, which can be replaced by real views.

Different view models for different views in code behind:

this.commandsView.DataContext = new CommandsViewModel();
this.displayedView.DataContext = new DisplayedViewModel();

First view model conains the command which sends the message to another view model:

public class CommandsViewModel
{
    public CommandsViewModel()
    {
        this.CallView1Command = new RelayCommand(() => 
          Messenger.Default.Send<View1Message>(new View1Message()));
    }

    public RelayCommand CallView1Command { get; set; }

}

public class View1Message : MessageBase
{

}

To make this example work, download the MVVM Light library.

The second view model receive the message and creates a view for its property:

public class DisplayedViewModel : ViewModelBase
{
    public DisplayedViewModel()
    {
        Messenger.Default.Register<View1Message>(this, obj => 
            this.CurrentView = new TextBlock { Text = "Pressed the button 1 and now here is the view 1" });
    }

    private object currentView;

    public object CurrentView
    {
        get { return currentView; }
        set
        {
            currentView = value;
            RaisePropertyChanged("CurrentView");
        }
    }
}

Again, it is possible to use clr object instead of controls and apply data templates in xaml, but there will not be enough space to provide all the resulting code.

So that is all, the main idea is a some kind of event aggregator, which is the Messenger class in this particular case.

Without the MVVM Light it will require more code:

public partial class MainPage : UserControl
{
    public MainPage()
    {
        InitializeComponent();

        var events = new GlobalEvents();
        this.commandsView.DataContext = new CommandsViewModel(events);
        this.displayedView.DataContext = new DisplayedViewModel(events);
    }
}

public class GlobalEvents
{
    public event EventHandler View1Event = delegate { };

    public void RaiseView1Event()
    {
        View1Event(this, EventArgs.Empty);
    }
}

/// <summary>
/// Commands which call different views
/// </summary>
public class CommandsViewModel
{
    public CommandsViewModel(GlobalEvents globalEvents)
    {
        this.CallView1Command = new DelegateCommand(globalEvents.RaiseView1Event);
    }

    public DelegateCommand CallView1Command { get; set; }
}

/// <summary>
/// Model where views are changed and then displayed
/// </summary>
public class DisplayedViewModel : INotifyPropertyChanged
{
    public DisplayedViewModel(GlobalEvents globalEvents)
    {
        globalEvents.View1Event += (s,e) =>
            this.CurrentView = new TextBlock { Text = "Pressed the button 1 and now here is the view 1" };
    }

    private object currentView;

    public object CurrentView
    {
        get { return currentView; }
        set
        {
            currentView = value;
            RaisePropertyChanged("CurrentView");
        }
    }


    public event PropertyChangedEventHandler PropertyChanged;

    protected void RaisePropertyChanged(string propertyName)
    {
        if (this.PropertyChanged != null)
            this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }

}

In this example you must change the DelegateCommand class for something different. Other code will work for everyone.