Correct way to get uri of image embedded as resource in UWP class library

Question

I have a UserControl in a class library for UWP. The usercontrol is going to be displaying signal level of the GPS.

I am using a BitmapIcon which displays the Signal level and it changes based on a signal level property. I am using a BitmapIcon so that I can change the foreground colour for themes etc.

Anyway, here is the xaml

<BitmapIcon Grid.Column="1" UriSource="{Binding GpsSignalState, Converter={StaticResource SignalImageConverter}}" 
                Foreground="{Binding Foreground, ElementName=userControl}"/>

It's bound to a property in the ViewModel and uses a converter to convert the signal to the correct image.

Here is the converter code.

public object Convert(object value, Type targetType, object parameter, string language)
    {
        if(value.GetType() != typeof(SignalStrength))
            return null;

        var signal = (SignalStrength)value;

        switch (signal)
        {
            case SignalStrength.Excellent:
                return new Uri("ms-appx:///Assets/Img/Signal-Bars 4.png");
            case SignalStrength.VeryGood:
                return new Uri("ms-appx:///Assets/Img/Signal-Bars 3.png");
            case SignalStrength.Good:
                return new Uri("ms-appx:///Assets/Img/Signal-Bars 2.png");
            case SignalStrength.Valid:
                return new Uri("ms-appx:///Assets/Img/Signal-Bars 1.png");
            case SignalStrength.Bad:
                return new Uri("ms-appx:///Assets/Img/Signal-Bars 0.png");
            default:
                throw new ArgumentOutOfRangeException();
        }
    }

As you can see the images are located in a folder Called /Assets/Img/

The images are set to build type as Embedded Resource.

I imagine someone may ask this so the assembly name is Hardware.Sensors.GPS

My issue is that the images never show. I get no error and I can put a break point in the converter to that it executes.

I have tried various ways of building a uri such as

Uri("/Assets/Img/Signal-Bars 4.png", UriKind.Relative);

and

Uri("ms-appx:///Assets/Img/Signal-Bars 4.png");

and

Uri("ms-appx:///Hardware.Sensors.GPS,component;/Assets/Img/Signal-Bars 4.png");

but none seem to work.

Any ideas?

Answer 1

Actually I think the problem is not related to Build Action, you can set Build Action to:

I think the problem is with your Images, as you can see from the official document of BitmapIcon class, in the "Remarks" part:

The file that you use should be a solid image on a transparent background.

I replaced your images with some images downloaded from here, it works. This BitmapIcon control will redraw the part filled with solid brush(un-transparent) of the source image with the Foreground color.

So, first method, you can replace your Images.

Sencond I think you can use a Image control like this:

<Image Grid.Column="1" Source="{Binding GpsSignalState, Converter={StaticResource SignalImageConverter}}" />

There is no Foreground property of Image control, but it doesn't mean that you can't set a Foreground cover a Image control, you can for example do it like this:

<Grid Grid.Column="1">
    <Image Source="{Binding GpsSignalState, Converter={StaticResource SignalImageConverter}}" />
    <Rectangle VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Opacity="0.4"
               Fill="{Binding Foreground, ElementName=userControl}" />
</Grid>

But this method is unlike setting the Foreground property to BitmapIcon, if you insist replacing the transparent background with the Foreground color of the image, you should use BitmapIcon.