How to show different controls based on selection(s)

Question

I have a user control that has a list of items.

If an item is selected, I want to show/replace the view with a panel and some buttons and what not.

When the user has finished with this view by pressing a button or something, I want to revert back to the list again and continue the process.

Essentially, this is a wizard.

What to do?

Sorry, I forgot to mention that I am using MVVM.

Solution:

Thanks to all for the help. My test application wasn't working which prompted me to ask SO.

My test application wasn't working because I had missed the {x:type} in the DataTemplate.

To simply:

I created different datatemplates in the resources with the {x:Type}

My viewmodel: contained a compositecollection of IWizardPageViewModel. contained a currentPage property. contained NextCommand/BackCommand to change the currentPage

I bind the currentPage property to the control and the datatemplates take over.

Because of the {x:Type} it wasn't working.

I don't know whether this is right or wrong, but it works and is mostly controlled by the viewmodel rather than triggers on the view.

Answer 1

Consider a list of usercontrols - one for each page of your wizard. The top level usercontrol (the wizard control) will own this list. For navigation, you can;

• Have buttons on the top level wizard usercontrol. When pressed, these notify the children of the navigation so that they can finish their work or cancel the navigation. You will want a common interface for the pages. IWizardPage perhaps?
• Use a routed commands to notify the wizard usercontrol http://msdn.microsoft.com/en-us/library/ms752308.aspx#Four_main_Concepts

Answer 2

You can use Triggers and Selectors to update the view (DataTemplate) based on user actions. Let me know if you need code snippet for the same.

Answer 3

First thing that comes to my mind (and easiest) is to use Visibility property and bind it to some boolean flags in ViewModel that will indicate current UI state. Of course in this case you should apply a Converter to properly convert bool value to Visibility. There are dozens of examples of such kind of convertors.

But this is relevant only in for of small amount of such Controls. In case of really lots of UI elements that should be shown and replaced on a view it's better to use framework like Prism. From scratch it will be not so straightforward, but then you'll feel all power of flexibility.

In case you're not following MVVM culture (or you don't like having such backing properties) you can bind Visibility property of control A that should be shown to Booleaen property of element B which stands for show/hide logic. To make it clear:

<TextBlock x:Name="A" Visibility="{Binding IsChecked, ElementName=B, Converter={StaticResource boolToVisibilityConverter}}" Text="Some text."/> 
<ToggleButton x:Name="B" IsChecked="False"/>