Recolor region of image in C#

Question

I'm working on building a diagnostic reader for my car. I can parse the messages from my OBD port but I want to create a display that is better than just a text readout. I want a graphical display of my car that will highlight the affected areas of the diagnostics. So if the tire pressure is low I want the tires on a picture of the car to turn red. I want to develop this in C# since that is what I'm the most familiar with. Any suggestions on what might be the best way to do this? It would also be nice if the method scaled with resizing the window.

<Image x:Name ="Bubble" Height="445" HorizontalAlignment="Left" Margin="42,12,0,0" Stretch="Fill" VerticalAlignment="Top" Width="654" Source="/WpfApplication1;component/Images/bubble.png" Panel.ZIndex="0" Opacity="1"/>
<Image x:Name="Smiley" Height="445" HorizontalAlignment="Left" Margin="42,12,0,0" Stretch="Fill" VerticalAlignment="Top" Width="654" Source="/WpfApplication1;component/Images/bubble.png" Panel.ZIndex="1" Opacity="0"/>
<Button Content="Button" Height="35" HorizontalAlignment="Left" Margin="10,46,0,0" Name="button1" VerticalAlignment="Top" Width="24" Click="button1_Click" />
<Button Content="Button" Height="50" HorizontalAlignment="Left" Margin="14,118,0,0" Name="button2" VerticalAlignment="Top" Width="22" Click="button2_Click" />

And then to change the opacity.

Bubble.Opacity = 0.0;
Smiley.Opacity = 1.0;

Answer 1

One way of doing this is having multiple images, and fading the opacity. You just need to make sure the image format supports transparency (png-s do nicely). Let's say you have a car image, and separate overlays for front and rear wheel. Keeping all images the same size for easy alignment.

You'll get something like

<Image x:Name="car" Source="car.png" Panel.ZIndex="0"/>
<Image x:Name="frontwheel" Source="frontwheel.png" Panel.ZIndex="1" Opacity="0"/>
<Image x:Name="rearwheel" Source="readwheel.png" Panel.ZIndex="2" Opacity="0"/>

Then in the code

frontwheel.Opacity=1.0;

Edit: here's a snippet from some code of mine. I add graphics to the canvases in the code-behind

        <Grid Margin="20">
            <Image Name="image1" Width="640" Height="640"  
                   Opacity="{Binding Path=Value, ElementName=OpSlider}"
                   HorizontalAlignment="Center" 
                   />
            <Canvas Name="MarkerLayer" 
                   Opacity="{Binding Path=Value, ElementName=DotOverlaySlider}"
                   />
            <Canvas x:Name="Squares"
                    Opacity="{Binding Path=Value, ElementName=OverlayOpSlider}"
                    />
        </Grid>

Opacity here is bound to sliders

            <Slider x:Name="OpSlider"  Width="150" SmallChange="0.05" Maximum="1" Value="0.5" />
            <Slider x:Name="OverlayOpSlider" Width="150" SmallChange="0.05" Maximum="1" Value="1" />
            <Slider x:Name="DotOverlaySlider" Width="150" SmallChange="0.05" Maximum="1" Value="0.8" />