Bottom sheet

Bottom sheet is a component designed for you to display content anchored to the bottom of your page for people to use. This is considered a modal, a mode that people go to but still maintain focus to the context they are in.

Inspiration

• Android: Material Design 2 Bottom Sheets
• iOS: Sheets - Human Interface Guidelines

Usage

Create your bottom sheet by creating a XAML class that derives from dui:BottomSheet.

<dui:BottomSheet xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 xmlns:dui="http://dips.com/mobile.ui"
                 x:Class="<MyNameSpace>.MyBottomSheet"
                 ....
                 >
    <!-- Content of bottom sheet goes here -->
</dui:BottomSheet>

Open the bottom sheet using C#:

await BottomSheetService.Open(new MyBottomSheet());

Or by XAML:

<dui:Button Text="Open my bottom sheet"
            Command="{dui:OpenBottomSheetCommand {x:Type sheets: MyBottomSheet}}" />

Change start position.

The bottom sheets default position is half of the screen, this can be controlled by setting the Position property. To make it position using its size, set the Position property to Fit.

Make sure people don't accidentally close it.

Use IsInteractiveCloseable to control whether people can close the bottom sheet by swiping it down (iOS and Android) or back button / back swipe (Android). The bottom sheet is still programatically closable. Use this.Close() or BottomSheetService.Close(bottomSheet) to close it.

Properties

Inspect the components properties class to further customise and use it.