How to Change Foreground Color of Image in View

5
votes

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>
5
imagexamlwindows-phone-7windows-phone-8styles
is it really possible? – A.K.
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. – Matthew
yes that's possible in case of a button. But changing the foreground for an independent image control isn't a possibility I guess. – A.K.
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? – venerik
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. – Matthew

5 Answers

21
votes

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...:)

3
votes

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.

2
votes

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>
1
votes

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.

0
votes

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.