MAUI模仿Chrome下拉标签页的交互实现

<?xml version="1.0" encoding="utf-8" ?><ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"             SizeChanged="ContentView_SizeChanged"             Background="white"                         x:Class="StickyTab.Controls.StickyPan">    <Grid>        <Path x:Name="MainPath">            <Path.Data>                <PathGeometry>                    <PathFigure x:Name="figure1" Stroke="red">                        <PathFigure.Segments>                            <PathSegmentCollection>                                <BezierSegment x:Name="arc1" />                                <BezierSegment x:Name="arc2" />                                <BezierSegment x:Name="arc3" />                                <BezierSegment x:Name="arc4" />                            </PathSegmentCollection>                        </PathFigure.Segments>                    </PathFigure>                </PathGeometry>            </Path.Data>             </Path>    </Grid></ContentView>

private double C = 0.552284749831f;
public double RadiusX => this.Width/2;public double RadiusY => this.Height/2;public Point Center => new Point(this.Width/2, this.Height/2);
public double DifferenceX => RadiusX * C;public double DifferenceY => RadiusY * C;

Point p0 = new Point(Width/2, 0);Point h1 = new Point(Width/2-DifferenceX, 0);Point h2 = new Point(this.Width/2+DifferenceX, 0);Point h3 = new Point(this.Width, this.Height/2-  DifferenceY);Point p1 = new Point(this.Width, this.Height/2);Point h4 = new Point(this.Width, this.Height/2+DifferenceY);Point h5 = new Point(this.Width/2+DifferenceX, this.Height);Point p2 = new Point(this.Width/2, this.Height);Point h6 = new Point(this.Width/2-DifferenceX, this.Height);Point h7 = new Point(0, this.Height/2+DifferenceY);Point p3 = new Point(0, this.Height/2);Point h8 = new Point(0, this.Height/2-DifferenceY);

this.figure1.StartPoint =  p0;
this.arc1.Point1 = h2;this.arc1.Point2 = h3;this.arc1.Point3 = p1;

this.arc2.Point1 = h4;this.arc2.Point2 = h5;this.arc2.Point3 = p2;
this.arc3.Point1 = h6;this.arc3.Point2 = h7;this.arc3.Point3 = p3;
this.arc4.Point1 = h8;this.arc4.Point2 = h1;
this.arc4.Point3 = p0;

var dx = 400*0.8;var dy = 400*0.4;p0= p0.Offset(0, Math.Abs(dy));p1= p1.Offset(dx, 0);p2 = p2.Offset(0, -Math.Abs(dy));

var dx = _offsetX * 0.8 + _offsetY * 0.4;var dy = _offsetX * 0.4 + _offsetY * 0.8;if (_offsetX != 0){    if (dx > 0)    {        p1 = p1.Offset(dx, 0);
    }    else    {        p3 = p3.Offset(dx, 0);    }    p0 = p0.Offset(0, Math.Abs(dy));    p2 = p2.Offset(0, -Math.Abs(dy));}
if (_offsetY != 0){    if (dy > 0)    {        p2 = p2.Offset(0, dy);    }
    else    {        p0 = p0.Offset(0, dy);    }    p1 = p1.Offset(-Math.Abs(dx), 0);    p3 = p3.Offset(Math.Abs(dx), 0);
}

public double RadiusX => this.PanWidth / 2;public double RadiusY => this.PanHeight / 2;

//圆形居中补偿var adjustX = (this.Width - PanWidth) / 2 ;var adjustY = (this.Height - PanHeight) / 2 ;
Point p0 = new Point(PanWidth / 2 + adjustX, adjustY);Point p1 = new Point(this.PanWidth + adjustX, this.PanHeight / 2 + adjustY);Point p2 = new Point(this.PanWidth / 2 + adjustX, this.PanHeight + adjustY);Point p3 = new Point(adjustX, this.PanHeight / 2 + adjustY);

var _offsetX = OffsetX;//超过容忍度则将不黏连if (OffsetX <= -(this.Width - PanWidth) / 2 || OffsetX > (this.Width - PanWidth) / 2){    _offsetX = 0;}
var _offsetY = OffsetY;//超过容忍度则将不黏连if (OffsetY <= -(this.Height - PanHeight) / 2 || OffsetY > (this.Height - PanHeight) / 2){    _offsetY = 0;}

var mySpringOut = (double x) => (x - 1) * (x - 1) * ((5f + 1) * (x - 1) + 5) + 1;var scaleUpAnimation0 = new Animation(animateAction, 0, 1, mySpringOut);

private PitGrid _currentDefaultPit;

private void BindableObject_OnPropertyChanged(object sender, PropertyChangedEventArgs e){    if (e.PropertyName == nameof(Width))    {        this.DefaultPanContainer.PositionX = (this.PitContentLayout.Width - (sender as Grid).Width) / 2;    }    else if (e.PropertyName == nameof(Height))    {        this.DefaultPanContainer.PositionY = (this.PitContentLayout.Height - (sender as Grid).Height) / 2;
    }    else if (e.PropertyName == nameof(TranslationX))    {        var centerX = 0.0;        if (_currentDefaultPit != null)        {            centerX = _currentDefaultPit.X + _currentDefaultPit.Width / 2;        }        this.MainStickyPan.OffsetX = this.DefaultPanContainer.Content.TranslationX + this.DefaultPanContainer.Content.Width / 2 - centerX;
    }}