Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

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

  • HaavamoaHaavamoa Member
    edited August 9
    Hi, I have developed a bottom sheet control that lives inside of a UI library that we are using for our production apps at Norwegian hospitals.

    Here is guide on how to use it:
    github.com/DIPSAS/DIPS.Xamarin.UI/wiki/Sheet

    It can be used inside of any content page and it can both show up from the bottom or the top of the page. It supports setting hard positions and is draggable. It's also very customizable in terms of coloring. Please have a try and give us some feedback on it!
Sign In or Register to comment.