Replace a usercontrol by another one in WPF MaterialDesigntoolkit - wpf

Question

I would like to be able to click on a Button named "More" then I will change the current UserControl with another detailed one in the MainWindow.
I tried to make the following but the items in leftmenubar don't work anymore when I run the last line of the code below:
private void btnMore_Click(object sender, RoutedEventArgs e)
{
CarDetailsViewModel c = new CarDetailsViewModel();
(this.Parent as ContentControl).Content = new CarDetails { DataContext = c };
}
I am using http://materialdesigninxaml.net/

Answer 1

The best way to do this would be like so:
<ContentControl>
<ContentControl.ContentTemplate>
<DataTemplate>
<local:CarDetails />
</DataTemplate>
</ContentControl.ContentTemplate>
</ContentControl>
Code behind:
private void btnMore_Click(object sender, RoutedEventArgs e)
{
CarDetailsViewModel c = new CarDetailsViewModel();
(this.Parent as ContentControl).Content = c;
}
Ideally, the car details viewmodel should be a property of a parent viewmodel bound to the content control's Content:
<ContentControl
Content="{Binding SelectedCarDetails}"
>
<ContentControl.ContentTemplate>
<DataTemplate>
<local:CarDetails />
</DataTemplate>
</ContentControl.ContentTemplate>
</ContentControl>
SelectedCarDetails would be updated by the parent viewmodel, and/or by selection in a ListBox or ListView, or whatever.
If you want to replace with a usercontrol of a different type, consider using implicit data templates:
<ContentControl>
<ContentControl.Resources>
<DataTemplate DataType="{x:Type models:CarDetailsViewModel}">
<local:CarDetails />
</DataTemplate>
<DataTemplate DataType="{x:Type models:BikeDetailsViewModel}">
<local:BikeDetails />
</DataTemplate>
<DataTemplate DataType="{x:Type models:BoatDetailsViewModel}">
<local:BoatDetails />
</DataTemplate>
</ContentControl.Resources>
</ContentControl>
Those could be defined in the UserControl's Resources, or in the Resources of any parent/grandparent/etc. element in the same XAML file. If you give it a Content of any of those viewmodel types, it'll automagically use the corresponding datatemplate.