Is there a way to show slide up panel that shows more data when user slides it up?

user_8914403 0
Viewed 2176

desired functionality

I would like to have ability to slide up and down the panel to see more data as seen in the image. Prefer to have cross platform solution. I have tried to use the SlideOverKit but it does not seem to have this sort of ability - or could I be wrong? Would there be a better solution out there for such a scenario?

xamarin.forms xamarin c#
1 Answers

There are many way to achieve a sliding panel, here is one using a PanGestureRecognizer for a swipe up / down on an absolute layout:

<AbsoluteLayout BackgroundColor="Silver" AbsoluteLayout.LayoutBounds="0,1,1,1">
<!--        
    Your page's content here
-->
    <StackLayout x:Name="bottomDrawer" BackgroundColor="Olive" AbsoluteLayout.LayoutBounds="0.5,1.00,0.9,0.04" AbsoluteLayout.LayoutFlags="All">
        <StackLayout.GestureRecognizers>
            <PanGestureRecognizer PanUpdated="PanGestureHandler" />
        </StackLayout.GestureRecognizers>
<!--        
    Your sliding panel's content here
-->
        <Label x:Name="swipeLabel" Text="Swipe me up" TextColor="Black" HorizontalOptions="Center" />
        <Button Text="Click Me" BackgroundColor="Silver" TextColor="Black" BorderColor="Gray" BorderWidth="5" BorderRadius="20" />
        <Image Source="whome" />
    </StackLayout>
</AbsoluteLayout>

The PanGestureRecognizer handler:

double? layoutHeight;
double layoutBoundsHeight;
int direction;
const double layoutPropHeightMax = 0.75;
const double layoutPropHeightMin = 0.04;
void PanGestureHandler(object sender, PanUpdatedEventArgs e)
{
    layoutHeight = layoutHeight ?? ((sender as StackLayout).Parent as AbsoluteLayout).Height;
    switch (e.StatusType)
    {
        case GestureStatus.Started:
            layoutBoundsHeight = AbsoluteLayout.GetLayoutBounds(sender as StackLayout).Height;
            break;
        case GestureStatus.Running:
            direction = e.TotalY < 0 ? 1 : -1;
            break;
        case GestureStatus.Completed:
            if (direction > 0) // snap to max/min, you could use an animation....
            {
                AbsoluteLayout.SetLayoutBounds(bottomDrawer, new Rectangle(0.5, 1.00, 0.9, layoutPropHeightMax));
                swipeLabel.Text = "Swipe me down";
            }
            else
            {
                AbsoluteLayout.SetLayoutBounds(bottomDrawer, new Rectangle(0.5, 1.00, 0.9, layoutPropHeightMin));
                swipeLabel.Text = "Swipe me up";
            }
            break;
    }
}

enter image description here

You can add dragging to the pan gesture by setting the "panel" size in the GestureStatus.Running case statement. Something like will get you started:

case GestureStatus.Running:
    direction = e.TotalY < 0 ? 1 : -1;
    var yProp = layoutBoundsHeight + (-e.TotalY / (double)layoutHeight);
    if ((yProp > layoutPropHeightMin) & (yProp < layoutPropHeightMax))
        AbsoluteLayout.SetLayoutBounds(bottomDrawer, new Rectangle(0.5, 1.00, 0.9, yProp));
    break;

enter image description here

Note: Personally I would use this style of dragging as a prototype only as it is glitchy. I would write a custom renderer per platform to avoid the Forms' layout manager.

user_49848320
Related