具有缩放和平移功能的 Xamarin MVVM 图像查看器

Question

我有一个显示整页图像的 Xamarin MVVM 类。代码如下所示。单击即可关闭视图。我的问题是如何实现平移或缩放。我能找到的唯一东西是为 Xamarin Forms 编写的，我不知道如何使它们适应 MVVM。谢谢。

<?xml version="1.0" encoding="utf-8" ?>
<views:MvxContentPage x:TypeArguments="viewModels:ImageViewModel"
                  xmlns="http://xamarin.com/schemas/2014/forms"
                  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                  xmlns:views="clr-namespace:MvvmCross.Forms.Views;assembly=MvvmCross.Forms"
                  xmlns:viewModels="clr-namespace:BLE.Client.ViewModels;assembly=BLE.Client"
                  x:Class="BLE.Client.Pages.ImagePage" Title="View Image">
   <Grid>
      <Grid.RowDefinitions>
         <RowDefinition Height="*"></RowDefinition>
      </Grid.RowDefinitions>
      <StackLayout Grid.Row="0" Orientation="Horizontal" >
         <Image x:Name="WaypointImage" Source="{Binding MyImage}" HorizontalOptions="FillAndExpand">
           <Image.GestureRecognizers>
              <TapGestureRecognizer   Command="{Binding TapCommand}"/>
              <PinchGestureRecognizer Command="{Binding PinchCommand}"/>
              <PanGestureRecognizer   Command="{Binding PanCommand}"/>
           </Image.GestureRecognizers>
         </Image>
      </StackLayout>
  </Grid>
</views:MvxContentPage>


using System;
using System.Windows.Input;
using Xamarin.Forms;
using Acr.UserDialogs;
using MvvmCross;
using MvvmCross.ViewModels;
using MvvmCross.Navigation;
using Plugin.BLE.Abstractions.Contracts;

namespace BLE.Client.ViewModels
{
    public class ImageViewModel : BaseViewModel
    {
       private ImageSource _myImage;
       public ImageSource MyImage
       {
          get => _myImage;
          set
          {
             _myImage = value;
             RaisePropertyChanged(() => MyImage);
          }
       }

   private readonly IUserDialogs _userDialogs;
   private readonly IMvxNavigationService _navigation;

   public String _waypoint;
   public Waypoint waypoint;

   public ICommand tapCommand;
   public ICommand TapCommand {
      get { return tapCommand; }
   }

   public ICommand pinchCommand;
   public ICommand PinchCommand {
      get { return pinchCommand; }
   }

   public ICommand panCommand;
   public ICommand PanCommand {
      get { return panCommand; }
   }

   public ImageViewModel(IAdapter adapter, IUserDialogs userDialogs) : base(adapter)
   {
      _userDialogs = userDialogs;
      _navigation = Mvx.IoCProvider.Resolve<IMvxNavigationService>();

      tapCommand   = new Command (OnTapped);
      pinchCommand = new Command (OnPinched);
      panCommand   = new Command (OnPan);
   }

   void OnTapped (object s)  {
      Console.WriteLine($"OnTapped: {s}");
      _navigation.Close(this);
   }

   void OnPinched (object s)  {
      Console.WriteLine($"OnPinched: {s}");
   }

   void OnPan (object s)  {
      Console.WriteLine($"OnPan: {s}");
   }

   public override async void Prepare(MvxBundle parameters)
   {
      base.Prepare(parameters);

      _waypoint = await GetWaypointFromBundleAsync(parameters);
      string[] tags = _waypoint?.Split(' ');
      char[] trimChars = { 'I', 'D', '=' };
      string id = tags[0].TrimStart(trimChars);
      int ID = System.Convert.ToInt32(id);
      waypoint = await Database.GetWaypointAsync(ID);
      MyImage = ImageSource.FromFile(waypoint.FileName);
      Console.WriteLine($"prepare       ID={waypoint.ID} {waypoint.FileName} ");
   }

    public override void ViewAppeared()
   {
      base.ViewAppeared();
      if (_waypoint != null)
      {
         return;
      }
      _navigation.Close(this);
   }

    public override void ViewDisappearing()
   {
      base.ViewDisappearing();
   }

    public override void ViewDisappeared()
   {
      base.ViewDisappeared();
   }
}

}

Answer 1

更新：

我找到了一个更好的解决方案，如下：

我对捏平问题的回答

这是我之前的答案这在一定程度上有效，但我无法触发捏合和平移手势：

我找到了一个 MVVM 解决方案，它利用了可绑定属性图像：TranslationX、TranslationY 和 Scale。以下是相关代码更改。我通过修改 OnTapped 方法中的 MyImageTranslationX 进行了测试，发现图像向右移动。

现在我只需要让 Image.GestureRecognizers（PinchGestureRecognizer 和 PanGestureRecognizer）正常工作，然后添加我在其他地方看到的代码即可平滑平移和缩放。

 <Image x:Name="WaypointImage"
         Source="{Binding MyImage}"
         Scale   = "{Binding MyImageScale}"
         TranslationX = "{Binding MyImageTranslationX}"
         TranslationY = "{Binding MyImageTranslationY}"
         HorizontalOptions="FillAndExpand">
    <Image.GestureRecognizers>
      <TapGestureRecognizer   Command="{Binding TapCommand}"/>
      <PinchGestureRecognizer Command="{Binding PinchCommand}"/>
      <PanGestureRecognizer   Command="{Binding PanCommand}"/>
    </Image.GestureRecognizers>
 </Image>

   public double _myImageScale = 1.0;
   public double MyImageScale
   {
      get => _myImageScale;
      set
      {
         _myImageScale = value;
         RaisePropertyChanged(() => MyImageScale);
      }
   }
   public double _myImageTranslationX = 0;
   public double MyImageTranslationX
   {
      get => _myImageTranslationX;
      set
      {
         _myImageTranslationX = value;
         RaisePropertyChanged(() => MyImageTranslationX);
      }
   }
   public double _myImageTranslationY = 0;
   public double MyImageTranslationY
   {
      get => _myImageTranslationY;
      set
      {
         _myImageTranslationY = value;
         RaisePropertyChanged(() => MyImageTranslationY);
      }
   }
   private ImageSource _myImage;
   public ImageSource MyImage
   {
      get => _myImage;
      set
      {
         _myImage = value;
         RaisePropertyChanged(() => MyImage);
      }
   }

   void OnTapped (object s)  {
      Console.WriteLine($"OnTapped: {MyImage}");
      MyImageTranslationX = MyImageTranslationX + 100;
      // _navigation.Close(this);
   }