Dynamically set a UserControl in a WPF app with MVVM

Question

I'm creating a kind of base WPF application to host WPF user controls, that will come in an assembly (later this will be AddIns). The application and the user control are following MVVM. Unfortunately I'm new to WPF and MVVM, so I am not that familiar with the specials. I have searched a lot, but nothing that helped me (or I didn't understand the solution, that might be possible).

So my application contains basic functionality for the user controls and a window that is split into a menu bar and the placeholder for the user control. This is what I have so far, there is a button to choose the VersionControl control, which will call a function in the viewModel of my MainWindow where I load the user control, but I do not get it to be shown in the MainWindow.

<Grid DataContext="{StaticResource Windows1ViewModel}">
        <Grid.RowDefinitions>
            <RowDefinition Height="50" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
    <Canvas Grid.Row="0"                >
        <Button Content="VersionControl"
                Style="{StaticResource ButtonStyle1}"
                HorizontalAlignment="Center"
                Command="{Binding LoadVersionControl}" />
    </Canvas>
    <Canvas Grid.Row="1">
        <ItemsControl Name="ControlCanvas" />
    </Canvas>
</Grid>

The ViewModel definitions:

public ICommand LoadVersionControl { get { return new DelegateCommand(OnLoadVersionControl); } }

But what do I need to do in the OnLoadVersionControl function? I have the VersionControlView and VersionControlViewModel, but no idea how to get it shown in my application. Many thanks for your help,

Mike

I had a look at Prism before I started and thought it would be a bit to oversized for my approach. But thanks for the hint. — MikeR, Nov 20 '12 at 08:04

score 1 · Accepted Answer · answered Nov 16 '12 at 14:35

1

I would use a RelayCommand and ICommand combo to bind to the XAML. Put the below into your ViewModel and don't forget to set the DataContext!

 // Execute method here
 private void LoadVersionControl(object param) {
      // do stuff here (if you are binding to same view Model for your MainWindow)
      //MainWindow.TextBoxInput.Visibility = Visibility.Visible
 }

 // Controls conditions to allow command execution
 private bool LoadVersionControlCanExecute(object param) { return true; }

 // Relay Command for method
 public RelayCommand _LoadVersionControl;

 // Property for binding to XAML
 public ICommand LoadVersionControlCommand {
      get {
           if(_LoadVersionControl == null) {
                _LoadVersionControl = new RelayCommand(LoadVersionControl, LoadVersionControlCanExecute);
           }

           return _LoadVersionControlCommand;
      }
 }

answered Nov 16 '12 at 14:35

Bob.

3,894
4
44
76

Hi Bob, I have added the code, but was not sure what you meant with the DataContext binding. So I created a UserControl var in my MainWindowViewModel which I bound to the DataContext of the ItemsControl `` and in the LoadVersionControl method I set the externalView to a new VersionControlView. Unfortunately it doesn't work. What's wrong? – MikeR Nov 20 '12 at 08:29
@Mike DataContext, I don't mean bind it, I mean set the DataContext for the View. Sometimes people forget to set it and ask why the View isn't linking to the ViewModel. It should be something like `View.DataContext = ViewModel;` – Bob. Nov 20 '12 at 12:40
Hi Bob, I didn't get the point how this should work. The VersionControlView is an empty UserControl which contains just a label to show some text. But in LoadVersionControl I now added the Datacontext: externalView = new VersionControlView(); `externalView.DataContext = new VersionControl.ViewModels.VersionControlViewModel();` But I think I need to bind the externalView to the ItemControl in the MainWindowView, otherwise how should the control be shown? – MikeR Nov 20 '12 at 13:48
Ok, after searching a bit I saw that someone did this by using a ContentControl, so now it looks like this: `` and now it works :) Thanks for your help. – MikeR Nov 20 '12 at 14:03
@Mike Well that saved me some typing time! If you're adding TextBoxes, TextBlocks, Labels, ComboBoxes, and the like, have a look at Grids, DockPanels, and StackPanels if you need alignment! – Bob. Nov 20 '12 at 14:10

Dynamically set a UserControl in a WPF app with MVVM

1 Answers1