Doug
Doug

Reputation: 6518

Making an image control invert its colors depending on theme

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.

Upvotes: 5

Views: 2897

Answers (3)

bragboy
bragboy

Reputation: 35542

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>

Upvotes: 4

Doug
Doug

Reputation: 6518

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" />

Upvotes: 4

Matt Lacey
Matt Lacey

Reputation: 65564

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.

Upvotes: 5

Related Questions