Making an image control invert its colors depending on theme

Question

I'm trying to work out how to have an Image control in my Windows Phone application invert its colors based on the global background setting (either "Dark" or "Light") chosen by the user in Settings->Themes->Background.

Answer 1

There is no built-in way to invert image colors within the framework.

Instead, because of the overhead of doing this on the phone, you should create both versions of the image at design/build time and then choose which version to display from your code by detecting Theme Visibility and Opacity.

Answer 2

I must add that what i did in the end was a continuation of what Matt wrote.

• create two different images that have different versions of the image (dark and light) and place them in the exact same position
• set their visibility based on the theme resource

the code looks like this:

<Image Height="30" HorizontalAlignment="Center" Margin="0,0,0,220" Name="imgDark" Stretch="Fill" Visibility="{StaticResource PhoneLightThemeVisibility}" VerticalAlignment="Center" Width="30" Source="/MyApplication;component/imageDarkTheme.png" />
<Image Height="30" HorizontalAlignment="Center" Margin="0,0,0,220" Name="imgLoading" Stretch="Fill" Visibility="{StaticResource PhoneDarkThemeVisibility}" VerticalAlignment="Center" Width="30" Source="/MyApplication;component/imageLightTheme.png" />

Answer 3

This Question is 1.5 years old now. But here is the easiest way to do what you want. The example given there is very simple like

<Button>
    <Image Stretch="None" Source="{Binding Converter={StaticResource ThemedImageConverter}, ConverterParameter={StaticResource PhoneBackgroundColor} }"
           DataContext="/WP7SampleProject4;component/Images/{0}/appbar.feature.camera.rest.png" />
</Button>