wpf - Switch between different views, following MVVM pattern -

wpf - Switch between different views, following MVVM pattern -

i'm looking right way switch between different views. scenario similar widnows explorer on windows 8, can switch between 'extra big icons', 'small icons', 'details', etc. in windows 8 users 'view' ribbon of explorer (you can alter view in xp , 7).

in case, i've list of friends, , want allow user switch between 'small', 'large', , 'details' view.

assume view model has list of friends:

public class friendvm { public name { get; set; } public smallimage { get; set; } public largeimage { get; set; } }; public class mainvm : inotifypropertychanged { public observablecollection<friendvm> friends { get; set; } private string m_viewmode public string viewmode { { homecoming m_viewmode; } set { m_viewmode=value; this.propertychanged( new propertychangedeventarags("viewmode") ); } } }

in view, i've ribbon (on user can alter viewmode), header (showing details user), , list of friends. depends on view, want show:

when viewmode = "details" i've listview, gridview. when viewmode = "small" i've listview, itemspanel wrappanel, , bind image smallimage when viewmode = "large" i've listview wrappanel, using largeimage property.

here how xml looks (simplified):

<window x:class="friends.mainwindow" ... xmlns:f="clr-namespace:friends" ...> <window.datacontext> <f:mainvm /> <window.datacontext> <window.resources> <controltemplate x:key="details"> <listview itemssource="{binding path=friends}"> <listview.view> <gridview> ... </gridview> </listview.view> </controltemplate> <controltemplate x:key="small"> <listview itemssource="{binding path=friends}"> <listview.itemspanel><wrappanel orientation="horizontal" /> </listview> <listview.itemtemplate><datatemplate> <image source={binding smallpicture} width="32" height="32" /> </datatemplate></listview.itemtemplate> </controltemplate> <controltemplate x:key="large"> <listview itemssource="{binding path=friends}"> <listview.itemspanel><wrappanel orientation="horizontal" /> </listview> <listview.itemtemplate><datatemplate> <stackpanel> <image source="{binding largepicture}" width="200" height="200" /> <textblock text="{binding name}" /> </stackpanel> </datatemplate></listview.itemtemplate> </controltemplate> </window.resource> <dockpanel lastchildfill="true"> <ribbon ...> ... </ribbon> <stackpanel> ... header stuff </stackpanel> <contentcontrol x:name="friendlist" content="{binding friends}" ?????? /> </dockpanel> </window>

so, question do in ????? area. right now, i've template="{staticresource small}" , working. moreover, using code behind can alter template of other resourced template (using findresource). however, i'm not happy solution, sense doesn't go mvvm pattern. if "item" (a listbox item, tab item, etc.), utilize info template, , date template selector. since contentcontrol, , controltemplateselector seems broken design, i'm not sure should do.

or, if set list of friends "as is" in tree, maybe using info template (having targettype=f:friendlist) create work, don't want instantiate friend list. there 1 instance instantiated within datacontext element.

wpf mvvm