在 CarouselView 中缩放图像并滑动到下一张图像后，上一张图像未以其原始形式显示，而是以缩放类型图像显示答案

【问题标题】：After zooming the image in CarouselView and swiping to next image, the previous image is not display in it's original form it is in zoom type image在 CarouselView 中缩放图像并滑动到下一张图像后，上一张图像未以其原始形式显示，而是以缩放类型图像显示
【发布时间】：2023-01-30 17:03:39
【问题描述】：

在 CarouselView 中缩放图像并将图像滑动到其他图像并返回到我缩放过的图像后，图像已经缩放，因为我希望当我滑动到其他图像时图像应该回到其原始形式。

这是我下面的 XMAl 代码：-

<cards:CarouselView Grid.Row="1" PositionChanged="ImageCollection_PositionChanged" CurrentItemChanged="ImageCollection_CurrentItemChanged_1" IndicatorView="{x:Reference imageIndicator}" x:Name="ImageCollection">
                    <cards:CarouselView.ItemTemplate>
                        <DataTemplate>
                            <ContentView>
                                <Grid Padding="0" Margin="0">
                                    <pinch:PinchZoom>
                                        <pinch:PinchZoom.Content>
                                            <Image Source="{Binding image}" x:Name="ImageData" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Aspect="AspectFill">
                                            </Image>
                                        </pinch:PinchZoom.Content>
                                    </pinch:PinchZoom>
                                </Grid>
                            </ContentView>
                        </DataTemplate>
                    </cards:CarouselView.ItemTemplate>
                </cards:CarouselView>

【问题讨论】：

然后在轮播变化时重新设置缩放系数

标签： xamarin xamarin.forms xamarin.android xamarin.ios

【解决方案1】：

你可以参考下面的代码。单击该按钮时，图像将显示原始大小。您可以将Button_Clicked的代码添加到PositionChanged或CurrentItemChanged：

主页.xaml：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"             
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"             
             x:Class="Forms_CarouseIView.MainPage"             
             xmlns:local="clr-namespace:Forms_CarouseIView;assembly=Forms_CarouseIView">    
    <ContentPage.Content>          
         <StackLayout Padding="20" 
                      x:Name="stacklayout">             
             <local:PinchToZoomContainer x:Name="PinchToZoomContainer">                 
                  <local:PinchToZoomContainer.Content >                     
                           <Image Source="ddd.png"/> 
                  </local:PinchToZoomContainer.Content>            
              </local:PinchToZoomContainer>            
              <Button Text="reset" Clicked="Button_Clicked"/>        
         </StackLayout>            
    </ContentPage.Content>
</ContentPage>

主页.xaml.cs：

namespace Forms_CarouseIView
{    
    public partial class MainPage : ContentPage    
    {        
      public static double scale1;        
      public static double tx;        
      public static double ty;  
      
      public MainPage()        
      {            
        InitializeComponent();        
      }  
      
      private void Button_Clicked(object sender, EventArgs e)        
      {            
        PinchToZoomContainer.Content.Scale=scale1;            
        PinchToZoomContainer.TranslationX=tx;            
        PinchToZoomContainer.TranslationY=ty;                   
      }    
    }
}

PinchToZoomContainer.cs：

namespace Forms_CarouseIView
{    
   public class PinchToZoomContainer : ContentView    
   {           
      ...      
      void OnPinchUpdated(object sender, PinchGestureUpdatedEventArgs e)        
      {            
         if (e.Status == GestureStatus.Started)            
         {                
            ...
               
            MainPage.scale1 = Content.Scale;                                
         }            
         if (e.Status == GestureStatus.Running)            
         {                
            ...            
         }            
         if (e.Status == GestureStatus.Completed)            
         {                
            ...
                 
            MainPage.tx = -xOffset;                
            MainPage.ty = -yOffset;            
         }        
      }    
    }
}

更多关于PinchToZoomContainer.cs的代码，可以参考官方Creating a PinchToZoom container。

【讨论】：