showing different user controls - WPF MVVM

Question

I created a dbml file, which automatically created the designer.cs

In the designer.cs (which is the Model in the MVVM) there are two different classes in the database: ElementA and ElementB.

I have two user controls: Element_A_UserControl - displays a single instance of ElementA Element_B_UserControl - displays a single instance of ElementB

There is another user control that has two stack panels. The first stack panel displays a list of Element_A_UserControl The second stack panel displays a list of Element_B_UserControl

Here is the stack panel #1 XAML:

<StackPanel>
    <ItemsControl ItemsSource="{Binding AllElements_A}">
         <ItemsControl.ItemTemplate>
                <DataTemplate>
                     <vw:Element_A_UserControl x:Name="elementA">                            
                     </vw:Element_A_UserControl>
                 </DataTemplate>
          </ItemsControl.ItemTemplate>
     </ItemsControl>
</StackPanel>

Here is the stack panel #2 XAML:

<StackPanel>
    <ItemsControl ItemsSource="{Binding AllElements_B}">
         <ItemsControl.ItemTemplate>
                <DataTemplate>
                     <vw:Element_B_UserControl x:Name="elementB">                            
                     </vw:Element_B_UserControl>
                 </DataTemplate>
          </ItemsControl.ItemTemplate>
     </ItemsControl>
</StackPanel>

Up to now everything works fine.

I want to have one stack panel, which displays a list of ElementA or a list of ElementB depending of a condition.

Note: The property to get list of elements is different. i.e.

ItemsSource="{Binding AllElements_A}
ItemsSource="{Binding AllElements_B}

I hope that my question is clear enough.

Dazy.

score 1 · Accepted Answer · answered May 01 '12 at 23:44

One way is that you could try to use a conditional DataTemplate. Something like this:

<ItemsControl.Resources>
    <DataTemplate DataType="{x:Type local:ElementAType}">
         <vw:Element_A_UserControl x:Name="elementA">                            
         </vw:Element_A_UserControl>
    </DataTemplate>

    <DataTemplate DataType="{x:Type local:ElementBType}">
         <vw:Element_B_UserControl x:Name="elementB">                            
         </vw:Element_B_UserControl>
    </DataTemplate>
</ItemsControl.Resources>

Then, in your viewmodel, create:

public ObservableCollection<object> CombinedCollection {get; set;}

and load it with either of your collections conditionally.

Alternatively, keep both ItemsControls in your XAML, and conditionally hide/show them using Visibility and a BooleanToVisibilityConverter. Given these two choices, I would likely choose this one, as it is clearer in the code, and easier to maintain than the conditional DataTemplate above. However, you seemed to indicate that you didn't want to do that, so I presented the first one as an option.

showing different user controls - WPF MVVM

1 Answers1