[英]How to Zoom images in a ListView in Xamarin using MVVM Pattern?
I am new to Xamarin and specially to MVVM.我是 Xamarin 的新手,特别是 MVVM 的新手。 I have a ListView which is showing me Images.
我有一个显示图像的 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>
Now I want the zoom behavior with double tap and pinch to zoom.现在我想要双击和捏缩放的缩放行为。 I found different links on internet but those don't implement MVVM.
我在互联网上找到了不同的链接,但那些没有实现 MVVM。 For example: https://www.c-sharpcorner.com/article/zoom-in/ .
例如: https://www.c-sharpcorner.com/article/zoom-in/ 。 How can I get the zoom functionality in MVVM?
如何在 MVVM 中获得缩放功能?
I just used the code behind to trigger an event and use the Zoom logic over there:我只是使用后面的代码来触发一个事件并在那里使用 Zoom 逻辑:
<TapGestureRecognizer Tapped="TapGestureRecognizer_TappedAsync" />
Following logic is from the link: https://www.c-sharpcorner.com/article/zoom-in/以下逻辑来自链接: 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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.