How can I achieve dragging on frame within Absolutelayout - xamarin.forms

Question

I have a frame in absolutelayout as shown below. I would like that user to be able drag and relocate this frame on the screen. I tried to implement a pan gesture but unfortunately it doesnt work as expected. Can somebody show me the correct way? Is it possible without using any 3rd party library?
<AbsoluteLayout>
<Frame x:Name="frm" Padding="1" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0.5,0,0.3,0.3" IsVisible="{Binding IsSmallTimerVisible}" >
<Frame.GestureRecognizers>
<PanGestureRecognizer PanUpdated="OnPanUpdated" />
</Frame.GestureRecognizers>
<shared:_customControl/>
</Frame>
Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
<Grid.RowDefinitions>
<RowDefinition Height="0.1*" />
<RowDefinition Height="0.3*" />
<RowDefinition Height="2.5*" />
</Grid.RowDefinitions>
And in the code behind
double x, y;
private void OnPanUpdated(object sender, PanUpdatedEventArgs e)
{
switch (e.StatusType)
{
case GestureStatus.Running:
// Translate and ensure we don't pan beyond the wrapped user interface element bounds.
Content.TranslationX =
Math.Max(Math.Min(0, x + e.TotalX), -Math.Abs(Content.Width - App.ScreenWidth));
Content.TranslationY =
Math.Max(Math.Min(0, y + e.TotalY), -Math.Abs(Content.Height - App.ScreenHeight));
break;
case GestureStatus.Completed:
{
// Store the translation applied during the pan
x = Content.TranslationX;
y = Content.TranslationY;
AbsoluteLayout.SetLayoutBounds(frm, new Rectangle(x, y, .3, .3));
break;
}
}
}

Answer 1

Seem like what you need is a Touch Tracking Effect
This example is very similar with your requirement.
void OnTouchEffectAction(object sender, TouchActionEventArgs args)
{
BoxView boxView = sender as BoxView;
switch (args.Type)
{
case TouchActionType.Pressed:
// Don't allow a second touch on an already touched BoxView
if (!dragDictionary.ContainsKey(boxView))
{
dragDictionary.Add(boxView, new DragInfo(args.Id, args.Location));
// Set Capture property to true
TouchEffect touchEffect = (TouchEffect)boxView.Effects.FirstOrDefault(e => e is TouchEffect);
touchEffect.Capture = true;
}
break;
case TouchActionType.Moved:
if (dragDictionary.ContainsKey(boxView) && dragDictionary[boxView].Id == args.Id)
{
Rectangle rect = AbsoluteLayout.GetLayoutBounds(boxView);
Point initialLocation = dragDictionary[boxView].PressPoint;
rect.X += args.Location.X - initialLocation.X;
rect.Y += args.Location.Y - initialLocation.Y;
AbsoluteLayout.SetLayoutBounds(boxView, rect);
}
break;
case TouchActionType.Released:
if (dragDictionary.ContainsKey(boxView) && dragDictionary[boxView].Id == args.Id)
{
dragDictionary.Remove(boxView);
}
break;
}
}
The Pressed logic sets the Capture property of the TouchEffect object
to true. This has the effect of delivering all subsequent events for
that finger to the same event handler.
The Moved logic moves the BoxView by altering the LayoutBounds
attached property. The Location property of the event arguments is
always relative to the BoxView being dragged, and if the BoxView is
being dragged at a constant rate, the Location properties of the
consecutive events will be approximately the same. For example, if a
finger presses the BoxView in its center, the Pressed action stores a
PressPoint property of (50, 50), which remains the same for subsequent
events. If the BoxView is dragged diagonally at a constant rate, the
subsequent Location properties during the Moved action might be values
of (55, 55), in which case the Moved logic adds 5 to the horizontal
and vertical position of the BoxView. This moves the BoxView so that
its center is again directly under the finger.
You can move multiple BoxView elements simultaneously using different
fingers.