Passing data to user control in MVVM pattern

Question

Background:

I have WPF application with a main window containing a user control. I want to pass a value from the main window to the user control.

In the Main window's constructor I have code:

    public MainWindow()
    {
        InitializeComponent();
        _vm = new MainWindowViewModel();
        this.DataContext = _vm;
        ucControl = new UserControl1("NameSet");
    }

(ucControl is my user control)

User control has two constructors:

    public UserControl1()
    {
        InitializeComponent();
        this.ID = ID.GetNewID;
    }

    public UserControl1(string name)
    {
        InitializeComponent();
        _vm = new UCViewModel(name);
        this.DataContext = _vm;
        this.ID = ID.GetNewID;
    }

The problem is: although the second constructor (with parameter) is called, it is not loaded in the main window. I checked the ID (this.ID) in the user control's loaded event and I see the ID set in the default constructor and its DataContext is null. Because of this reason, I do not get the "name" string in my user control.

Any help please? Since I am using MVVM pattern I do not want to expose properties in user control (view) to be set from main window just for this.

from there did you load this usercontrol.. show some more code — Shoaib Shaikh, Mar 22 '12 at 04:48
I guess the question is similar to http://stackoverflow.com/questions/4802278/how-do-you-pass-parameters-from-xaml. That would help. — Sreedharlal B Naick, Mar 22 '12 at 05:02
yes you should try creating dependency property in usercontrol and use it instead of a parameter in ctor — Shoaib Shaikh, Mar 22 '12 at 06:09
But the property "name" is in ViewModel, isn't declaring some business property in View (user control) against MVVM pattern? — thewpfguy, Mar 22 '12 at 06:26

score 1 · Accepted Answer · edited Sep 02 '15 at 18:22

You are instantiating the UserControl1 object twice:

Once within the XAML. The <uc:UserControl1> element instantiates a UserControl1 object, using the default constructor, and assigns it to the member ucControl.
You instantiate it again within the constructor of the MainWindow object

If you put a break point in the constructor of UserControl, you'll notice it is called twice. I assume WPF instantiate and initialize the XAML's UserControl (#1 from above) after you assign the dynamic UserControl (#2 from above), and this is why you see the former in the logical tree of MainWindow.

You should have only one instance. If you want to parameterized a user control, the canonical paradigm is what you mention that you don't want to do (why??). If you had such a property, you could set it in the XAML: <uc:UserControl1 x:Name="..." YourProperty="NameSet>

exposing such a property is a single line in the UserControl:

public YourProperty { get; set; }

If you insist of not having this line, you should do the following:

Remove the XAML's user control.
In main window, subscribe to the Loaded event
In the handler of the Loaded event, instantiate a new UserControl1 - with whatever constructor parameter that you want.
Manually add it to the Children array of the parent Grid element

Clearly this isn't my recommendation. In addition to the complexity, with the former method you'll also work very well with the Visual Studio designer.

Thanks for your reply. I have the "name" property in user control's view model. How do I set that? Of course this wouldn't work - — thewpfguy, Mar 22 '12 at 07:55
Should we duplicate all properties in view model in the user control class, just for this purpose? — thewpfguy, Mar 22 '12 at 07:59
That would fail DataContext.Name, just access ucControl.DataContext in code. — Silvermind, Mar 22 '12 at 08:18
@thewpfguy - the DataContext of UserControl is different than the UserControl. You need to instantiate it as well, either by code (typical), or by XAML. If by code, you'll do it by the MainWindow view model, and typically it would be a property of the MainWindow View Model (e.g. MainVm.ucVm). Then, you bind the DataContext property of UserControl1 to it: . — Uri London, Mar 22 '12 at 08:19

Passing data to user control in MVVM pattern

1 Answers1