Binding ContentControl Content for dynamic content

Question

I'm currently trying to achieve the functionality of a tabcontrol with hidden tabs by using a ListView (as tabs) and a ContentControl with Binding the Content Property.

I read a bit on that topic and if I got it right, it should work this way:

<Grid>     <Grid.ColumnDefinitions>         <ColumnDefinition Width="20.0*"/>         <ColumnDefinition Width="80.0*"/>     </Grid.ColumnDefinitions>     <ListBox Grid.Column="0">         <ListBoxItem Content="Appearance"/>     </ListBox>      <ContentControl Content="{Binding SettingsPage}" Grid.Column="1"/> </Grid> . . <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">     <ContentControl x:Key="AppearancePage">         <TextBlock Text="Test" />     </ContentControl>     <ContentControl x:Key="AdvancedPage">         <TextBlock Text="Test2" />     </ContentControl> </ResourceDictionary> 

And in the code behind:

public partial class MainWindow : MetroWindow   {     private ContentControl SettingsPage;     private ResourceDictionary SettingsPagesDict = new ResourceDictionary();      public MainWindow()     {         InitializeComponent();          SettingsPagesDict.Source = new Uri("SettingsPages.xaml", UriKind.RelativeOrAbsolute);         SettingsPage = SettingsPagesDict["AppearancePage"] as ContentControl; 

Allthough it throws no error, it doesn't display the "Test" TextBlock.

Its likely I got the concept of binding wrong, please give me a hint in the right direction.

Regards

Answer 1

Ok I've knocked up a simple example to show you how you can dynamically change the content of the ContentControl using a MVVM(Model-View-ViewModel) approach with data binding.

I would recommend that you create a new project and load these files to see how it all works.

We first need to implement INotifyPropertyChanged interface. This will allow you to define your own classes with properties that will notify the UI when a change to the properties occurs. We create an abstract class that provides this functionality.

ViewModelBase.cs

public abstract class ViewModelBase : INotifyPropertyChanged {     public event PropertyChangedEventHandler PropertyChanged;      protected void OnPropertyChanged(string propertyName)     {         this.OnPropertyChanged(new PropertyChangedEventArgs(propertyName));     }      protected virtual void OnPropertyChanged(PropertyChangedEventArgs e)     {         var handler = this.PropertyChanged;         if (handler != null)         {             handler(this, e);         }     } } 

We now need to have the data models. For simplicity, I've created 2 models - HomePage and SettingsPage. Both models only have a single property, you can add more properties as required.

HomePage.cs

public class HomePage {     public string PageTitle { get; set; } } 

SettingsPage.cs

public class SettingsPage {     public string PageTitle { get; set; } } 

I then create corresponding ViewModels to wrap each model. Note that the viewmodels inherit from my ViewModelBase abstract class.

HomePageViewModel.cs

public class HomePageViewModel : ViewModelBase {     public HomePageViewModel(HomePage model)     {         this.Model = model;     }      public HomePage Model { get; private set; }      public string PageTitle     {         get         {             return this.Model.PageTitle;         }         set         {             this.Model.PageTitle = value;             this.OnPropertyChanged("PageTitle");         }     } } 

SettingsPageViewModel.cs

public class SettingsPageViewModel : ViewModelBase {     public SettingsPageViewModel(SettingsPage model)     {         this.Model = model;     }      public SettingsPage Model { get; private set; }      public string PageTitle     {         get         {             return this.Model.PageTitle;         }         set         {             this.Model.PageTitle = value;             this.OnPropertyChanged("PageTitle");         }     } } 

Now we need to provide Views for each ViewModel. i.e. The HomePageView and the SettingsPageView. I created 2 UserControls for this.

HomePageView.xaml

<UserControl x:Class="WpfApplication3.HomePageView"          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"          xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"           xmlns:d="http://schemas.microsoft.com/expression/blend/2008"           mc:Ignorable="d"           d:DesignHeight="300" d:DesignWidth="300"> <Grid>         <TextBlock FontSize="20" Text="{Binding Path=PageTitle}" /> </Grid> 

SettingsPageView.xaml

<UserControl x:Class="WpfApplication3.SettingsPageView"          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"          xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"           xmlns:d="http://schemas.microsoft.com/expression/blend/2008"           mc:Ignorable="d"           d:DesignHeight="300" d:DesignWidth="300"> <Grid>     <TextBlock FontSize="20" Text="{Binding Path=PageTitle}" /> </Grid> 

We now need to define the xaml for the MainWindow. I have included 2 buttons to help navigate between the 2 "pages". MainWindow.xaml

<Window x:Class="WpfApplication3.MainWindow"     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"      xmlns:local="clr-namespace:WpfApplication3"     Title="MainWindow" Height="350" Width="525"> <Window.Resources>     <DataTemplate DataType="{x:Type local:HomePageViewModel}">         <local:HomePageView />     </DataTemplate>     <DataTemplate DataType="{x:Type local:SettingsPageViewModel}">         <local:SettingsPageView />     </DataTemplate> </Window.Resources> <DockPanel>     <StackPanel DockPanel.Dock="Left">         <Button Content="Home Page" Command="{Binding Path=LoadHomePageCommand}" />         <Button Content="Settings Page" Command="{Binding Path=LoadSettingsPageCommand}"/>     </StackPanel>      <ContentControl Content="{Binding Path=CurrentViewModel}"></ContentControl> </DockPanel> 

We also need a ViewModel for the MainWindow. But before that we need create another class so that we can bind our Buttons to Commands.

DelegateCommand.cs

public class DelegateCommand : ICommand {     /// <summary>     /// Action to be performed when this command is executed     /// </summary>     private Action<object> executionAction;      /// <summary>     /// Predicate to determine if the command is valid for execution     /// </summary>     private Predicate<object> canExecutePredicate;      /// <summary>     /// Initializes a new instance of the DelegateCommand class.     /// The command will always be valid for execution.     /// </summary>     /// <param name="execute">The delegate to call on execution</param>     public DelegateCommand(Action<object> execute)         : this(execute, null)     {     }      /// <summary>     /// Initializes a new instance of the DelegateCommand class.     /// </summary>     /// <param name="execute">The delegate to call on execution</param>     /// <param name="canExecute">The predicate to determine if command is valid for execution</param>     public DelegateCommand(Action<object> execute, Predicate<object> canExecute)     {         if (execute == null)         {             throw new ArgumentNullException("execute");         }          this.executionAction = execute;         this.canExecutePredicate = canExecute;     }      /// <summary>     /// Raised when CanExecute is changed     /// </summary>     public event EventHandler CanExecuteChanged     {         add { CommandManager.RequerySuggested += value; }         remove { CommandManager.RequerySuggested -= value; }     }      /// <summary>     /// Executes the delegate backing this DelegateCommand     /// </summary>     /// <param name="parameter">parameter to pass to predicate</param>     /// <returns>True if command is valid for execution</returns>     public bool CanExecute(object parameter)     {         return this.canExecutePredicate == null ? true : this.canExecutePredicate(parameter);     }      /// <summary>     /// Executes the delegate backing this DelegateCommand     /// </summary>     /// <param name="parameter">parameter to pass to delegate</param>     /// <exception cref="InvalidOperationException">Thrown if CanExecute returns false</exception>     public void Execute(object parameter)     {         if (!this.CanExecute(parameter))         {             throw new InvalidOperationException("The command is not valid for execution, check the CanExecute method before attempting to execute.");         }         this.executionAction(parameter);     } } 

And now we can defind the MainWindowViewModel. CurrentViewModel is the property that is bound to the ContentControl on the MainWindow. When we change this property by clicking on the buttons, the screen changes on the MainWindow. The MainWindow knows which screen(usercontrol) to load because of the DataTemplates that I have defined in the Window.Resources section.

MainWindowViewModel.cs

public class MainWindowViewModel : ViewModelBase {     public MainWindowViewModel()     {         this.LoadHomePage();          // Hook up Commands to associated methods         this.LoadHomePageCommand = new DelegateCommand(o => this.LoadHomePage());         this.LoadSettingsPageCommand = new DelegateCommand(o => this.LoadSettingsPage());     }      public ICommand LoadHomePageCommand { get; private set; }     public ICommand LoadSettingsPageCommand { get; private set; }      // ViewModel that is currently bound to the ContentControl     private ViewModelBase _currentViewModel;      public ViewModelBase CurrentViewModel     {         get { return _currentViewModel; }         set         {             _currentViewModel = value;              this.OnPropertyChanged("CurrentViewModel");         }     }      private void LoadHomePage()     {         CurrentViewModel = new HomePageViewModel(             new HomePage() { PageTitle = "This is the Home Page."});     }      private void LoadSettingsPage()     {         CurrentViewModel = new SettingsPageViewModel(             new SettingsPage(){PageTitle = "This is the Settings Page."});     } } 

And finally, we need to override the application startup so that we can load our MainWindowViewModel class into the DataContext property of the MainWindow.

App.xaml.cs

public partial class App : Application {     protected override void OnStartup(StartupEventArgs e)     {         base.OnStartup(e);          var window = new MainWindow() { DataContext = new MainWindowViewModel() };         window.Show();     } } 

It would also be a good idea to remove the StartupUri="MainWindow.xaml" code in the App.xaml Application tag so that we don't get 2 MainWindows on start up.

Note that the DelegateCommand and ViewModelBase classes that just can be copied into new projects and used. This is just a very simple example. You can get a better idea from here and here

Edit In your comment, you wanted to know if it is possible to not have to have a class for each view and related boilerplate code. As far as I know, the answer is no. Yes, you can have a single gigantic class, but you would still need to call OnPropertyChanged for each Property setter. There are also quite a few drawbacks to this. Firstly, the resulting class would be really hard to maintain. There would be a lot of code and dependencies. Secondly, it would be hard to use DataTemplates to "swap" views. It is still possible by using a x:Key in your DataTemplates and hardcoding a template binding in your usercontrol. In essence, you aren't really making your code much shorter, but you will be making it harder for yourself.

I'm guessing your main gripe is having to write so much code in your viewmodel to wrap your model properties. Have a look at T4 templates. Some developers use this to auto-generate their boilerplate code (i.e. ViewModel classes). I don't use this personally, I use a custom code snippet to quickly generate a viewmodel property.

Another option would be to use a MVVM framework, such as Prism or MVVMLight. I haven't used one myself, but I've heard some of them have built in features to make boilerplate code easy.

Another point to note is: If you are storing your settings in a database, it might be possible to use an ORM framework like Entity Framework to generate your models from the database, which means all you have left is creating the viewmodels and views.