c# - Apply templates styles on view-models in WPF -

i'm working on wpf application, application contains designer shows vertical listview of different elements (shapes).

i created view-model designer, , view-model each shape. bind view of designer view-model, used "datacontext" property.

but problem defined view-styles (templates) of shapes in 1 xaml file, don't know how bind them view-models !!

i found in internet :

var resourcedictionary = new resourcedictionary()         {             source = new uri("symboltemplates.xaml", urikind.relative)         };  style template = resourcedictionary["sms"] style; 

so put in view-model constructors, have feild "template" ??

to make things more clear:

1)here designer view :

<grid sizechanged="grid_sizechanged">    <listview x:name="shapesviewer" borderthickness="0" background="yellowgreen" itemssource="{binding childrenlist}">      <listview.layouttransform>         <rotatetransform angle="{binding orientation}" />     </listview.layouttransform>    </listview>  </grid> 

"childrenlist" contains list of shapes view-models.

2) here "symboltemplates.xaml" defined shapes styles:

<resourcedictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"                 xmlns:mvvm="clr-namespace:viewmodel;assembly=viewmodel"> <style x:key="circlestyle"        targettype="listviewitem">     <setter property="visibility" value="visible"/>             <!--value="{binding isexpanded, mode=twoway}" />-->     <setter property="width"             value="70" />     <setter property="height"             value="32" />     <setter property="margin"             value="0" />     <setter property="template">         <setter.value>             <controltemplate targettype="listviewitem">                 <grid height="32"                       width="50"                       background="transparent">                     <grid.horizontalalignment>                         <multibinding  converter="{staticresource eventohorizontalalignementmulticonverter}">                             <binding path="position" />                             <binding path="rendercenter" />                         </multibinding>                     </grid.horizontalalignment>                     <ellipse width="30"                              height="30"                              horizontalalignment="center"                              verticalalignment="center"                              strokethickness="3"                               fill="whitesmoke">                     </ellipse>                      <itemspresenter grid.row="1"                                     visibility="{binding isexpanded, converter= {staticresource visibilityofbool} }" />                 </grid>             </controltemplate>         </setter.value>     </setter> </style> ... 

so, have style defined (for circle), have object circlevm (the view-model).

my question : what should assign "circlestyle" "circlevm" when adding in "childrenlist" defined in listview (named "shapesviewer")?

update >>>

to address statement made in bold:

your style not 'for circle' say... listviewitem. cannot set style targettype="listviewitem" usercontrol.

instead of doing this, define datatemplate each view defines how want data in each view model appear... example (assuming circle class has public name property in it):

<datatemplate datatype="{x:type yourdatatypesnamespace:circle}">     <grid height="32" width="50" background="transparent">         <ellipse width="30" height="30" horizontalalignment="center"  verticalalignment="center" strokethickness="3" fill="whitesmoke" />         <textblock text="{binding name}" />     </grid> </datatemplate> 

update end >>>

firstly, can load datatemplate resources section this:

componentresourcekey templatekey = new componentresourcekey(typeof(yourviewmodel),  "yourviewmodeldatatemplate"); datatemplate datatemplate = (datatemplate)this.tryfindresource(templatekey); 

then can connect datatemplate particular contentcontrol this:

contentcontrol.contenttemplate = datatemplate; 

this assumes have contentcontrol named contentcontrol.

alternatively, can create simple datatemplate connect each view related view model programmatically this:

datatemplate datatemplate = new datatemplate(); datatemplate.datatype = typeof(yourviewmodel); frameworkelementfactory view = new frameworkelementfactory(typeof(yourview)); datatemplate.visualtree = view; 

update >>>

however, if have view (usercontrol) each of view models, there much easier way connect them... add these app.xaml:

<datatemplate datatype="{x:type viewmodels:circleviewmodel}">     <views:circleview /> </datatemplate> ... <datatemplate datatype="{x:type viewmodels:squareviewmodel}">     <views:squareview /> </datatemplate>