C# PinchGesture Zoom-like Instagram移动馈送屏幕,Xamarin格式

C# PinchGesture Zoom-like Instagram移动馈送屏幕,Xamarin格式,c#,xamarin,xamarin.forms,zooming,pinch,C#,Xamarin,Xamarin.forms,Zooming,Pinch,我正在尝试实现类似的缩放功能,比如xamarin跨平台应用程序中的Instagram移动应用程序提要屏幕。 实际上,我想在ImageView单元格内的ListView单元格中添加挤压手势,如果用户挤压图像,它应该放大ListView。一旦用户释放夹点,它将自动调整到原始大小并适合单元格。 帮助我并提供解决方案 下面的示例代码工作正常,但在单元格内进行缩放,这与Instagram的缩放重叠/覆盖效果不同 XAML代码 <ListView x:Name="listView" ItemSelec

我正在尝试实现类似的缩放功能,比如xamarin跨平台应用程序中的Instagram移动应用程序提要屏幕。 实际上,我想在
ImageView
单元格内的
ListView
单元格中添加挤压手势,如果用户挤压图像,它应该放大
ListView
。一旦用户释放夹点,它将自动调整到原始大小并适合单元格。
帮助我并提供解决方案


下面的示例代码工作正常,但在单元格内进行缩放,这与Instagram的缩放重叠/覆盖效果不同

XAML代码

<ListView x:Name="listView" ItemSelected="PlayerList_OnItemSelected"  HasUnevenRows="false" RowHeight="300" BackgroundColor="#F6F3F6" 
RelativeLayout.XConstraint=
"{ConstraintExpression Type=RelativeToParent,
Property=Width, Factor=0}" 

RelativeLayout.YConstraint=
"{ConstraintExpression Type=RelativeToParent,
Property=Height, Factor=.09}"

RelativeLayout.HeightConstraint=
"{ConstraintExpression Type=RelativeToParent,
Property=Height, Factor=.91}"

RelativeLayout.WidthConstraint=
"{ConstraintExpression Type=RelativeToParent,
Property=Width, Factor=1}">
<ListView.ItemTemplate>
    <DataTemplate>
<ViewCell >
<Frame Margin="5" Padding="5"  OutlineColor="White" HasShadow="true">

<RelativeLayout >
<Label Font="Bold,20" Text="{Binding name}" TextColor="Black"
        RelativeLayout.YConstraint="{ConstraintExpression 
        Type=RelativeToParent,
        Property=Height,
        Factor=.0}"
        RelativeLayout.XConstraint="{ConstraintExpression 
        Type=RelativeToParent, 
        Property=Width, 
        Factor=.02}"
        RelativeLayout.WidthConstraint="{ConstraintExpression 
        Type=RelativeToParent, 
        Property=Width,
        Factor=.9}"/>

    <local:PinchToZoomContainer RelativeLayout.WidthConstraint="{ConstraintExpression
        Type=RelativeToParent,
        Property=Width, 
        Factor=1}"
        RelativeLayout.XConstraint="{ConstraintExpression
        Type=RelativeToParent,
        Property=Width, 
        Factor=0}" 

        RelativeLayout.YConstraint="{ConstraintExpression 
        Type=RelativeToParent, 
        Factor=.15, 
        Property=Height}">

        <local:PinchToZoomContainer.Content>
                <Image x:Name="imgBg" HeightRequest="180" Aspect="AspectFill" BackgroundColor="#F0F3F4"  Margin="1,1,1,-1" Source="{Binding thumbnail, Converter={StaticResource GetFeedImage}}" />
            </local:PinchToZoomContainer.Content>
        </local:PinchToZoomContainer>


    <Label FontSize="10" TextColor="#96AAC0" HorizontalTextAlignment="Center" HeightRequest="40" Text="{Binding posted_at}" 
        RelativeLayout.YConstraint="{ConstraintExpression 
        Type=RelativeToParent,
        Property=Height,
        Factor=.02}"
        RelativeLayout.XConstraint="{ConstraintExpression 
        Type=RelativeToParent, 
        Property=Width, 
        Factor=.81}"
        RelativeLayout.WidthConstraint="{ConstraintExpression 
        Type=RelativeToParent, 
        Property=Width,
        Factor=.2}"/>

    <Label FontSize="12" TextColor="#5B636E" HorizontalTextAlignment="Start"  Text="{Binding description}" 
        RelativeLayout.YConstraint="{ConstraintExpression 
        Type=RelativeToParent,
        Property=Height,
        Factor=.87}"
        RelativeLayout.XConstraint="{ConstraintExpression 
        Type=RelativeToParent, 
        Property=Width, 
        Factor=.01}"
        RelativeLayout.WidthConstraint="{ConstraintExpression 
        Type=RelativeToParent, 
        Property=Width,
        Factor=.98}"

        RelativeLayout.HeightConstraint="{ConstraintExpression 
        Type=RelativeToParent, 
        Property=Height,
        Factor=0,
        Constant=30}"/>
</RelativeLayout>
    </Frame>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>

</ListView>

除非您提供一些您已经尝试过的代码,否则没有人能提供帮助。人们需要知道上下文,列表单元格的外观..等等下面的示例代码可以工作,但它在单元格内缩放,而不像Instagram缩放重叠/覆盖效果。请检查我添加的示例代码。alo它不像Instagram应用程序那样平滑。这是Instagram提要页面视频,我想要完全相同的功能。嗨,你有什么解决方案吗?
public class PinchToZoomContainer : ContentView
{
double currentScale = 1;
double startScale = 1;
double xOffset = 0;
double yOffset = 0;

public PinchToZoomContainer ()
{
    var pinchGesture = new PinchGestureRecognizer ();
    pinchGesture.PinchUpdated += OnPinchUpdated;
    GestureRecognizers.Add (pinchGesture);

}

void OnPinchUpdated (object sender, PinchGestureUpdatedEventArgs e)
{
    if (e.Status == GestureStatus.Started) {
        // Store the current scale factor applied to the wrapped user interface element,
        // and zero the components for the center point of the translate transform.
        startScale = Content.Scale;
        Content.AnchorX = 0;
        Content.AnchorY = 0;
    }
    if (e.Status == GestureStatus.Running) {
        // Calculate the scale factor to be applied.
        currentScale += (e.Scale - 1) * startScale;
        currentScale = Math.Max (1, currentScale);

        // The ScaleOrigin is in relative coordinates to the wrapped user interface element,
        // so get the X pixel coordinate.
        double renderedX = Content.X + xOffset;
        double deltaX = renderedX / Width;
        double deltaWidth = Width / (Content.Width * startScale);
        double originX = (e.ScaleOrigin.X - deltaX) * deltaWidth;

        // The ScaleOrigin is in relative coordinates to the wrapped user interface element,
        // so get the Y pixel coordinate.
        double renderedY = Content.Y + yOffset;
        double deltaY = renderedY / Height;
        double deltaHeight = Height / (Content.Height * startScale);
        double originY = (e.ScaleOrigin.Y - deltaY) * deltaHeight;

        // Calculate the transformed element pixel coordinates.
        double targetX = xOffset - (originX * Content.Width) * (currentScale - startScale);
        double targetY = yOffset - (originY * Content.Height) * (currentScale - startScale);

        // Apply translation based on the change in origin.
        Content.TranslationX = targetX.Clamp (-Content.Width * (currentScale - 1), 0);
        Content.TranslationY = targetY.Clamp (-Content.Height * (currentScale - 1), 0);

        // Apply scale factor
        Content.Scale = currentScale;
    }
    if (e.Status == GestureStatus.Completed) {
        // Store the translation delta's of the wrapped user interface element.
        xOffset = Content.TranslationX;
        yOffset = Content.TranslationY;

    }
}
}