locked
Xamarin forms bottom sheet RRS feed

  • Question

  • User384447 posted

    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: ~~~~

    </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>
    

    ~~~~ 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!

    Wednesday, February 19, 2020 5:28 PM

Answers

  • User384447 posted

    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

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Wednesday, March 4, 2020 12:20 PM

All replies

  • User371688 posted

    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.

    Thursday, February 20, 2020 1:44 PM
  • User384447 posted

    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?

    Thursday, February 20, 2020 1:48 PM
  • User371688 posted

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

    Friday, February 21, 2020 11:05 AM
  • User384447 posted

    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

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Wednesday, March 4, 2020 12:20 PM
  • User396153 posted

    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!

    Sunday, August 9, 2020 4:04 PM