在 Xamarin 中使用 MVVM 捕获和更新图像源 [英] Capturing and updating an image source using MVVM in Xamarin

问题描述

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

I'm trying to capture photo and display the captured image in Xamarin but changing the image source binding just doesn't seem to work. This seems really simple so I'm not quite sure where I'm going wrong.

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.

I know the image capture bit is working ok, the problem just seems to be setting the image.source after the page has loaded.

推荐答案

需要绑定Image的Source属性 到 MainPage.xaml
中的 ImageSourceImageSource 对象可以从文件流中获取.代码如下:

You need to bind the Source property of Image to an ImageSource in MainPage.xaml
The ImageSource object can be obtained from the file stream. Here is the code:

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

这篇关于在 Xamarin 中使用 MVVM 捕获和更新图像源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！