在 Xamarin 中使用 MVVM 捕获和更新图像源答案

【问题标题】：Capturing and updating an image source using MVVM in Xamarin在 Xamarin 中使用 MVVM 捕获和更新图像源
【发布时间】：2019-03-21 01:38:22
【问题描述】：

我正在尝试拍摄照片并在 Xamarin 中显示拍摄的图像，但更改图像源绑定似乎不起作用。这看起来很简单，所以我不太确定哪里出错了。

MainPageViewModel.cs

public class MainPageViewModel : ViewModelBase
{

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

    public DelegateCommand TakePhotoCommand { get; private set; }

    public MainPageViewModel(INavigationService navigationService, IPageDialogService pageDialogService)
        : base(navigationService)
    {
        Title = "Main Page";

        _dialogService = pageDialogService;

        TakePhotoCommand = new DelegateCommand(TakePhoto);

    }


    async void TakePhoto()
    {

        await CrossMedia.Current.Initialize();

        if (!CrossMedia.Current.IsCameraAvailable || !CrossMedia.Current.IsTakePhotoSupported)
        {
            await _dialogService.DisplayAlertAsync("No Camera", ":( No camera avaialble.", "OK");

            return;
        }


        var file = await CrossMedia.Current.TakePhotoAsync(new Plugin.Media.Abstractions.StoreCameraMediaOptions
        {
            PhotoSize = Plugin.Media.Abstractions.PhotoSize.Medium,
            Directory = "Sample",
            Name = "test.jpg"
        });

        if (file == null)
            return;

        // This does get called ok
        ImageSource = file.Path;

    }
}

ViewModelBase.cs

public class ViewModelBase : BindableBase, INavigationAware, IDestructible
{
    protected INavigationService NavigationService { get; private set; }

    private string _title;
    public string Title
    {
        get { return _title; }
        set { SetProperty(ref _title, value); }
    }

    public ViewModelBase(INavigationService navigationService)
    {
        NavigationService = navigationService;
    }

    public virtual void OnNavigatedFrom(NavigationParameters parameters)
    {

    }

    public virtual void OnNavigatedTo(NavigationParameters parameters)
    {

    }

    public virtual void OnNavigatingTo(NavigationParameters parameters)
    {

    }

    public virtual void Destroy()
    {

    }
}

MainPage.xaml

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="PhotoTesting.Views.MainPage"
             Title="{Binding Title}">

    <StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
        <Image Source="{Binding ImageSource}" WidthRequest="200" HeightRequest="200" Aspect="AspectFill" />
        <Button x:Name="CameraButton" Text="Take Photo" Command="{Binding TakePhotoCommand}" />
    </StackLayout>

</ContentPage>

我知道图像捕获位工作正常，问题似乎只是在页面加载后设置image.source。

【问题讨论】：

在您想要更新 UI 的任何时候都不需要 RaisePropertyChanged 吗？
据我所知，等待致电SetProperty 即可。它适用于标签等，但不适用于图像。
您在 Android 或 iOS 上进行测试。我认为这可能是权限问题。
我正在 Android 上进行测试。还没有在 iOS 上尝试过。

标签： c# xamarin mvvm prism

【解决方案1】：

您需要将 Image 的 Source 属性绑定到 ImageSource 在 MainPage.xaml
ImageSource 对象可以从文件流中获取。代码如下：

public class MainPageViewModel : ViewModelBase
{
    private ImageSource _imageSource;
    public ImageSource ImageSource
    {
        get { return _imageSource; }
        set
        {
            _imageSource = value;
            SetProperty(ref _imageSource, value);
        }
    }

    public DelegateCommand TakePhotoCommand { get; private set; }

    public MainPageViewModel(INavigationService navigationService, IPageDialogService pageDialogService)
        : base(navigationService)
    {
        Title = "Main Page";

        _dialogService = pageDialogService;

        TakePhotoCommand = new DelegateCommand(TakePhoto);

    }

    async void TakePhoto()
    {
        await CrossMedia.Current.Initialize();

        if (!CrossMedia.Current.IsCameraAvailable || !CrossMedia.Current.IsTakePhotoSupported)
        {
            await _dialogService.DisplayAlertAsync("No Camera", ":( No camera avaialble.", "OK");

            return;
        }

        var file = await CrossMedia.Current.TakePhotoAsync(new Plugin.Media.Abstractions.StoreCameraMediaOptions
        {
            PhotoSize = Plugin.Media.Abstractions.PhotoSize.Medium,
            Directory = "Sample",
            Name = "test.jpg"
        });

        if (file == null)
            return;

        // Here is the problem
        //ImageSource = file.Path;

        // This is the fix
        ImageSource = ImageSource.FromStream(() => file.GetStream());
    }
}

【讨论】：