How to swap images based on current WP7 theme

Question

I did not pass certification because I have an image in which everything is white. Therefore, when a user switches to a light theme, it fails because you cannot see it. How to change this image based on the theme used?

Thank you in advance

Answer 1

In xaml

<Image Source="{Binding ImageSource}" /> 

In a view model that contains the ImageSource property

 public string ImageSource { get { if( (Visibility)App.Current.Resources["PhoneDarkThemeVisibility"] == Visibility.Visible ) { return "/path/to/dark/image.png"; } else { return "/path/to/light/image.png"; } } private set {} } 

This may not change the image if the user puts a tombstone on your application, changes the theme and switches back to the application.

One way to handle this scenario is to cache the current theme setting in the constructor of the application class, and then compare it with the current value in App.Application_Activated , if they are different, you need to somehow indicate that the above model view needs to run a notification about the property change for ImageSource .

Answer 2

Question Creating image control inverts its colors depending on the theme has a simple XAML answer:

 <Image HorizontalAlignment="Center"Stretch="None" Visibility="{StaticResource PhoneLightThemeVisibility}" Source="/MyApplication;component/imageDarkTheme.png" /> <Image HorizontalAlignment="Center" Stretch="None" Visibility="{StaticResource PhoneDarkThemeVisibility}"Source="/MyApplication;component/imageLightTheme.png" /> 

Answer 3

For everyone who follows my comments above, I had to switch from ImageBrush to image directly (xaml below)

 <Button Tag="{Binding}" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="-10,20,0,0" BorderThickness="0" Width="105" Height="102" Click="ShowKioskOnMap_Click"> <Image Source="../images/arrow.png" Width="55" Height="53" ImageOpened="Image_ImageOpened"/> </Button> 

Further in the page builder that I use, I looked at the topic to prevent any problems from occurring when the state of the application is restored, for example, from a phone call (or just downloading the image for the first time)

  InitializeComponent(); theme = ""; //field level var (could make it dark by default if needed) if ((Visibility)App.Current.Resources["PhoneDarkThemeVisibility"] == Visibility.Visible) { theme = "dark"; } else { theme = "light"; } 

And I had to implement the following in my open event to switch to the topic

  private void Image_ImageOpened(object sender, RoutedEventArgs e) { var brush = (sender as Image); if (brush.Stretch == Stretch.Uniform) { if (theme == "light") brush.Source = new BitmapImage(new Uri("../images/arrowLight.png", UriKind.Relative)); brush.Stretch = Stretch.Fill; } }