在 CarouselView 中縮放圖像並滑動到下一張圖像后，上一張圖像未以其原始形式顯示，而是以縮放類型圖像顯示

Question

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

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

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

更多關於PinchToZoomContainer.cs的代碼可以參考官方Creating a PinchToZoom container 。