如何使用 MVVM 和 Xamarin 在 XAML 中动态更改图像源答案

【问题标题】：How to change an image source dynamically in XAML using MVVM with Xamarin如何使用 MVVM 和 Xamarin 在 XAML 中动态更改图像源
【发布时间】：2016-12-26 01:52:48
【问题描述】：

我正在尝试更改 ContentPage 上的图像源属性。我正在使用绑定上下文来执行此操作。但是，即使我在模型视图中更改源，这也不会更新我视图中的图像。

UpdateMethod()
{
    imageSource1 = imageSource[1];
}

public string ImageSource1
{
    get
    {
        return imageSource1;
    }

    set
    {
        imageSource1 = value;
        this.Notify("ImageSource1");
    }
}

XAML：

<ContentView HorizontalOptions="Center" Grid.Row="0" >
    <Image ClassId = "1" Source="{Binding ImageSource1}" BindingContextChanged="Handle_BindingContextChanged">
        <Image.GestureRecognizers>
            <TapGestureRecognizer  Command="{Binding OnTapGestureRecognizerTappedCommand1}" NumberOfTapsRequired="1" />
        </Image.GestureRecognizers>
    </Image>            
</ContentView>

【问题讨论】：

标签： c# image xaml xamarin xamarin.forms

【解决方案1】：

当您绑定ImageSource 时，使用Xamarin.Forms.ImageSource 作为属性的返回类型。或者，如果您指定文件路径，则可以使用它的派生类，如 FileImageSource。还要确保该路径存在于本机项目中。

【讨论】：

【解决方案2】：

Image 组件接受ImageSource（FileImageSource、StreamImageSource 等）。幸运的是，ImageSource 类具有针对字符串的隐式运算符，该运算符从关于格式（url 或路径）的字符串创建自身。检查以下示例：

Xaml

<Image Source="{Binding ImagePath}">
  <Image.GestureRecognizers>
    <TapGestureRecognizer Command="{Binding ImageTapCommand}" />
  </Image.GestureRecognizers>
</Image>

ViewModel.cs：

public class SomeViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    public ICommand ImageTapCommand { get; set; }


    private string imagePath;
    public string ImagePath
    {
        get { return imagePath; }
        set
        {
            imagePath = value;
            PropertyChanged(this, new PropertyChangedEventArgs("ImagePath"));
        }
    }

    public SomeViewModel()
    {
        ImageTapCommand = new Command(CmdTapImage);
    }


    private void CmdTapImage()
    {
        ImagePath = YourNewImagePath;
    }
}

【讨论】：

当图片在列表视图中时如何更改？

【解决方案3】：

首先在您的视图模型中添加 de ImageSource，不要忘记包含 Xamarin.Forms 依赖项...

    private ImageSource _imageSource;
public ImageSource ImageSource
{
    get { return _imageSource; }
    set
    {
        _imageSource= value;
        PropertyChanged(this, new PropertyChangedEventArgs("ImageSource"));
    }
}

在此之后，在您的 xaml 文件中包含 de 源绑定：

     <Image Source="{Binding ImageSource}">
        <!--<Image.GestureRecognizers>
            <TapGestureRecognizer Command="{Binding ImageTapCommand}" />
        </Image.GestureRecognizers>-->
    </Image>

这是一个“棱镜示例”

        private ImageSource _imageSource;
    public ImageSource ImageSource
    {
        get { return _imageSource; }
        set { SetProperty(ref _imageSource, value); }
    }

【讨论】：