[WPF] MVVM - Control that displays a single view?

[NickThissen]

Hi,

I am building an application in WPF and I'm trying to follow the MVVM pattern outlined here:
http://msdn.microsoft.com/en-us/magazine/dd419663.aspx

I think this is a pretty well known article so you probably know it. If not, just look at the first screenshot.

My design is very much the same except my 'Control Panel' is actually just a ToolBar.

At first therefore, my entire window (except the ToolBar) consisted of a TabControl that held the 'workspace views'. Just as in the article, there is a view that shows all customers and a view that allows me to add a new customer.

I had this all working just fine exactly like the article explains, with the MVVM pattern, so that the TabControl is bound to a collection of ViewModels, and a DataTemplate for every ViewModel links it to a View so the TabControl knows how to display each ViewModel.

Then I started thinking and I realised my UI would work much better if the 'All customers' view was not part of the TabControl but was a separate element, to the left of the TabControl. The idea is that the All Customers view is always visible, and the TabControl with 'New Customer' views is only visible when I'm actually adding a new customer.


The question I have is quite simple... How do I separate the All Customers view from the TabControl?

I tried two approaches, both work but have flaws:


1. Use a second TabControl. The UI is now two TabControl side by side. The first one is bound to a new collection 'AllCustomerViewModels' that always holds a single AllCustomersViewModel.
The second TabControl is bound to the Workspaces collection which holds all the other ViewModels (the New Customer view models).

Basically I just duplicated the TabControl and bound it to a collection that always has just one viewmodel, so it always has a single tab item.

This works, but it's not really pretty to have a TabControl with a single Tab. It seems redundant and it looks for the user like there can be multiple tabs when there never will be; it's misleading.
I tried hiding the Tabitem by supplying an empty DataTemplate to the ItemTemplate but you still get a tiny 'hint' of the TabItem, and it still looks strange, not to mention that it feels like a hack.


2. Use an ItemsControl instead. The ItemsControl is bound to the same AllCustomersViewModels collection that always holds a single ViewModel.

This works, but for some reason the ItemsControl doesn't know how much space it has and it simply becomes as large as the AllCustomers view is (vertically), sometimes it even goes beyond the boundaries of the window. The TabControl did not have this problem and their properties are the same so I'm not sure why this happens.


The main problem I'm having is that these controls all bind to a collection of items while really, I don't have a collection. I just have a single ViewModel that I want to display.

I don't know any control in WPF that allows me to bind to a single item instead of a collection of items... Am I missing something or does it not exist?


Finally the most logical thing I could think of is to just place the view (it's a UserControl) on the window directly. That doesn't work though; I need to add the view model to the window, and the view model is then told to display itself using the view; not the other way around. This happens due to the ViewModel having a DataTemplate:

        <DataTemplate DataType="{x:Type vm:AllCustomersViewModel}">
            <vw:AllCustomersView/>
        </DataTemplate>

Basically, the AllCustomersViewModel knows to display itself using the AllCustomersView, but not the other way around.



Any idea's?

[Evil_Giraffe]

Use an ItemsControl instead. The ItemsControl is bound to the same AllCustomersViewModels collection that always holds a single ViewModel.

The ItemsControl is designed for collection controls to derive from, not to be used directly in your UI (although, as you have found, it is possible, it just doesn't quite work how you expect a proper control to - for example, it doesn't know how to lay itself out, as that is specific to each control deriving from it - so it just asks for as much space as it needs).

The main problem I'm having is that these controls all bind to a collection of items while really, I don't have a collection. I just have a single ViewModel that I want to display.

I don't know any control in WPF that allows me to bind to a single item instead of a collection of items... Am I missing something or does it not exist?

The former. You'd be wanting either a ContentPresenter or a ContentControl - the difference being that a ContentControl is a full blown control, that takes focus, is interactable with, etc, and is a heavier-weight object. The ContentPresenter is much lighter and simply shows whatever you place in it. It sounds like the Presenter is what you want. Set the viewmodel as the Content property of it, and the datatemplate (if it is not a default template for your view model type, which from the fragment you posted, it does apper to be, so you probably won't need this) to the... err, ContentTemplate? (check this) property.