How to change the color of an image in silverlight/WP7 (Color Mask)

silverlightwindows-phone-7

I have a toggle button with a png that has a transparent background and a black foreground. If the button is selected then I want the black color of the image to change to a color chosen by the user. Is there a way to do this in Silverlight and/or wp7?

So for example:

<ToggleButton>
    <Image Source="MyImage.png" />
</ToggleButton>

MyImage.png has a transparent background and a black foreground. The user's preferred color is red. When the button is toggled on I want the black foreground of the image to turn red.

Best Answer

I would try OpacityMask approach. Basicaly it should look something like this:

<Rectangle Fill="Red">
  <Rectangle.OpacityMask>
    <ImageBrush ImageSource="MyImage.png"/>
  </Rectangle.OpacityMask>
</Rectangle>

by changing rectangle's fill property you would get different colored image.

Related Topic