Mvvm 绑定Plugin.Media fromViewModel

我有一个处理Plugin.Media的视图模型，可以从手机上拍照。除非我将下面的代码（视图模型）放在后面的代码中，否则图像不会显示，然后它就可以正常工作了，这与我学习MVVM的目标背道而驰。我还尝试了“

FileImageSource

”并以各种方式使用了“

Source”

”

谁能解释我做错了什么

查看模型：

public string FilePath { get => _filepath; set { _filepath = value; OnPropertyChanged(); } }
private string _filepath;

public Command CaptureImage
    {
        get
        {
            return new Command(TakePicture);
        }
    }

//

private async void TakePicture()
{
        if (!CrossMedia.Current.IsCameraAvailable || !CrossMedia.Current.IsTakePhotoSupported)
        {
            //say something
            return;
        }

        var file = await CrossMedia.Current.TakePhotoAsync(new Plugin.Media.Abstractions.StoreCameraMediaOptions
        {
            Directory = "FoodSnap",
            Name = GetTimestamp(DateTime.Now),
            PhotoSize = Plugin.Media.Abstractions.PhotoSize.Custom,
            CustomPhotoSize = 50
        });

        if (file == null)
            return;

        FilePath = file.Path;            

}

<pages:PopupPage
    xmlns:pages="clr- 
    namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:vm="clr-namespace:TacticalFitness.ViewModels"
    x:Class="TacticalFitness.Views.PopUps.AddFoodSnapPopUp">

<BindableObject.BindingContext>
    <vm:AddSnapViewModel/>
</BindableObject.BindingContext>
<StackLayout>
        <Image Source="{Binding FilePath}" HeightRequest="150" BackgroundColor="LightGray" >
           <Image.GestureRecognizers>
                <TapGestureRecognizer
                    Command="{Binding CaptureImage}"
                    NumberOfTapsRequired="1" />
            </Image.GestureRecognizers>
        </Image>
</StackLayout>
</pages:PopupPage> 

XAML:

public string FilePath { get => _filepath; set { _filepath = value; OnPropertyChanged(); } }
private string _filepath;

public Command CaptureImage
    {
        get
        {
            return new Command(TakePicture);
        }
    }

//

private async void TakePicture()
{
        if (!CrossMedia.Current.IsCameraAvailable || !CrossMedia.Current.IsTakePhotoSupported)
        {
            //say something
            return;
        }

        var file = await CrossMedia.Current.TakePhotoAsync(new Plugin.Media.Abstractions.StoreCameraMediaOptions
        {
            Directory = "FoodSnap",
            Name = GetTimestamp(DateTime.Now),
            PhotoSize = Plugin.Media.Abstractions.PhotoSize.Custom,
            CustomPhotoSize = 50
        });

        if (file == null)
            return;

        FilePath = file.Path;            

}

<pages:PopupPage
    xmlns:pages="clr- 
    namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:vm="clr-namespace:TacticalFitness.ViewModels"
    x:Class="TacticalFitness.Views.PopUps.AddFoodSnapPopUp">

<BindableObject.BindingContext>
    <vm:AddSnapViewModel/>
</BindableObject.BindingContext>
<StackLayout>
        <Image Source="{Binding FilePath}" HeightRequest="150" BackgroundColor="LightGray" >
           <Image.GestureRecognizers>
                <TapGestureRecognizer
                    Command="{Binding CaptureImage}"
                    NumberOfTapsRequired="1" />
            </Image.GestureRecognizers>
        </Image>
</StackLayout>
</pages:PopupPage> 

---

如果您想从视图模型中使用它，请将视图模型的一个实例分配给页面的

BindingContext

，以便这是代码中唯一的一行

public YourPage()
{
    InitializeComponent();

    BindingContext = new YourViewModel();
}

现在应该可以了

更新

从您的XAML中，我看到：

<Image.Source>
    <StreamImageSource Stream="{Binding NewImage}"/>
</Image.Source>

---

其中

Stream

是

Stream

的一种类型，但您正在为其分配

ImageSource

。你可以这么做：

你说这个代码有效吗？那么问题是什么呢？它只在XAML文件的代码隐藏中起作用，在这里我可以引用图像控件的x:Name。它在视图模型中不起作用。我假设我在XAML中没有正确的绑定属性。您的图像没有指定x:名称抱歉，我不明白（我是新手）。我认为ViewModel的要点是您不需要x:Name，因为这只是用于代码背后。是否使用image x:Name作为图像控件的绑定引用？提前谢谢。抱歉，我确实在XAML中绑定了ViewModel，我已经更新了上面的XAML代码。我会试试你提到的，看看它是否有帮助。更新了答案你让我走上了正确的轨道…我在上面做了，它起作用了。