How to programatically change image color?

Question

I have a method that is triggered every time a user performs an action, within this method I want to trigger the color of an image to change color/illuminate every time the method is called.

Is there a simple way to change the color an image programmatically? I can't see any obvious methods or properties to do this attached to the image.

So the method below is as follow just not sure how to set the image color for BoxBagImage

void matcher_GestureMatch(Gesture gesture)
{
     lblGestureMatch.Content = gesture.Name;
     scoreCntr++;

     boxBagImage.    // <-- don't see any color or background property belonging to the image
     lblScoreCntr.Content = scoreCntr;            
}

Answer 1

What would setting it do? How WPF should guess what "background" you have in mind? There's couple of things that could be called 'background'. Also, how would WPF guess how large area you consider to be the background?

Let's start with the fact that Image displays a bitmap (or such) all over its area, so direct Foreground or Background are rather meaningless here. They would be overdrawn by the bitmap immediately. It's not like TextBox or Canvas.

That's probably why Image does not have such property.

--

If your bitmap itself has a "background" (ie. a drawing of a Tree on a blue sky, sky=background), it is still the content of the bitmap. WPF is not an image-editing program and will not change it for you easily. If you want to change the "background" withing your image, you can load the bitmap, modify its pixels, and load the modified bitmap into Image control. Or apply some smart filter (so-called "effect") at rendering stage.

Or, if your bitmap is transparent (for example, PNG with alpha channel, a Tree on a completely-alphaized-transparent pixels), and you want the "some background" to be seen through that "transparent gaps", then you have to set the background of not the image itself, but the component that the image lies on. So, if you have for example:

<Grid>   <Image Source=.... />   </Grid>

then apply the Background on the Grid. Transparent-Image placed on a Blue-Grid will look as if were on blue background, just like drawing on a glass placed on blue table. In fact, the Grid here simply forms the background. You can get any layout or effect in that way. If you dont want to have whole grid in that color, you can inject another grid:

<Grid>
    <Grid Background="Blue" Margins="30,30,30,30"> <Image Source=.... /> </Grid>
</Grid>

or whatever you like.

Or, if you meant the "background" of the Image control that shows up when the Image has its Stretch property set in a such way, that the bitmap does not fill the whole area (Stretch=Uniform likes to do that unless you carefully set Width/Height) - then simply look above. The "area" is simply transparent, so just add some color to the component beneath Image.