WPF: Change the user control programatically

Question

I am new to WPF, I wanted to display a window with multiple user controls.

example.xaml

<DockPanel>

<Border x:Name ="TopRegion" DockPanel.Dock = "top">
    <local:userControl1/>
 </Border>

<Border x:Name ="leftRegion" DockPanel.Dock = "left">
    <local:userControl2/>
 </Border>

</DockPanel>

The usercontrol1 and usercontrol2 are other views in the same project. I.e usercontrol1.xaml and usercontrol2.xaml.

Problem is that i need to change the usercontrol of leftRegion from usercontrol2 to usercontrol3 during run time i.e programatically.

How to achieve this in example.xaml.cs program.

Whenever you say WPF you also have to say MVVM too. WPF has some very powerful features as datatemplates and templateselectors which are best used with MVVM — Sir Rufo, Aug 06 '17 at 07:46
In any of the XAML-based APIs, such as WPF, the moment you say you want to change a UI object directly via programmatic means, you have failed. You haven't provided enough context (i.e. a good [mcve], along with supporting details), but ... — Peter Duniho, Aug 06 '17 at 07:53
... the scenario you appear to be trying to address is much better addressed by defining view model classes for each `UserControl` you want to display, declaring `DataTemplate` resources for each of those view model classes, where the template contains simply the `UserControl` you want associated with that view model class, and the use `ContentControl` to present the view model, letting WPF do the work of matching the view model to the right `UserControl`. Then, changing the displayed `UserControl` is a simple matter of changing the view model class you're using in that spot. — Peter Duniho, Aug 06 '17 at 07:53
@PeterDuniho, you know the job, I agree with you but as you can see my answer that says this and offers one possible solution was twice downvoted, even marked for deleting by some. — Ivan Ičin, Aug 06 '17 at 11:17

score 1 · Accepted Answer · answered Aug 06 '17 at 07:43

1

You already named the Border leftRegion, so you could use this Border to set a new child like

leftRegion.Child = new userControl3();

programatically in code behind.

This means you are replacing the instance of userControl2 of the Border with a new instance of userControl3.

answered Aug 06 '17 at 07:43

Fruchtzwerg

10,999
12
40
49

Thanks for the Answer. Please provide me some document links to data template, user control, dynamically changing the User controls. – Akshay Vijapur Aug 06 '17 at 08:03
You can find a short introduction to datatemplates at https://wpftutorial.net/DataTemplates.html and a way to change datatemplates dynamically at https://stackoverflow.com/questions/13136816/change-data-template-dynamically or https://stackoverflow.com/questions/146269/change-wpf-datatemplate-for-listbox-item-if-selected . Note that this is a totally different approach to solve your problem. – Fruchtzwerg Aug 06 '17 at 08:06

score -1 · Answer 2 · answered Aug 06 '17 at 07:54

While this is a legitimate request, it crosses with the logic of XAML and data binding, so I would suggest an alternative way that will have the same effect for end-user but is more in the spirit of XAML.

The solution is simple - just have both controls in your XAML and switch their Visibility based on whether you need one or another control to be displayed.

WPF: Change the user control programatically

2 Answers2