¿Cómo puedo cambiar el color de una imagen en Silverlight/WP7 (máscara de color)?

Question

Tengo un botón de alternar con un png que tiene un fondo transparente y un primer plano negro. Si el botón está seleccionado, entonces quiero que el color negro de la imagen cambie a un color elegido por el usuario. ¿Hay alguna manera de hacer esto en Silverlight y/o wp7?

Así, por ejemplo:

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

MyImage.png tiene un fondo transparente y un primer plano negro. El color preferido del usuario es rojo. Cuando se activa el botón, quiero que el primer plano negro de la imagen se vuelva rojo.

Answer 1

Me gustaría probar el enfoque OpacityMask. Básicamente debe ser algo como esto:

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

cambiando la propiedad de llenado del rectángulo que se obtendría diferente imagen coloreada.

Answer 2

¿Cuánto control tiene el usuario sobre el color?

Si seleccionan de un conjunto limitado (por ejemplo, rojo, verde, azul, negro, marrón), lo más simple sería vincular la fuente de la imagen a una variable que contenga el nombre de la imagen y luego cambiar qué nombre se mantiene en esa variable.

Si pueden elegir cualquier color, debe realizar un procesamiento de imagen para cambiar los píxeles negros de una imagen de referencia al color seleccionado, escribirlos en el almacenamiento aislado y vincular el origen de la imagen a ese nuevo archivo.

Otra alternativa es dibujar el botón en XAML y luego puede tener control directo sobre el color de primer plano. This MSDN page describe los conceptos básicos del dibujo. Se pueden utilizar los mismos comandos para definir la imagen de un botón, como se describe en this page del blog de Scott Gu:

(esta es la imagen del código del blog).

Si vincula el color a una variable, el usuario puede cambiar el color de la imagen. Sin embargo, confía en que puedas dibujar la imagen en XAML.