Easily add a bottom sheet to your apps.

Bottom sheets is a great way to display extra information. Learn how to easily add it to your Xamarin apps

Posted by Håvard Moås on July 26, 2020

Bottom sheet

When developing a modern app you might find yourself needing some sort of component that can hold extra information of what the user is seeing. This component should act like a modal with non complex tasks and the user should be able to close it and get back to the context the user was at before opening it.

An example from the real world is the sheet component you might have used if you have used the native map apps:

In the apps that I am developing at DIPS (Github), we need such a component. The apps are used by nurses / doctors when they are visiting patients that are staying at the hospital. Our designers came up with the idea of using a bottom sheet for different scenarios. It is used to make it possible for the nurses/doctors to display extra information (like remarks, filter options, document details etc) by tapping a button. The app also uses barcode scanning, which is hidden inside of a bottom sheet.

When we had finalized the design and requirements, our team started working on a shared component that we can reuse for all of our apps. Luckily, it's all open sourced (Github) and ready to be used by anyone. The component is based on the Apple Modality Sheet UX guidelines.

How to use it

For this example we will create a simple page that has a CheckBox that should open a bottom Sheet with a Xamarin image inside of it.

Before we get started, we will need to complete this getting started post.

  • Let’s create a simple ContentPage that has a ModalityLayout as the root layout and a CheckBox that we will use to open the sheet. The ModalityLayout is the layout that will fade out when the sheet is opened. I recommend you to add this as the root layout of your page to get the best effect.

  • Add the bottom sheet by adding a SheetBehavior to the ModalityLayout.Behaviors.
  • Now let’s make it possible to open the Sheet by binding the IsOpen property to the CheckBox.IsChecked. We name our CheckBox OpenSheetCheckBox in order to use x:Reference to bind the IsChecked to IsOpen. This means that the sheet should open when we check the CheckBox.

  • Lets add some content to the empty sheet. We add a Xamarin Image and a Title. Let’s also make it draggable

Notice that the sheet has a notch (to drag), title and a separator in the header section. Below the header section is the content of the sheet. The default behaviour of the sheet is only open as much as it needs (determines by the height of the content), but this can be overridden by setting the Position property.

The sheet has a lot of other features that you can use, and a complete documentation on how to use it can be found here.

Other features:

  • Setting a Position that it should open to, this is a 0-1 percentage of the page.
  • Adding a close button. You can prompt the user to ask if its okay to close the sheet.
  • Adding a action button.
  • Changing colors of everything.
  • Set min/max positions so the user can’t drag it more / less than a certain position of the screen.
  • Change the alignment (bottom / top sheet)
  • All events are public, so you can be fancy with your page when/while it opens or when the user drag the sheet.
  • MVVM support and lazy fetching its binding context by using a BindingContextFactory property.

And much more..

Future features :

  • Snapping
  • Acceleration to be able to fling it up and down
  • Background fading with the percentage the sheet is dragged. (iOS maps app do this when you open its sheet)

The sheet got mentioned during .NET Conf 2020: