Loading UserControl to the region of the Window on ComboBox change

Question

I have got ComboBox which is populated with collection of customTypes. On comboBox change, I would like to load/change content in the particular region so that it loads related data for the selected ComboBox item (it could be in the form of loading userControl or I i dont mind specifying DataTemplate for it).

It is similar to this question WPF Load Control question. But in this question, he is talking about individual DataTemplates in the actual Listbox, while I am talking about populating certain window region on ComboBox change.

I am using MVVM (and not PRISM) .Net 3.5.

So basically you would change Model which will be displayed, not only an UI layout? — sll, Sep 23 '11 at 12:52
@sll, model will stay as is, but data might be displayed/represented differently depending on the option user chooses from ComboBox — Bek Raupov, Sep 23 '11 at 13:37

score 2 · Accepted Answer · answered Sep 23 '11 at 13:10

U could use ContentControl which is the placeholder for the actual Content that is dynamically decided as per combobox selection.

The follwoing code is just for guidance

<Window ...>

   <Window.Resources>
       <MyView1 x:Key="MyView1" />
       <MyView2 x:Key="MyView2" />
   </Window.Resources>  

   ...

   <ComboBox x:Name="MyCombo">
       <ComboBox.ItemsSource>
           <sys:String>"MyView1"</sys:String>
           <sys:String>"MyView2"</sys:String>
           ....
       </ComboBox.ItemsSource>
   </ComboBox>

   ... 

   <!-- This is where your region is loaded -->
   <ContentControl>
       <ContentControl.Style>
           <Style TargetType="{x:Type ContentControl}">
               <Style.Triggers>
                   <DataTrigger Binding="{Binding Path=SelectedItem,
                                                  ElementName=MyCombo}"
                                Value="MyView1">
                        <Setter Property="Content"
                                Value="{StaticResource MyView1}"
                   </DataTrigger>
                   <DataTrigger Binding="{Binding Path=SelectedItem,
                                                  ElementName=MyCombo}"
                                Value="MyView2">
                        <Setter Property="Content"
                                Value="{StaticResource MyView2}"
                   </DataTrigger>
               </Style.Triggers>
           </Style>
       </ContentControl.Style>
   </ContentControl> 
</Window>

The data loading can be part of the MyView1 and MyView2 user control's constructor or your main UI's data context view model.

tnx @AngelWPF, trying it out now, will let you know if/when it works — Bek Raupov, Sep 23 '11 at 13:39
it is possible to have default View ? as user can put/enter value that is not in the ComboBox, is it possible to provide default content/view for this ? (so that it will failover to that if no existing options in the combobox are selecteD) — Bek Raupov, Sep 26 '11 at 09:47
For that DataTrigger should be checked for (x:Null} value.... — WPF-it, Sep 26 '11 at 12:05

score 1 · Answer 2 · edited May 23 '17 at 12:32

As far as I understand the question is how to change underlying data being bound to UI and not a DataTemplate only.

You can use EventSetter which will be handled in code behind where you can switch DataContext for a region you've mentioned:

<ComboBox>
     <ComboBox.Resources>         
         <Style TargetType="ComboBoxItem">             
           <EventSetter Event="Selector.SelectionChanged"
                        Handler="YourHandler"/>         
         </Style>     
     </ComboBox.Resources> 
</ComboBox>

But from MVVM perspectives it could be not perfect solution so you can introduce your own ComboBox class wich is Command aware, see this SO post: WPF command support in ComboBox

In this way you can decouple logic from UI using Command.

Tnx for your answer +1, it is actualling related to just changing the UI. — Bek Raupov, Sep 23 '11 at 13:38

Loading UserControl to the region of the Window on ComboBox change

2 Answers2