Changing Main Viewing Area

Question

I'm wondering how to go about creating different views in the main window when a button is pressed. I'm not sure of the correct terminology, so that has hampered my google fu.

I'm thinking that the main viewing area would be a content control, that I could change when a event happens. I made a small drawing to help illustrate my idea / thought.

Any input will be appreciated. Thanks!

Answer 1

It would be really easy to implement this senario using MVVM approach....

Make a ViewModel for you MainView. Then Define Properties of the ViewModels of your UserControls

For Example You have Two UserControl as FirstView and SecondView then make a properties in your viewmodels as ViewToLoadProperty of the type ViewModel (usually called as ViewModelBase)

Set bindings as

        <!--  Panel For Hosting UserControls  -->
        <Border Grid.Column="2">
            <ContentControl Name="userControlContentControl"
                            Content="{Binding Path=ViewToLoadProperty,
                                              }">
                <ContentControl.Resources>
                    <DataTemplate DataType="{x:Type ViewModelLayer:FirstViewModel}">
                        <ViewLayer:FirstView/>
                    </DataTemplate>
                    <DataTemplate DataType="{x:Type ViewModelLayer:SecondViewModel}">
                        <ViewLayer:SecondView />
                    </DataTemplate>
                                        </ContentControl.Resources>
            </ContentControl>
        </Border>
        <!--  Panel For Hosting UserControls  -->

Then when you click the button Use a command to set the respective ViewModel Intance to this(ViewToLoadProperty) property...(Use RelayCommannds or something like it)

DataTempates would do the rest of the job by selecting the right View according to the right type of ViewModel

YOu can use MVVMLight toolkit if you are implementing MVVM Pattern.. :)

Answer 2

On the right you could have a frame. Then the button would bind a different page or user control to the content of that frame.