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

Question

After Zooming the image in CarouselView and swiping the image to other image and coming back to that image which i had zoomed the image is already zoomed, as i want the image should come to its original form when i swipe to other image.

Here is my below XMAl code:-

<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>

Answer 1

You can refer to the following code. When you click the button, the image will display original size. You can add the code of Button_Clicked to PositionChanged or CurrentItemChanged :

MainPage.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>

MainPage.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;            
         }        
      }    
    }
}

For more code about PinchToZoomContainer.cs, you can refer to Creating a PinchToZoom container by official.