在 Xamarin 中使用 MVVM 捕获和更新映像源

Question

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

主页视图模型.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;
}
}

视图模型库.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

您需要将Image的Source属性绑定到 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());
}
}