如何将 Xamarin.Essentials MediaPicker 与 MVVM 和 DataBinding 一起使用

Question

我正在尝试在我的应用程序中拍摄照片，因为这需要在不同的页面上实现，我需要它在 MVVM 架构中工作。当我在后面的相机页面代码上测试它时，它工作得非常好，但是一旦我实现 DataBinding 和 MVVM，模拟器相机就无法初始化。我没有收到任何构建或部署错误，也不知道从哪里开始寻找。该文档没有太大帮助。每次打开应用程序时都需要保存和重复使用捕获的图像 - 或许要记住这一点。

这是我的 ViewModel：

using System.Collections.Generic;
using System.Text;
using Xamarin.Essentials;
using Xamarin.Forms;
using XamCam.Views;
using MvvmHelpers;
using System.ComponentModel;
using System.Windows.Input;

namespace XamCam.ViewModels
{
    public class CameraViewModels : BaseViewModel
    {
        public CameraViewModels()
        {
            TakePhoto = new Command(OnTakePhoto);
        }

        public ICommand TakePhoto { get; }

        private Image image; // = new Image();
        public Image CamImage
        {
            get => image;
            set
            {
                if (image == value)
                    return;
                image = value;
                OnPropertyChanged();
            }
        }

        async void OnTakePhoto()
        {
            var result = await MediaPicker.CapturePhotoAsync();

            if (result != null)
            {
                var stream = await result.OpenReadAsync();

                image.Source = ImageSource.FromStream(() => stream);
            }
        }
    }
}

这是我的视图 XAML：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:viewmodels="clr-namespace:XamCam.ViewModels" 
             x:DataType="viewmodels:CameraViewModels"
             x:Class="XamCam.Views.Camera"
             BackgroundColor="AliceBlue">
    <ContentPage.BindingContext>
        <viewmodels:CameraViewModels/>
    </ContentPage.BindingContext>
    <ContentPage.Content>
        <StackLayout BindingContext="CameraViewModel">
            <Label Text="Welcome to The XamCam!" />
            <Button Text="Take Photo"
                    Command="{Binding TakePhoto}"/>
            <Image BindingContext="{Binding CamImage}"/>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

我怀疑这与我的 CamImage 属性有关，但我对此很陌生，我不确定这是否是绑定媒体对象的正确方法。

Answer 1

我怀疑这与我的 CamImage 属性有关，但我对此很陌生，我不确定这是否是绑定媒体对象的正确方法。

我建议你可以在 CameraViewModels 中添加ImageSource1 属性，而不是Image 属性。

public class CameraViewModels : INotifyPropertyChanged
{
    public CameraViewModels()
    {
        TakePhoto = new Command(OnTakePhoto);
    }

    public ICommand TakePhoto { get; }

    private ImageSource image;
    public ImageSource CamImage
    {
        get => image;
        set
        {
            if (image == value)
                return;
            image = value;
            RaisePropertyChanged("CamImage");
        }
    }

    async void OnTakePhoto()
    {
        var result = await Xamarin.Essentials.MediaPicker.CapturePhotoAsync();

        if (result != null)
        {
            var stream = await result.OpenReadAsync();

            CamImage = ImageSource.FromStream(() => stream);
        }
    }
    public event PropertyChangedEventHandler PropertyChanged;


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

<ContentPage
x:Class="App1.MainPage"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:App1">
<ContentPage.BindingContext>
    <local:CameraViewModels />
</ContentPage.BindingContext>

<StackLayout>
    <StackLayout>
        <Label Text="Welcome to The XamCam!" />
        <Button Command="{Binding TakePhoto}" Text="Take Photo" />
        <Image Source="{Binding CamImage}" />
    </StackLayout>
</StackLayout>