如何在 XAML 中重新加载图像？

Question

我正在编写一个 UWP。在这个应用程序的界面中，按钮下有一个 Image 和一个绑定到图像集合的 ObservableCollection。

<Image VerticalAlignment="Center"
    HorizontalAlignment="Center" Stretch="Fill"
    x:Name="FlatWallpaperUI"/>

但是，这些图像在选择某种重音颜色时会进行处理并变化。 例如，当应用程序启动时，图像会以正确的颜色加载：

我正在尝试通过重置 ObservableCollection 或将 Bitmapimage 重新分配给 XAML 中的图像来重新加载这些图像。 例如，我将位图图像重新分配给按钮下的图像：

ButtonImage.Source = new BitmapImage(new Uri("ms-appx:///Assets/wallpaper2.png"));

对于 ObservableCollection，我尝试清空它，然后阅读这些项目：

Items.Clear();
Items.Add(new ItemClass
  {
    Name = "First item",
    Image = new BitmapImage(new Uri("ms-appx:///Assets/wallpaper1.png"))
  });
Items.Add(new ItemClass
  {
    Name = "Second item",
    Image = new BitmapImage(new Uri("ms-appx:///Assets/wallpaper2.png"))
  });

我知道这可能是错误的方法，但我已经研究了一段时间，到目前为止还没有明确的解决方案。

在这张图片上，您会看到颜色发生了变化，但图片本身没有！

即使应该处理的图像本身已经成功更改！

我怎样才能解决这个问题并在需要时更新图像？

Answer 1

首先：我同意您可以共享更多代码。图片不错，但对解决您的问题没有太大帮助。

第二：我的猜测是您假设更改 ObservableCollection 元素的属性将触发更新，但事实并非如此。如果我在这里是一个可能的解决方案，如果我的猜测不好，请编辑您的问题并澄清：

你可以像这样创建自己的 ObservableCollection 并监听一些元素的修改：

public class ModelBase : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    protected void RaisePropertyChanged(String PropName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(PropName));
        }
    }

    protected void SetAndRaisePropertyChanged<T>(ref T Prop, T value, [CallerMemberName] String PropName = "")
    {
        Prop = value;
        RaisePropertyChanged(PropName);
    }
}

public class CustomCollection<T> : ObservableCollection<T> where T : ModelBase
{
    public event PropertyChangedEventHandler ChildrenPropertyChanged;
    protected override void ClearItems()
    {
        base.ClearItems();

        foreach (var item in this)
        {
            DisposeItem(item);
        }
    }

    protected override void InsertItem(int index, T item)
    {
        base.InsertItem(index, item);
        item.PropertyChanged += Model_PropertyChanged;
    }

    protected override void RemoveItem(int index)
    {
        base.RemoveItem(index);
        DisposeItem(this[index]);
    }

    private void DisposeItem(ModelBase model)
    {
        model.PropertyChanged -= Model_PropertyChanged;
    }

    private void Model_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
    {
        ChildrenPropertyChanged.Invoke(sender, e);
    }
}

然后在你的代码中你可以这样听：

private CustomCollection<ItemClass> m_Items = new CustomCollection<ItemClass>();
public CustomCollection<ItemClass> Items
{
    get { return m_Items; }
    set => SetAndRaisePropertyChanged(ref m_Items, value);
}

[...]

Items.ChildrenPropertyChanged += Items_ChildrenPropertyChanged;

[...]

private void Items_ChildrenPropertyChanged(object sender, PropertyChangedEventArgs e)
{
    [...] // here you force the refresh by raising the property changed for example
}