如何在Xamarin.Forms中创建底部表单

Question

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

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

- Eugene

---

或者您可以使用AbsoluteLayout自行实现：https://stackoverflow.com/a/46359686/7189343 - Artūras Paleičikas

Answer 1

使用SlideOverKit来实现此目的。

它可以在NuGet上获取。

这里有一些示例

您要查找的控件称为滑动菜单

- Wilson Vargas

---

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

Answer 2

使用 Xamarin Forms 创建底部菜单而无需使用 NuGet 包库。

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

- chri3g91

Answer 3

你可以使用我创建的NuGet包，这是该GitHub项目

https://github.com/josco007/CHDBottomSheet

它还支持内部的scrollviews。

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

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

请查看Github项目以获取更多信息。

- Noe Miranda Franco

---

微软建议出于性能原因尽量避免使用RelativeLayout。 - valentasm

我曾经使用过这个解决方案，但是如果你在其中使用按钮，就会出现问题。因为父级滚动视图被禁用了，所以按钮也会变得不可用。 - valentasm