c# - 在 Xamarin 中使用 MVVM 捕获和更新图像源

Question

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

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页面加载后。

Answer 1

您需要绑定(bind)来源 的属性(property)图片 到 图片来源 在 MainPage.xaml
图片来源 可以从文件流中获取对象。这是代码:

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());
    }
}