在 XAML 中更改/更新圖像

Question

我在更新 Xamarin UWP 應用程序中的圖像時遇到問題。 首先，我想說我在這個問題上看到了多個其他線程，但沒有一個能夠解決我的困境，而且很多都已經過時了。

這是我的場景：我正在使用三個圖像，分別命名為 green.png、red.png 和 gray.png。 我在我的 Xamarin 應用程序中顯示一個圖像，並且根據我的 associated.cs 文件中調用的特定浮點數，我想將圖像更改為另一種顏色。 因此，例如，如果浮點數低於 15，我希望圖像為紅色圖像。

這是我目前如何顯示我的圖像而無需更改它們的代碼，即此代碼工作正常並且我的圖像出現在應用程序中：

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

它們當前存儲在與 XAML 文件本身相同的目錄中。 我知道 Android 上有一個Resources文件夾，但我沒有看到 UWP 的任何等效項，所以我以這種方式加載我的圖像。

我嘗試根據我在此處看到的另一篇文章執行此操作的一種方法是：

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

這應該是 function 的方式取決於我的浮動值，我在 my.cs 文件中使用了字符串 HeadColor 並對其執行了 OnPropertyChanged。 它總是包含字符串“green”、“red”或“gray”，並且使用這種方法它應該將自己插入到圖像位置字符串中。 但是，這不起作用。

作為參考，這里是我如何更新 my.cs 文件中的 HeadColor 字符串：

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

我也嘗試過使用 IValueConverter，但這也不起作用。

因此，總而言之，我的問題是如何最好 go 關於動態更改我想使用的圖像。 它們都具有相同的尺寸和相同的目錄，唯一的區別是它們的名稱為“green.png”、“red.png”和“gray.png”。 有沒有更好的方法來調用/加載圖像？

謝謝！

Answer 1

這適用於我的 iOS - 我沒有 UWP 環境來測試，但它應該工作相同。 我的 iOS 資源中有兩張圖片“reddot.png”和“greendot.png”

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

代碼隱藏

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";
        }
    }
}