Как масштабировать изображения в ListView в Xamarin с помощью шаблона MVVM?

Question

Я новичок в Xamarin и особенно в MVVM. У меня есть ListView, который показывает мне изображения.

      <ListView ItemsSource="{Binding Urls}" IsVisible="True" VerticalScrollBarVisibility="Always" 
          HorizontalScrollBarVisibility="Always" HorizontalOptions="Fill" VerticalOptions="Fill"  
          HasUnevenRows="True">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout Orientation="Vertical" HorizontalOptions="Fill" VerticalOptions="FillAndExpand" Padding="2">
                    <ffimageloading:CachedImage Source="{Binding .}" Aspect="AspectFill" Margin="15">
                        <ffimageloading:CachedImage.GestureRecognizers>                                        
                            <TapGestureRecognizer Command="{Binding Source={x:Reference ImgListView},Path=BindingContext.ImageDoubleTappedCommand}" />
                        </ffimageloading:CachedImage.GestureRecognizers>
                    </ffimageloading:CachedImage>
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Теперь я хочу, чтобы масштабирование происходило при двойном нажатии и сведении пальцев для увеличения. Я нашел разные ссылки в Интернете, но они не реализуют MVVM. Например: https://www.c-sharpcorner.com/article/zoom-in/ . Как я могу получить функцию масштабирования в MVVM?

Answer 1

Я просто использовал код для запуска события и использовал там логику масштабирования:

      <TapGestureRecognizer Tapped="TapGestureRecognizer_TappedAsync" />

Следующая логика взята из ссылки: https://www.c-sharpcorner.com/article/zoom-in/

      double currentScale = 1;
double startScale = 1;
double xOffset = 0;
double yOffset = 0;
private void TapGestureRecognizer_TappedAsync(object sender, System.EventArgs e)
{
    var Content = ((FFImageLoading.Forms.CachedImage)sender);

    double multiplicator = Math.Pow(2, 1.0 / 10.0);
    startScale = Content.Scale;
    Content.AnchorX = 0;
    Content.AnchorY = 0;

    for (int i = 0; i < 10; i++)
    {
        currentScale *= multiplicator;
        double renderedX = Content.X + xOffset;
        double deltaX = renderedX / Content.Width;
        double deltaWidth = Content.Width / (Content.Width * startScale);
        double originX = (0.5 - deltaX) * deltaWidth;

        double renderedY = Content.Y + yOffset;
        double deltaY = renderedY / Content.Height;
        double deltaHeight = Content.Height / (Content.Height * startScale);
        double originY = (0.5 - deltaY) * deltaHeight;

        double targetX = xOffset - (originX * Content.Width) * (currentScale - startScale);
        double targetY = yOffset - (originY * Content.Height) * (currentScale - startScale);

        Content.TranslationX = Math.Min(0, Math.Max(targetX, -Content.Width * (currentScale - 1)));
        Content.TranslationY = Math.Min(0, Math.Max(targetY, -Content.Height * (currentScale - 1)));

        Content.Scale = currentScale;
        //await Task.Delay(10);
    }

    xOffset = Content.TranslationX;
    yOffset = Content.TranslationY;
}