图像未显示在 MVVM XAML Xamarin 表单上

Question

我已经尝试了 2 天，无法在我的 Xaml 上显示来自 MVVM Xamarin 表单的图像。如果有人可以帮助我解决这个问题，我将不胜感激。 这是我的代码：

XAML

<Grid>
    <Grid.RowDefinitions>
         <RowDefinition Height="*" />
         <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
         <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
     <Image Source="{Binding GetImageSource}"  Grid.Column="0" Grid.Row="0" HorizontalOptions="Center" />
       <Image Source="camera.png" HorizontalOptions="Center" Grid.Column="0" Grid.Row="1">
       <Image.GestureRecognizers>
           <TapGestureRecognizer Command="{Binding TakePhoto}" />
       </Image.GestureRecognizers>
     </Image>
</Grid>

我的视图模型

使用 Plugin.Media（从图库中选择图片）

我用过 TapGestureRecognizer

哪个工作正常

private ImageSource imageSource { get; set; }

public ImageSource GetImageSource
{
    get { return imageSource; }
    set
    {
        imageSource = value;
    }
}

if (!CrossMedia.Current.IsPickPhotoSupported)
{
    var message = "Picking image is not supported";
    DependencyService.Get<IMessage>().ShortAlert(message);
    return;
}
var files = await CrossMedia.Current.PickPhotoAsync();
if (files == null)
    return;

GetImageSource = ImageSource.FromStream(() =>
{
    var stream = files.GetStream();

    return stream;
});
var ms = new MemoryStream();
files.GetStream().CopyTo(ms);
files.Dispose();
imgAsBytes = ms.ToArray();
ms.Dispose();

我设法以字节为单位获取图像，这很好，但我无法显示图像。 提前感谢您的支持。

Answer 1

尝试为您的 ViewModel 类实现 INotifyPropertyChanged 并将 PropertyChanged 调用到您的属性设置器。喜欢，

public event PropertyChangedEventHandler PropertyChanged;
public ImageSource GetImageSource
{
    get { return imageSource; }
    set
    {
        imageSource = value;
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(GetImageSource)));
    }
}

Answer 2

这是我的 Xamarin MVVM 解决方案。首先是图像的 XAML 和选择它的按钮：

  <Image x:Name="WaypointImage" Source="{Binding MyImage}" HorizontalOptions="CenterAndExpand"/>
  <Button Text="Gallery" FontSize="Large" Command="{Binding SelectPhoto}"    HorizontalOptions="FillAndExpand" BorderWidth="2" CornerRadius="20" Margin="2, 10, 2, 20"/>

这在 C# ViewModel 代码中绑定到这个数据结构：

   private ImageSource _myImage;
   public ImageSource MyImage
   {
      get => _myImage;
      set
      {
         _myImage = value;
         RaisePropertyChanged(() => MyImage);
         // take any additional actions here which are required when MyImage is updated
      }
   }

最后，同一文件中的代码从图库中选择图片，复制到本地应用缓存，并设置MyImage显示：

   public MvxCommand SelectPhoto => new MvxCommand(SelectPhotoAsync);
   public async void SelectPhotoAsync()
   {
      try
      {
         var photo = await MediaPicker.PickPhotoAsync();
         await LoadPhotoAsync(photo);
         Console.WriteLine($"CapturePhotoAsync COMPLETED: {MyFilename}");
      }
      catch (FeatureNotSupportedException fnsEx)
      {
         // Feature is not supported on the device
      }
      catch (PermissionException pEx)
      {
         // Permissions not granted
      }
      catch (Exception ex)
      {
         Console.WriteLine($"PickPhotoAsync THREW: {ex.Message}");
      }
   }

   async Task LoadPhotoAsync(FileResult photo)
   {
      // canceled
      if (photo == null)
      {
         MyFilename = null;
         return;
      }
      // save the file into local storage
      var newFile = Path.Combine(FileSystem.CacheDirectory, photo.FileName);
      using (var stream = await photo.OpenReadAsync())
         using (var newStream = File.OpenWrite(newFile))
         await stream.CopyToAsync(newStream);
      
      MyFilename = newFile;
      // bug currently prevents storing image in DB
      // byte[] readBytes = File.ReadAllBytes(MyFilename);
      // waypoint.Image = readBytes.ToArray();
      // Just store filename and use local storage for image instead of DB
      waypoint.FileName = newFile;
      StoreWaypoint();
      MyImage = ImageSource.FromFile(newFile);
   }
}