BitmapIconSource in a ResourceDictionary.ThemeDictionaries (UWP)-CodePudding

I would like to change the BitmapIcon of a NavigationViewItem depending on the current Windows theme.

I've added a ResourceDictionary.ThemeDictionaries to the MainPage like that:

<Page.Resources>
    <ResourceDictionary>
        <ResourceDictionary.ThemeDictionaries>

            <ResourceDictionary x:Key="Light">
                <BitmapIconSource x:Key="ProductionBitmap"
                                UriSource="/Assets/Images/ProduccioBlau.png" />
            </ResourceDictionary>

            <ResourceDictionary x:Key="Dark">
                <BitmapIconSource x:Key="ProductionBitmap"
                                UriSource="/Assets/Images/Produccio.png" />
            </ResourceDictionary>


            <ResourceDictionary x:Key="HighContrast">
                <BitmapIconSource x:Key="ProductionBitmap"
                                UriSource="/Assets/Images/Produccio.png" />
            </ResourceDictionary>

        </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>
</Page.Resources>

And then in the NavigationViewItem:

<NavigationViewItem Content="Ordres fabricació"
                    Tag="OrdresFabricacio">
    <NavigationViewItem.Icon>
        <BitmapIcon UriSource="{ThemeResource ProductionBitmap}"
                    ShowAsMonochrome="False" />
    </NavigationViewItem.Icon>
</NavigationViewItem>

But I get a squiggling line on UriSource="{ThemeResource ProductionBitmap}" saying:

The resource ProductionBitmap has an incompatible type.

What is the proper way to use a themed resource in this case?

The application compiles without errors, but I get an exception at run time when the themed resource is evaluated.

CodePudding user response：

The issue is that you can't set the value of the UriSource property of the BitmapIcon in such a way. You could directly store the string value of the path of the image in the ResourceDictionary. Then using ThemeResource to get the string value.

Like this:

      <ResourceDictionary>
        <ResourceDictionary.ThemeDictionaries>
            <ResourceDictionary x:Key="Light">
                <x:String x:Key="ProductionBitmap" >/Assets/london.png</x:String>
                <!--<BitmapIconSource x:Key="ProductionBitmap" UriSource="/Assets/london.png" />-->
            </ResourceDictionary>

            <ResourceDictionary x:Key="Dark">
                <x:String x:Key="ProductionBitmap" >/Assets/paris.png</x:String>
                <!--<BitmapIconSource x:Key="ProductionBitmap"  UriSource="/Assets/paris.png" />-->
            </ResourceDictionary>


            <ResourceDictionary x:Key="HighContrast">
                <x:String x:Key="ProductionBitmap" >/Assets/paris.png</x:String>
                <!--<BitmapIconSource x:Key="ProductionBitmap" UriSource="/Assets/paris.png" />-->
            </ResourceDictionary>
        </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>
</Page.Resources>

Use it like this:

  <BitmapIcon UriSource="{ThemeResource ProductionBitmap}"  ShowAsMonochrome="False" />