How to Change Foreground Color of Image in View

Question

I have a horizontal StackPanel of an Image and TextBlock. What I need to accomplish is changing the foreground of both to a certain color. I can easily change the TextBlock with the Foreground property, but I am not sure how to do this with an Image. The image is just a basic app icon.

<StackPanel Orientation="Horizontal">
    <Image Source="/Assets/Icons/appbar.book.perspective.png" Width="50" Height="50" Margin="-8,0,-6,0"/>
    <TextBlock Text="BOOK" VerticalAlignment="Center" Foreground="Blue"/>
</StackPanel>

Rutledge

is it really possible? – Neoteny

I have accomplished this before using a style when the button is pressed, changing the foreground. If i remember correctly the content of the button style was the Image, inside of a Border. on the Pressed State the foreground was changed. – Rutledge

yes that's possible in case of a button. But changing the foreground for an independent image control isn't a possibility I guess. – Neoteny

Please add an (mocked) example of what you want to see. Other question: do you want the foreground always to be blue or can it have another color as well? – Marroquin

I will have to add a sample later on today, but I would like the foreground to change as well, I will be setting the foreground from the code behind. – Rutledge

Answer 1

BitmapIcon is helpful for what you can use instead:

<BitmapIcon Width="20" Height="20" Foreground="Red" UriSource="ms-appx:///Assets/Resources/YourImage.png" />

That's my way...:)

Tasia

This should be the answer of the question if UWP app is developed. – Doggish

Answer 2

Instead of having an ImageViewer and Textblock use Grid and Textblock. Give the background of grid as desired image source.Place a Textblock inside the grid.And assign the text to the TextBlock inside the grid. You can accomplish your task.

Supererogate

Answer 3

Do you want to change image background color then take image with transparent backround and set code as below

    <StackPanel Orientation="Horizontal">
        <Grid Background="Blue" Width="50" Height="50" Margin="-8,0,-6,0">
            <Image Source="/Assets/Icons/appbar.book.perspective.png" />
        </Grid>
        <TextBlock Text="BOOK" VerticalAlignment="Center" Foreground="Blue"/>
    </StackPanel>

Topless

Unfortunately that only changes the background color, not the foreground color of the image, which is a plain white png like the application bar buttons. – Rutledge

can you please uplaod the img ?? – Topless

Answer 4

You can't set the foreground of an image. The color of the image is imbedded in the png file.

What you could do is create a filter and put it over a colored backgroud. Suppose you've got an image of a book in black (foreground) and white (background). If you want the book to be blue (foreground) you first create a filter with a white background and a transparant foreground. Then you put that filter on a blue grid like this:

<StackPanel>
    <Grid Background="Blue" Width="50" Height="50" Margin="-8,0,-6,0">
        <Image Source="/Assets/book.white.filter.png"/>
    </Grid>
</StackPanel>

If you have to support both black and white theme's you'll need to creat a filter with a black background and a transparant foreground as well. Then you'll have to set the source of the image according to the selected theme.

Marroquin

Ok, when you say filter you mean just the png image itself. And toggle which image is displayed based on the theme correct? I mean I could always modify the foreground in paint.net and then add the new image to my solution, and it would have the color required, but I have accomplished changing the foreground before in a button style on the pressed state, so i figured it could be done too being presented on the screen. I think you guessed right, I may have multiple themes and so will need to support multiple foregrounds for the text and image. I'd like to avoid adding several images if possible – Rutledge

Answer 5

It might be simpler to create a copy of the image and edit it in Photoshop, GIMP or Paint.NET. These apps have tools for swapping pixel colors.

Then you can either swap out the image URI to switch the image. Or you can overlay the foreground color image overtop of the main image, setting its Visibility=Collapsed. Then set Visibility=Visible as needed.

If you are using the standard black/white app icons, they have versions that are white-on-black and black-on-white.

Laryngoscope

Yes, this would be a last resort. I have done this in the past, but I'm just trying to think of ways to reduce the size of my project. – Rutledge

Using a shader would be a fast and lightweight way to handle this. But shaders are not supported in XAML projects on the phone. – Laryngoscope