Forum Xamarin.Forms

Xamarin forms bottom sheet

Hello everyone,

I'm trying to implement a bottom sheet view in xamarin forms.
I'm follow this sample: https://www.heyraviteja.com/post/projects/xamarin-bottom-sheet/ but on android this isn't smooth.
In xamarin docs section of pan gesture ( https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/gestures/pan) i read that i need a pan container to do translations more linear.

So I have copy that pan container and inside I put my Frame. This is my code:

PanContainer:

public class PanContainer: ContentView
    {
        double x, y;

        public PanContainer()
        {
            // Set PanGestureRecognizer.TouchPoints to control the 
            // number of touch points needed to pan
            var panGesture = new PanGestureRecognizer();
            panGesture.PanUpdated += OnPanUpdated;
            GestureRecognizers.Add(panGesture);
        }

        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.TranslationY = Math.Max(Math.Min(0, y + e.TotalY), -Math.Abs((Height * .25) - Height));//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
                    y = Content.TranslationY;
                    break;
            }
        }
    }

My View:

<RelativeLayout>
    <StackLayout>

    </StackLayout>
    <views:PanContainer
                RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent,
                                                                       Property=Height,
                                                                       Factor=1,
                                                                       Constant=0}"
                RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,
                                                                      Property=Width,
                                                                      Factor=1,
                                                                      Constant=0}"
                RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
                                                                  Property=Height,
                                                                  Factor=.9,
                                                                  Constant=0}">
                <Frame
                    x:Name="bottomSheet"
                    Padding="1,4,1,0"
                    BackgroundColor="#faf9f8"
                    CornerRadius="15"
                    HasShadow="true">

                    <StackLayout Spacing="5">
                      //other....
                    </StackLayout>
                </Frame>
       </views:PanContainer>
</RelativeLayout>

Now the frame is very smoothly but there is a problem. The only part where i can do the panGesture is the red part in the picture:

even if the layout is expanded. Without painContainer I can do the gesture in each point inside the frame (with the relative layout contraint putted in the frame instead in the panContainer)

Could someone help me to understand the difference from the two cases and try to solve the problem?

Thank's a lot!

Best Answer

Answers

  • jezhjezh Member, Xamarin Team Xamurai

    When I tested your code ,and added the following properties to the PanContainer:

      Padding="6"
      BackgroundColor="Accent"
    

    The whole xaml:

         <RelativeLayout>
                <StackLayout>
                </StackLayout>
                <local:PanContainer
                    Padding="6"
                    BackgroundColor="Accent"
                    RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent,
                                                                           Property=Height,
                                                                           Factor=1,
                                                                           Constant=0}"
                    RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,
                                                                          Property=Width,
                                                                          Factor=1,
                                                                          Constant=0}"
                    RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
                                                                      Property=Height,
                                                                      Factor=.9,
                                                                      Constant=0}">
                    <Frame
                        x:Name="bottomSheet"
                        Padding="1,4,1,0"
                        BackgroundColor="#faf9f8"
                        CornerRadius="15"
                        HasShadow="true">
    
                        <StackLayout Spacing="5">
                            <Entry Placeholder="test" PlaceholderColor="Red"/>
                        </StackLayout>
                    </Frame>
                </local:PanContainer>
            </RelativeLayout>
    

    The result is:

    So the reason of your question is that the PanContainer only occupied the red space just as you said.

  • Xevious95Xevious95 Member ✭✭

    That's okey. So i need to dynamically change the Y constraint of the pan container, or the gesture is always limited to the initial height?

  • jezhjezh Member, Xamarin Team Xamurai

    You can try to adjust the height of PanContainer,then try again.

  • Xevious95Xevious95 Member ✭✭
    Accepted Answer

    Hi to everyone,
    I solved my problem and I released a new Xamarin forms component.
    You can find it on:
    -nuget -> https://www.nuget.org/packages/CoolBottomSheet/
    -GitHub -> https://github.com/SimonePit/CoolBottomSheet

Sign In or Register to comment.