我正在使用轮播视图来显示许多图像，这些图像在滑动时会发生变化。我遇到的问题是这些图像不能缩放。有没有办法在轮播视图中启用缩放？谢谢。
【问题讨论】：
标签： c# xamarin.forms carousel zooming
好的，所以 First Thing first Carousel View 不是你想要缩放的东西（对于实际案例） 并且根据客户对 Galaxy 事物的要求，您可以通过一些逻辑来解决问题
第一种方式：
在您的共享 Xamarin.forms 解决方案中创建一个类名称 ZoomImage 并在其中添加此代码
public class ZoomImage : Image {
private const double MIN_SCALE = 1;
private const double MAX_SCALE = 4;
private const double OVERSHOOT = 0.15;
private double StartScale;
private double LastX, LastY;
public ZoomImage() {
var pinch = new PinchGestureRecognizer();
pinch.PinchUpdated += OnPinchUpdated;
GestureRecognizers.Add(pinch);
var pan = new PanGestureRecognizer();
pan.PanUpdated += OnPanUpdated;
GestureRecognizers.Add(pan);
var tap = new TapGestureRecognizer { NumberOfTapsRequired = 2 };
tap.Tapped += OnTapped;
GestureRecognizers.Add(tap);
Scale = MIN_SCALE;
TranslationX = TranslationY = 0;
AnchorX = AnchorY = 0;
}
protected override SizeRequest OnMeasure(double widthConstraint, double heightConstraint) {
Scale = MIN_SCALE;
TranslationX = TranslationY = 0;
AnchorX = AnchorY = 0;
return base.OnMeasure(widthConstraint, heightConstraint);
}
private void OnTapped(object sender, EventArgs e) {
if (Scale > MIN_SCALE) {
this.ScaleTo(MIN_SCALE, 250, Easing.CubicInOut);
this.TranslateTo(0, 0, 250, Easing.CubicInOut);
}
else {
AnchorX = AnchorY = 0.5; //TODO tapped position
this.ScaleTo(MAX_SCALE, 250, Easing.CubicInOut);
}
}
private void OnPanUpdated(object sender, PanUpdatedEventArgs e) {
if (Scale > MIN_SCALE)
switch (e.StatusType) {
case GestureStatus.Started:
LastX = TranslationX;
LastY = TranslationY;
break;
case GestureStatus.Running:
TranslationX = Clamp(LastX + e.TotalX * Scale, -Width / 2, Width / 2);
TranslationY = Clamp(LastY + e.TotalY * Scale, -Height / 2, Height / 2);
break;
}
}
private void OnPinchUpdated(object sender, PinchGestureUpdatedEventArgs e) {
switch (e.Status) {
case GestureStatus.Started:
StartScale = Scale;
AnchorX = e.ScaleOrigin.X;
AnchorY = e.ScaleOrigin.Y;
break;
case GestureStatus.Running:
double current = Scale + (e.Scale - 1) * StartScale;
Scale = Clamp(current, MIN_SCALE * (1 - OVERSHOOT), MAX_SCALE * (1 + OVERSHOOT));
break;
case GestureStatus.Completed:
if (Scale > MAX_SCALE)
this.ScaleTo(MAX_SCALE, 250, Easing.SpringOut);
else if (Scale < MIN_SCALE)
this.ScaleTo(MIN_SCALE, 250, Easing.SpringOut);
break;
}
}
private T Clamp<T>(T value, T minimum, T maximum) where T : IComparable {
if (value.CompareTo(minimum) < 0)
return minimum;
else if (value.CompareTo(maximum) > 0)
return maximum;
else
return value;
}
}
现在在轮播视图中的 Xaml 中使用这样的图像
<cv:CarouselView x:Name="itemPictureGallery" Grid.Column="0" Grid.Row="0">
<cv:CarouselView.ItemTemplate>
<DataTemplate>
<local:image source="YOUR_PIC_SOURCE" />
</DataTemplate>
</cv:CarouselView.ItemTemplate>
</cv:CarouselView>
别忘了在 Xamal 中添加命名空间
xmlns:local="clr-namespace:YOUR_APP_NAME"
这就是图像可以缩放的方式
或者第二种方式是
在轮播视图上添加一个点击的项目并在命令参数中传递图片源并打开一个包含该图片的新页面并在其中应用缩放
我用这个逻辑来解决我的问题
希望这会有所帮助:)
【讨论】：
这可以通过使用来实现
alexrainman/CarouselView 用于轮播视图。 https://github.com/alexrainman/CarouselView
并根据表单示例将 Xamarin 表单捏合手势识别器添加到轮播视图中使用的图像中
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/gestures/pinch
【讨论】：