如何在 Xamarin.Forms 中创建底部工作表答案

【问题标题】：How create Bottom sheets in Xamarin.Forms如何在 Xamarin.Forms 中创建底部工作表
【发布时间】：2020-12-15 03:41:44
【问题描述】：

如何在 Xamarin.Forms 中创建底部工作表？

https://material.io/guidelines/components/bottom-sheets.html

【问题讨论】：

或者您也可以使用 AbsoluteLayout 自行实现：stackoverflow.com/a/46359686/7189343

标签： c# xamarin.forms

【解决方案1】：

为此使用SlideOverKit。

在nuget 上可用

这里有一些examples

您要查找的控件名为Slide up Menu

【讨论】：

这里是示例的缺失链接：web.archive.org/web/20160510021837/http://xam-consulting.com/…

【解决方案2】：

没有 nuget 包库的 Xamarin Forms 底部工作表。

<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 后面的代码

 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;
   }
}

【讨论】：

【解决方案3】：

你可以使用我制作的 nuget 这是 github 项目

https://github.com/josco007/CHDBottomSheet

里面还支持滚动视图。

您需要一个相对布局作为根视图，并在 onAppearing 方法上以这种方式设置您的相对布局

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

有关更多信息，请参阅 github 项目。

【讨论】：

出于性能原因，MS 建议不惜一切代价避免使用 RelativeLayout。
我使用的是这个解决方案，但是如果你在里面使用按钮就会出现问题。由于父滚动视图被禁用，它们也不会启用。