Changing/Updating Image in XAML-CodePudding

I'm having an issue updating my Images in my Xamarin UWP app. First, I'd like to say I have seen multiple other threads on this issue, but none have been able to solve my predicament and a lot are very outdated.

Here is my scenario: I have three images I am using, named green.png, red.png, and gray.png. I am displaying one Image in my Xamarin app, and depending on a specific float called in my associated .cs file, I want to change the Image to another color. So, for example, if the float goes below 15, I want the Image to be the Red one.

Here is how I am currently displaying my Images without code for changing them, i.e. this code works fine and my Images appear in the app:

<Image Source="{pages:ImageResource BLE.Client.Pages.red.png}" Opacity="0.6"/>

They are currently stored in the same directory as the XAML files themselves. I know that on Android there is a Resources folder, but I don't see any equivalent for UWP, so I am loading my Images this way.

One way I attempted to do this based on another post I saw here is this:

<Image Source="{Binding HeadColor, StringFormat='pages:ImageResource BLE.Client.Pages.\{0\}.png', Mode=TwoWay}" Opacity="0.6"/>

The way this is supposed to function is depending on the value of my float, I used the string HeadColor in my .cs file and do an OnPropertyChanged on it. It always contains either the string "green", "red", or "gray", and with this method it should slot itself into the Image location string. However, this does not work.

For reference, here is how I update my HeadColor string in my .cs file:

private string _HeadColor;
public string HeadColor {get => _HeadColor; set {_HeadColor = value; OnPropertyChanged("HeadColor");}}
...
if (SensorAvgValue > 15) {_HeadColor = "green";}
else                     {_HeadColor = "red";}
RaisePropertyChanged(() => HeadColor);

I have also tried using an IValueConverter, but that does not work either.

So, in summary, my question is how to best go about dynamically changing which Image I'd like to use. They are all the same dimensions and in the same directory, the only difference being their names "green.png", "red.png", and "gray.png". Is there a better way to call/load the Images?

Thanks!

CodePudding user response：

this works for me on iOS - I don't have a UWP env to test with, but it should work the same. I have two images "reddot.png" and "greendot.png" in my iOS Resources

<StackLayout Padding="20,50,20,50">
    <Image Source="{Binding HeadColor, StringFormat='\{0\}dot.png'}" Opacity="0.6"/>
    <Button Clicked="ChangeColor" Text="Click!!" />
</StackLayout>

code-behind

public partial class MainPage : ContentPage, INotifyPropertyChanged
{
    private string headColor = "red";

    public string HeadColor
    {
        get
        { 
          return headColor; 
        }
        set 
        {
            headColor = value;
            OnPropertyChanged();
        }
    }

    public MainPage()
    {
        InitializeComponent();

        this.BindingContext = this;
    }

    protected void ChangeColor(object sender, EventArgs args)
    {
        if (HeadColor == "red")
        {
            HeadColor = "green";
        }
        else
        {
            HeadColor = "red";
        }
    }
}