binding - How can you make the color of elements of a WPF DrawingImage dynamic? -

we have need make vector graphic images change color of elements within graphic @ runtime. seem setting colors based on either static or dynamic resource values wouldn't work. want have multiple versions of same graphic, each abilty set graphic elements (path, line, etc) different colors don't think dynamic resource approach work. leaves data binding seems right approach. update graphic use data binding expr instead of hard-coded brush color so:

<drawingimage x:key="graphic1">   <drawingimage.drawing>     <drawinggroup>       <drawinggroup.children>         <geometrydrawing geometry="f1 m 8.4073,23.9233l">           <geometrydrawing.pen>             <pen linejoin="round" brush="{binding line1brush, mode=oneway}"/>           </geometrydrawing.pen>         </geometrydrawing>         <geometrydrawing geometry="f1 m 3.6875,2.56251l">           <geometrydrawing.pen>             <pen linejoin="round" brush="{binding line2brush, mode=oneway}"/>           </geometrydrawing.pen>         </geometrydrawing>       </drawinggroup.children>     </drawinggroup>   </drawingimage.drawing> </drawingimage> 

then create view model object (supporting inotifypropertychanged) instance each instance of graphic1 in case , make sure has both line1brush , line2brush property. sounds good, can't work. assume graphic, defined in resource dictionary image objects , attempt set datacontext , data binding error output in debug window. here's image xaml:

<image x:name="pulse1" grid.column="0" source="{staticresource graphic1}"/> <image x:name="pulse2" grid.column="1" source="{staticresource graphic1}"/> 

and in window's initialize method set data context so:

 public mainwindow()  {      initializecomponent();      this.datacontext = this;      this.pulseimage1 = new pulseimageviewmodel();      this.pulseimage2 = new pulseimageviewmodel();      this.pulseimage2.line1brush = brushes.green;      this.pulseimage2.line2brush = brushes.red;      this.pulse1.datacontext = this.pulseimage1;      this.pulse2.datacontext = this.pulseimage2; } 

where pulseimageviewmodel (shown below) defines 2 properties line1brush , line2brush, each of fire propertychanged event.

public class pulseimageviewmodel : inotifypropertychanged {     private brush _line1brush = brushes.yellow;     private brush _line2brush = brushes.black;      public event propertychangedeventhandler propertychanged;      public brush line1brush     {         { return _line1brush; }         set         {             if (_line1brush != value)             {                 _line1brush = value;                 notifypropertychanged("line1brush");             }         }     }     public brush line2brush     {         { return _line2brush; }         set         {             if (_line2brush != value)             {                 _line2brush = value;                 notifypropertychanged("line2brush");             }         }     }      private void notifypropertychanged(string propertyname)     {         var del = propertychanged;         if (del != null)         {             del(this, new propertychangedeventargs(propertyname));         }     } } 

yet data binding errors indicating wpf looking line1brush on top level mainwindow object instead of on pulseimageviewmodel object. thoughts on i'm doing wrong or if there's better way accomplish goal of dynamically changeable colors on vector graphics? also, nice if graphics default nice, static set of colors if user didn't hook view model object.

the staticresource going have datacontext window believe. change if use dynamicresource?

edit same results you, , snoop not being helpful. moving datacontext xaml changes nothing. fun switched pulling textbox label's content, , lo , behold works... no idea difference is.

<window.resources>     <textblock x:key="text1"                text="{binding line1brush}" /> </window.resources> <grid>     <!-- confusingly enough, works -->     <label content="{staticresource text1}"            datacontext="{binding pulseimage1}" /> </grid> 

edit 2 following works:

<datatemplate x:key="graphic1">     <image>         <image.source>             <drawingimage>                 <drawingimage.drawing>                     <drawinggroup>                         <drawinggroup.children>                             <geometrydrawing geometry="f1 m 8.4073,23.9233l">                                 <geometrydrawing.pen>                                     <pen linejoin="round"                                          brush="{binding line1brush, mode=oneway}" />                                 </geometrydrawing.pen>                             </geometrydrawing>                             <geometrydrawing geometry="f1 m 3.6875,2.56251l">                                 <geometrydrawing.pen>                                     <pen linejoin="round"                                          brush="{binding line2brush, mode=oneway}" />                                 </geometrydrawing.pen>                             </geometrydrawing>                         </drawinggroup.children>                     </drawinggroup>                 </drawingimage.drawing>             </drawingimage>         </image.source>     </image> </datatemplate> 

with xaml looking like:

<contentpresenter contenttemplate="{staticresource graphic1}"                   content="{binding pulseimage1}"                   grid.column="0" /> <contentpresenter contenttemplate="{staticresource graphic1}"                   content="{binding pulseimage2}"                   grid.column="1" />