c# - Binding Shapes.Path items to a ItemsControl -

i have been trying figure out how bind observablecollection<frameworkelements> itemscontrol. have existing project relies heavily on code behind , canvas's without binding trying update use mvvm , prism.

the observablecollection going populated number of path items. generated extermal library use. library functions correctly when manually manipulate canvas itself.

here snippet of code viewmodel:

    observablecollection<frameworkelement> _items;     observablecollection<frameworkelement> items     {         { return _items; }         set         {             _items = value;             this.notifypropertychanged("items");         }     }      public event propertychangedeventhandler propertychanged;      private void notifypropertychanged(string propertyname)     {         if (this.propertychanged != null)         {             this.propertychanged(this, new propertychangedeventargs(propertyname));         }     } 

supporting xaml

    <itemscontrol itemssource="{binding items}" horizontalalignment="stretch" verticalalignment="stretch">             <itemscontrol.itemspanel>                 <itemspaneltemplate>                     <canvas x:name="canvas" isitemshost="true">                         <canvas.background>                             <solidcolorbrush color="white" opacity="100"/>                         </canvas.background>                      </canvas>                 </itemspaneltemplate>             </itemscontrol.itemspanel>             <itemscontrol.itemtemplate>                 <datatemplate>                     <path/>                 </datatemplate>             </itemscontrol.itemtemplate>         </itemscontrol> 

the issue experiencing path's never draw. suggestion on going wrong , start debug process?

your view model should contain abstract representation of path, e.g.

public class pathdata {     public geometry geometry { get; set; }     public brush fill { get; set; }     public brush stroke { get; set; }     public double strokethickness { get; set; }     // ... more stroke-related properties } 

if have collection of pathdata objects like

public observablecollection<pathdata> paths { get; set; } 

your itemscontrol have itemstemplate shown below:

<itemscontrol itemssource="{binding paths}">     <itemscontrol.itemspanel>         <itemspaneltemplate>             <canvas/>         </itemspaneltemplate>     </itemscontrol.itemspanel>     <itemscontrol.itemtemplate>         <datatemplate>             <path data="{binding geometry}" fill="{binding fill}"                   stroke="{binding stroke}" strokethickness="{binding strokethickness}"/>         </datatemplate>     </itemscontrol.itemtemplate> </itemscontrol> 

---

you add pathdata instance this:

paths.add(new pathdata {     geometry = new rectanglegeometry(new rect(100, 100, 100, 100)),     fill = brushes.aliceblue,     stroke = brushes.red,     strokethickness = 2 });