How create Bottom sheets in Xamarin.Forms

Viewed 4756
3 Answers

Xamarin Forms Bottom sheet without a nuget package library.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourAppName.Views.YourPageName">
  <ContentPage.Content>
    <RelativeLayout BackgroundColor="White">
      <StackLayout HorizontalOptions="Fill" VerticalOptions="Fill">
         <!-- place your page content here -->
      </StackLayout>

      <Frame x:Name="BottomSheet" CornerRadius="20" HasShadow="True" BackgroundColor="White" Padding="10,5" BorderColor="LightGray"
               RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,Property=Height,Factor=.93,Constant=0}"
               RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width,Factor=1,Constant=0}"
               RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent,Property=Height,Factor=1,Constant=0}">
        <Frame.GestureRecognizers>
           <PanGestureRecognizer PanUpdated="OnPanelUpdated" />
        </Frame.GestureRecognizers>
        <StackLayout VerticalOptions="StartAndExpand" HorizontalOptions="Fill">
          <BoxView HeightRequest="5" CornerRadius="2" BackgroundColor="Grey" HorizontalOptions="CenterAndExpand" WidthRequest="50" Margin="25,10,0,10"></BoxView>
                   <!-- Place your bottom sheet layout here -->
        </StackLayout>
      </Frame>
    </RelativeLayout>
  </ContentPage.Content>
</ContentPage>

YourPageName.xaml.cs Code behind

 protected override void OnAppearing()
 {
    MoveBottomSheet(true);
 }

 /// The -negative value determines how many vertical units should the panel occuply on the screen.
 private async void MoveBottomSheet(bool close)
 {
    double finalTranslation = close ? (Device.Idiom == TargetIdiom.Phone ? -134.0 : -144.0) : (Device.Idiom == TargetIdiom.Phone ? -389.0 : -434.0);
    await BottomSheet.TranslateTo(BottomSheet.X, finalTranslation, 450, Easing.SinIn);
 }

/// This is fired multiple times while the user pans the bottom sheet. This variable captures the first intention of determining whether to open (pan up) or close (pan down)
bool _panelActivated = false;
private void OnPanelUpdated(object sender, PanUpdatedEventArgs e)
{
   switch (e.StatusType)
   {
      case GestureStatus.Started:
           break;
      case GestureStatus.Running:
           if (_panelActivated)
           {
              return;
           }
           MoveBottomSheet(e.TotalY > 0);               
           _panelActivated = true;
           break;
      case GestureStatus.Completed:
           _panelActivated = false;
           break;
      case GestureStatus.Canceled:
           break;
   }
}

you can use a nuget made by me this is the github project

https://github.com/josco007/CHDBottomSheet

enter image description here

It also supports scrollviews inside.

You need a relative layout as root view and set your relative layout in this way on the onAppearing method

protected override void OnAppearing()
{
    base.OnAppearing();
    CHDBottomSheetBs.SetRelativeLayout(_rootRlt);
}

See the github project for more information.

Related