Linking part of a view to a different viewmodel with a button in WinRT

Question

I am trying to make a program in winRT that uses the MVVMlight framework. In the application i have a part that should remain constant and a part that should have its content linked to a specfic viewmodel. I will give an little example below of what i am trying to say:

So when i press the Grey button the content should be grey and when i press the red button the content should be red, however the rest of the page should remain constant.

The only way i could think of now is to put multiple datatemplates in my view and only fill the list to which they are bound when i need them caussing them to appear when filled and dissapear when cleared, but i think this will make the view a bit of a mess and i want to know if there arent any other ways to do this?

What i would really like to achieve is when i click a button (grey or red) that there will be a view with a correspoding viewmodel that will be loaded into the contentarea, the contentarea beying the square that is colored red/grey atm.

It should be something like i found in this tutorial but for WinRt cause i cant get this tutorial to work in WinRt.

http://www.codeproject.com/Articles/323187/MVVMLight-Using-Two-Views

Answer 1

Try something like this, a wpf window with a content control that binds to a usercontrol property on the view model:

<Window
    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" 
    x:Class="MainWindow"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
    DataContext="{Binding Main_VM, Source={StaticResource Locator}}"
    Background="#FF1D1D1D"
    WindowState="Maximized" 
    WindowStyle="None"   
    WindowStartupLocation="CenterScreen" ResizeMode="CanResizeWithGrip"
    MinHeight="750" MinWidth="1050">

        <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" MinHeight="700" MinWidth="1000">
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"/>

            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="auto"/>

            </Grid.ColumnDefinitions>

        <ContentControl Name="UC_Main" Content="{Binding UC_Main}"  Grid.Column="1" Grid.Row="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
            <!--workspace user control goes here-->
        </ContentControl>
    </Grid>

</Window>

you can some buttons, or listview etc that changes the value of the usercontrol property. the following is the viewmodel of hte view:

    Public Class MainWindowViewModel
        Inherits ViewModelBase

#Region "DECLARATIONS"
        Public Const CC_Main As String = "UC_Main"
        Private _ucMain As UserControl = Nothing
#End Region

#Region "PROPERTIES"
        Public Property UC_Main() As UserControl
            Get
                Return _ucMain
            End Get

            Set(value As UserControl)
                If _ucMain Is value Then
                    Return
                End If
                RaisePropertyChanging(CC_Main)
                _ucMain = value
                RaisePropertyChanged(CC_Main)
            End Set
        End Property

#End Region

#Region "COMMANDS"
#End Region

#Region "CONSTRUCTOR"
        Public Sub New()
            UC_Main = New YourUserControl
        End Sub
#End Region

#Region "METHODS"
#End Region

    End Class

obviously these have both been simplified but should show you what is possible. YourUserCOntrol is the view you want to be displayed in the content control of the main window. Then you can use the mvvm-light relay command on a button or event to change/set the usercontrol to a new one. You can have as many content controls on your page as you need.