Change image based on Theme selection for Light or Dark

Question

I'am creating a Windows Phone 8.1 app in which I use a number of images that should be shown according to the selected Theme Light or Dark.

The Light and Dark image are created with the correct naming and scaling.

I've created the following ThemeResource to set the Image Source according to the selected Theme.

<ResourceDictionary>
    <ResourceDictionary.ThemeDictionaries>
        <ResourceDictionary x:Key="Light">
            <Style x:Key="ShowImage" TargetType="Image">
                <Setter Property="Source" Value="Assets/image.png"/>                            
            </Style>
        </ResourceDictionary>
        <ResourceDictionary x:Key="Dark">
            <Style x:Key="ShowImage" TargetType="Image">
                <Setter Property="Source" value="Assets/image.png"/>
            </Style>
        </ResourceDictionary>                
    </ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>

And the XAML to show the Image as necessary.

<Grid>        
    <Image HorizontalAlignment="Center" 
           VerticalAlignment="Center" 
           Stretch="None" 
           Style="{ThemeResource ShowImage}">
    </Image>
</Grid>

When I start the app with a theme selected the correct image is shown every time. However when I select a different theme and then switch back to my app I can see that the background color is updated however my image is not updated dynamically.

As far as I'am aware the ThemeResource should be used to update this dynamically but I can't get it to work. Does anybody know what is wrong with my XAML code?

Akshay Jain Akshay Jain · Accepted Answer · 2015-05-11T11:56:53

The code you posted works perfectly fine for me. Can you post more details on how to reproduce the issue. This is what I have done.

Opened the app
It displayed correct image according to theme
Minimized app using Start button
Changed theme and restored app

It changed both, the background and corresponding image. Please check again if you are making some other mistake and in the code your posted you are setting image source to same image in both the themes

<Setter Property="Source" value="Assets/image.png"/>

Change image based on Theme selection for Light or Dark

1 Answers