c# - WPF MVVM Change GUI after clicking Item -

i try visualize rss feed. have created 2 objects: feedchannel , feedelement. feedchannel may contain feedelements.

this feed may have multiple channels, displayed this:

<grid>     <scrollviewer>         <listbox itemssource="{binding feed, isasync=true}" x:name="listfeed">             <i:interaction.triggers>                 <i:eventtrigger eventname="mouseleftbuttonup">                     <i:invokecommandaction command="{binding channelclickcommand}" commandparameter="{binding elementname=listfeed, path=selecteditem}" />                 </i:eventtrigger>             </i:interaction.triggers>             <listbox.itemtemplate>                 <datatemplate>                     <stackpanel orientation="horizontal">                         <grid horizontalalignment="stretch" verticalalignment="stretch">                             <grid.columndefinitions>                                 <columndefinition width="auto"/>                                 <columndefinition width="*"/>                             </grid.columndefinitions>                             <image grid.column="0" margin="0,0,10,0" source="{binding imagelink}" verticalalignment="top" width="100" height="50"/>                             <stackpanel grid.column="1" orientation="vertical">                                 <textblock text="{binding title}" fontweight="extrabold" />                                 <textblock text="{binding description}" />                                 <textblock text="{binding publicationdate}" horizontalalignment="right" fontweight="thin"/>                             </stackpanel>                         </grid>                                                </stackpanel>                                        </datatemplate>             </listbox.itemtemplate>         </listbox>     </scrollviewer> </grid> 

the channelclickcommand save clicked channel activechannel property. view, should access activechannel , display feedelements inside it.

that's quite done, struggle in finding correct approach following:

given user first sees channels (and channels!), may click 1 of them , elements displayed (no channels visible anymore). may go view channels button-click or similar.

i thought using stackpanels , turning them visible/collapsed depending on what's needed, there better solution problem?

not sure ui/ux point of view having channels , elements in same list best way handle it. answer question, can have @ datatemplateselector property or use datatype property on datatemplate element.

without getting details (a little search on website give required info), here solution datatype property:

<grid>     <listbox itemssource="{binding feed, isasync=true}" x:name="listfeed">                   <i:interaction.triggers>             <i:eventtrigger eventname="mouseleftbuttonup">                 <i:invokecommandaction command="{binding channelclickcommand}" commandparameter="{binding elementname=listfeed, path=selecteditem}" />             </i:eventtrigger>         </i:interaction.triggers>          <listbox.resources>             <resourcedictionary>                 <datatemplate datatype="{x:type my:feedchannel}">                     <stackpanel orientation="horizontal">                         <grid horizontalalignment="stretch" verticalalignment="stretch">                             <grid.columndefinitions>                                 <columndefinition width="auto"/>                                 <columndefinition width="*"/>                             </grid.columndefinitions>                             <image grid.column="0" margin="0,0,10,0" source="{binding imagelink}" verticalalignment="top" width="100" height="50"/>                             <stackpanel grid.column="1" orientation="vertical">                                 <textblock text="{binding title}" fontweight="extrabold" />                                 <textblock text="{binding description}" />                                 <textblock text="{binding publicationdate}" horizontalalignment="right" fontweight="thin"/>                             </stackpanel>                         </grid>                                                </stackpanel>                                        </datatemplate>                  <datatemplate datatype="{x:type my:feedelement}">                     <!-- data template feedelement -->                 </datatemplate>             </resourcedictionary>         </listbox.resources>     </listbox> </grid> 

just replace elements in feed property channelclickcommand , should work fine.