Creating a Bottom Drawer in Xamarin.Forms

A common pattern in mobile apps is to show a list of actions and contextual UI within a modal panel that slides up from the bottom of the screen, aka a bottom drawer. This video walks through creating a bottom drawer, a backdrop, and the gestures and animation code to create that UX.
Resources:
* docs.microsoft.com/en-us/xama...
* docs.microsoft.com/en-us/xama...
* docs.microsoft.com/en-us/xama...
* Source: github.com/davidortinau/xappy
* Alt Sample: github.com/davidortinau/Sampl...

[@skattegard]

Awsome as always!

[@SyntaxDomain]

Excellent timing! My first task today is to write a user story for a bottom drawer in our Xamarin app. 😁👍

[@deaasaleh3613]

Great idea 💪💪

[@issacproton7885]

Yeeee.....so cool!

[@serdarozkan_41]

Am I the only one who wants to get up and dance while listening to background music? :D

[@MoussaidAbdallah]

💪💪

[@srikanthl9399]

Hi David, Another great video, I have small request can please create a one minute video on convertback in converter 😁

[@mwardell18290]

Great! What is the Communities thoughts on adding Bottom Drawer to Xamarin Community toolkit?

[@brushtailtech]

David Ortinau can you do some platform depended codes demo, plugins, native library bindings. (some in-depth tutorials)

[@mikeandkerryak]

Trying to implement a side-menu using this concept (not for navigation) and it looks like the view on the bottom of the grid doesn’t receive tap events after the transformx. Is there a way to accomplish this while still maintaining the ability to manipulate the underlying view?

[@PeterdeLeeuwvanWeenen]

Hi David, I have a question about the "BottomToolbar" Frame: When there is no TranslationY="260" (so the Frame is not moved from screen), how is it possible only the top corners have a CornerRadius shown? The bottom corners doesnt have a radius.

[@LeonardHarrisLH]

Could you also achieve the same with Expander View?

[@Virang807]

I am in Visual Studios 2022 using .NET MAUI since it is similar. My bottom drawer is showing up on building the app at the beginning. I have the translationY set in the frame but it is still showing up, what might be the problem. I have copied the code exactly, just changing size values.

[@mczaar]

Have you maybe found a solution? I'm also trying to solve this with Maui.

[@machtal1980]

Can anyone tell me how to access closeDrawer from viewModel?

[@DavidOrtinau]

The page has a reference to the ViewModel, so you could expose an EventHandler there. Or use INotifyPropertyChanged if you want to also use data binding for a property. docs.microsoft.com/en-us/dotnet/api/system.eventhandler?view=netframework-4.8
Or you can use the MessengingCenter to dispatch a msg from the VM that you are listening for on the page. docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/messaging-center

[@sebastienf.2303]

Background music is way too louuuud ! Erk
Anyway, thanks for this video :)

[@DavidOrtinau]

Oh no!!! Throughout the whole thing? So sorry. As I was editing it did think I was talking too softly at times which also doesn’t help. I’ll keep working to do better with this.

[@sebastienf.2303]

@@DavidOrtinau not whole, but many times its get harder for non native English (as I am) speaker to hear you perfectly 😕
I still got all the things but for people with a worst english level ... 😅🤷

[@scott98390]

@@DavidOrtinau Just a personal opinion, but the background music is unnecessary; it'd be better without it entirely.