Bottom sheet

Bottom sheet is a component designed for you to display content anchored to the bottom of your page for people to use.

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.Current.OpenBottomSheet(new MyBottomSheet());

Or by XAML:

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

UX Considerations

The bottom sheet will by default be sized to half the screen and for people to drag the bottom sheet down to close it or up to expand it. Use ShouldFitToContent to force the bottom sheet size to the size of the content of the bottom sheet.

Properties

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