如何在 Xamarin 中使用 BindingContext

Question

我是 Xamarin 的新手，但我嘗試使用 BindingContext 來設置圖像路徑首先我嘗試過

private string _imagePath;
public string ImagePath
{
    get
    {
        return _imagePath;
    }
    set
    {
        if (_imagePath != value)
        {
            _imagePath = value;
            OnPropertyChanged();
        }
    }
}

. . .

ImagePath = "TriangleSide_A.png";

. . .

<Image Source="{Binding  ImagePath}" HeightRequest="300" WidthRequest="300"/>

但是沒有運氣，然后我嘗試使用 Auto Property

public string ImagePath {get;set;}

那只適用於

public string ImagePath {get;} = "TriangleSide_A.png";

Answer 1

您的初始代碼是正確的，但您可以將 _imagePath 設置為 Auto 屬性，如下所示：

private string _imagePath { get; set; }
public string ImagePath
{
    get
    {
        return _imagePath;
    }
    set
    {
        if (_imagePath != value)
        {
            _imagePath = value;
            OnPropertyChanged();
        }
    }
}

原因

public string ImagePath {get;set;}

不起作用是因為您需要在 setter 中使用 OnPropertyChanged()。

Answer 2

根據你的描述，我不知道你是如何實現 INotifyPropertyChanged 接口的，一般我是這樣的：

public class ViewModelBase : INotifyPropertyChanged
{

    public event PropertyChangedEventHandler PropertyChanged; 
    public void RaisePropertyChanged(string propertyName)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

RaisePropertyChanged 喜歡您的 OnPropertyChanged 方法，其 PropertyName 已更改。 如果我們訪問我們的屬性，我們現在需要更新它，以在每次更改屬性時引發此事件。

從您的代碼中，您沒有在 OnPropertyChanged 中添加 propertyname，因此無法更新 ImagePath。

請看下面的代碼：

 <StackLayout>
        <Image
            HeightRequest="300"
            Source="{Binding ImagePath}"
            WidthRequest="300" />

        <Button
            x:Name="btn1"
            Clicked="Btn1_Clicked"
            Text="change image source" />
    </StackLayout>

 public partial class Page32 : ContentPage, INotifyPropertyChanged
{
    private string _imagePath;
    public string ImagePath
    {
        get { return _imagePath; }
        set
        { 
            if (_imagePath != value)
            {
                _imagePath = value;
                RaisePropertyChanged("ImagePath");
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;      
    public void RaisePropertyChanged(string propertyName)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }
    public Page32()
    {
        InitializeComponent();
        ImagePath = "a11.jpg";
        this.BindingContext = this;
    }

    private void Btn1_Clicked(object sender, EventArgs e)
    {
        ImagePath = "a12.jpg";
    }
}

更新：

如果你想在 mvvm 模式下使用綁定，我做了一些代碼，你可以看看：

這是 ImageOnClick 模型，包含一些屬性。

 public class ImageOnClick:ViewModelBase
{
    private string _imagePath;
    public string ImagePath
    {
        get { return _imagePath; }
        set
        {

            if (_imagePath != value)
            {
                _imagePath = value;
                RaisePropertyChanged("ImagePath");
            }
        }
    }
}

現在將此模型綁定到 contentpage

 public partial class Page32 : ContentPage
{
    private ImageOnClick imagemodel;       
    public Page32()
    {
        InitializeComponent();

        imagemodel = new ImageOnClick() { ImagePath = "a11.jpg" };

        this.BindingContext = imagemodel;
    }

    private void Btn1_Clicked(object sender, EventArgs e)
    {
       imagemodel.ImagePath = "a12.jpg";
    }
}

關於mvvm綁定，你也可以看看：

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/xaml/xaml-basics/data-bindings-to-mvvm