Split pages and navigate in WPF - wpf

Question

I'm trying to create a WPF page project, in which I've split the screen in two. On the left side, I have four clickable links / buttons.
Clicking on one of the links opens a corresponding page on the right side of the screen. There, options can be set. When a user uses the navigation bar on top of the screen, it should apply on the right side only.
Is this possible to do? What would be a better approach?
I'd like to know how to tell a page (part) which page to load. So that would make the right page dynamic?
Would it be better to split up the Grid? Or would a DockPanel be a better solution?
I've created a large Window in WPF, but I'd like to split up all these pages in a usefull navigation Page. So I have a bit of experience in using WPF and XAML. How should I approach this problem?

Answer 1

Firt you need to identify the components you want, mainly I see three components, the LeftSide navigation pane, the TopSide navigation pane and the MainContent pane. First lets talk about the MainContent pane, I think the best way for doing this is to use binding and date templates for making this dynamically. In your ViewModel, or DataContext, you need to have a property that represent the Content that you want to show in the MainContent, lets call it MainContent, then the MainContent View could be a ContentControl and set the property Content bindings to the ViewModel's MainContent property. In this way you only need to set the DataTemplate for each class item that you want to show. Other way could be to use a tab control and chage the ControlTemplate, this way is not dynamic because you need predefine all contents that you will show.
Now, for the navigation pane, you could use any control, for instance you could use a Radio button and change the ControlTemplate, and make the logic in the view model, using commands, for instance.
And now, the use of the Grid or DockPanel depends of what you want your application to do. If you want a dynamic width, you should to use a Grid with a GridSplitter, but if you want fixed width, you could to use a DockPanel due it is a bit more efficient/faster than the Grid.
Hope this answers helps, and not to be confused. Please feedback if any doubt.
EDIT
For instance, in the view model:
public class MainViewModel:INotifyPropertyChanged
{
public object Content {get; set;} //Here you must to raise the PropertyChanged event
private ICommand _showSummaryCommand
public ICommand ShowSummaryCommand
{
get { return new _showSummaryCommand ?? (_showSummaryCommand = new SomeCommandImplementation((sender,e)=>{Content = new SummaryViewModel()},true))} //most of commands implementations recive two parameters, an delegate to execute and a bool delegate for can excecute
}
}
and for the view, in some resource dictionary:
<DataTemplate TargetType="{x:Type ViewModels:SummaryViewModel}">
<DataGrid>
<!--Here goes what ever you want to show for instace-->
<TextBlock x:Name="descriptionText" Text={Binding Description}/>
</DataGrid>
</DataTemplate>
and in the place where you will to show all the contents
<!--....-->
<ContentControl Content={Binding Content}/>
<!--....-->
Hope this code helps a bit more :)