How to get Target Image assets respond to RequestedTheme(Dark, High Contrast) in UWP

Question

How to get Target Image assets respond to RequestedTheme(Dark, High Contrast) in UWP

Siddesh 26

Created a Windows 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 different folder with 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="Default">
            <Style x:Key="WelcomepageImage" TargetType="Image">
                <Setter Property="Source" Value="/Resources/Assets/welcome_image.png"/>                            
            </Style>
        </ResourceDictionary>
        <ResourceDictionary x:Key="Dark">
            <Style x:Key="WelcomepageImage" TargetType="Image">
                <Setter Property="Source" value="/Resources/Assets/theme-dark/welcome_image.png"/>
            </Style>
        </ResourceDictionary>                
    </ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>

And the XAML to show the Image as necessary.

<Grid>        
    <Image Style="{ThemeResource WelcomepageImage}">
    </Image>
</Grid>

When I Run the app with a Default 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 and its showing blank.

For example, when I set the path to /Resources/Assets/welcome_screen.png, I get the default Image behavior. When I set the path to /Resources/Assets/theme-dark/welcome_screen.png and I changed to dark theme. No image is loaded.

As far as I'm 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?. Please provide solution for my queries.

Anonymous

2022-03-25T02:45:52.66+00:00

Haven't heard from you for a while. Any updates about this issue?

1 answer

Your answer

Anonymous

2022-03-25T02:45:52.66+00:00

Haven't heard from you for a while. Any updates about this issue?

Answer 1

Nico Zhu (Shanghai Wicresoft Co,.Ltd.) 12,866

Hello,
Welcome to Microsoft Q&A!

switch back to my app I can see that the background color is updated however my image is not updated dynamically and its showing blank.

I made a code sample with above xaml code. it could work well when switch app's theme. in general, if the dark theme image file's build action or file path is not correct will cause above problem.

please go to the file and check if the image file's build action is Content like the following

Thank you.

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Siddesh 26 Reputation points

2022-03-08T11:05:01.297+00:00

Hi Nico,
I verified Image property build action is Content like u mentioned in attached Image. For dark mode Image its not updating dynamically.
Please find Image folder path. Please lets know what's wrong in creating folder path?
Nico Zhu (Shanghai Wicresoft Co,.Ltd.) 12,866 Reputation points

2022-03-09T07:31:23.377+00:00

the image file has stored in assets folder, why your file path contains Resources folder?
Siddesh 26 Reputation points

2022-03-11T10:15:11.597+00:00

Hi Nico,
I have placed wrong attachment. Please find attached image folder structure.
Siddesh 26 Reputation points

2022-03-11T10:16:42.83+00:00

Please find attached image folder structure image.
Nico Zhu (Shanghai Wicresoft Co,.Ltd.) 12,866 Reputation points

2022-03-14T03:20:48.91+00:00

Can you try to move Assets folder to root folder ?
Siddesh 26 Reputation points

2022-03-14T07:44:43.443+00:00

Hi Nico,
I have moved Assets folder to root folder. then also it's not working.
Nico Zhu (Shanghai Wicresoft Co,.Ltd.) 12,866 Reputation points

2022-03-18T09:37:31.973+00:00

Ok I got it, you may need to refer Load images and assets tailored for scale, theme, high contrast, and others document. and set image source like this directly <Image x:Name="myXAMLImageElement" Source="ms-appx:///Assets/welcome_image.png"/>. and it will match image file automatically when update theme.
Siddesh 26 Reputation points

2022-03-19T13:13:34.587+00:00

Hi Nico,
I tried this method before. It will work only after changing theme we need to relaunch the app it will update theme. Dynamically it won't work.
Please share sample code for to work dynamically after applying theme.

Nico Zhu (Shanghai Wicresoft Co,.Ltd.) 12,866

I found you custom image style for each themes, have you tried to set image source for each themes

<ResourceDictionary.ThemeDictionaries>
    <ResourceDictionary x:Key="Light">
        <ImageSource x:Key="MyImage">ms-appx:///Assets/light-icon.png</ImageSource>

        <SolidColorBrush x:Key="IconColor" Color="Black" />
    </ResourceDictionary>

    <ResourceDictionary x:Key="Dark">
        <ImageSource x:Key="MyImage">ms-appx:///Assets/dark-icon.png</ImageSource>

        <SolidColorBrush x:Key="IconColor" Color="White" />
    </ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>



 <Image
        Grid.Row="1"
        VerticalAlignment="Center"
        Source="{ThemeResource MyImage}" />

Siddesh 26 Reputation points

2022-03-25T06:11:50.65+00:00

Hi Nico,
Please share the folder structure for image.
Nico Zhu (Shanghai Wicresoft Co,.Ltd.) 12,866 Reputation points

2022-03-28T01:28:44.153+00:00

Just place the image file under Assets folder without theme folder.
Siddesh 26 Reputation points

2022-12-14T12:40:59.097+00:00

Thanks Nico, It's working perfectly for light and dark mode. It's not changing dynamically for HIghContrastWhite and HIghContrastBlack images. Used below code <ResourceDictionary x:Key="HighContrastWhite"> <Style TargetType="Image" x:Key="MyImage"> <Setter Property="Source" Value="ms-appx:///Assets/highcontrastwhite-WelcomeImage.png"/> </Style> </ResourceDictionary> <ResourceDictionary x:Key="HighContrastBlack"> <Style TargetType="Image" x:Key="MyImage"> <Setter Property="Source" Value="ms-appx:///Assets/highcontrastblack-WelcomeImage.png"/> </Style> </ResourceDictionary> </ResourceDictionary.ThemeDictionaries> . Please help me out to resolve this issue.

Share via

How to get Target Image assets respond to RequestedTheme(Dark, High Contrast) in UWP

1 answer

Your answer