<the49:BottomSheet xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:the49="https://schemas.the49.com/dotnet/2023/maui"
Padding="16,32" BackgroundColor="LightGrey" HasHandle="True" HandleColor="Red"
x:Class="MauiApp2.Controls.BottomSheet">
the49:BottomSheet.Detents
<the49:MediumDetent />
</the49:BottomSheet.Detents>


<Grid.RowDefinitions>


</Grid.RowDefinitions>

</ScrollView>

</the49:BottomSheet>

protected override void OnAppearing()
{
base.OnAppearing();
try
{
var page = new BottomSheet();
page.ShowAsync(false);
}
catch(Exception ex)
{
Console.Write(ex.ToString());
}

}

DetentChanged event can add more flexibility, for instance, when it changes from a small window (as in peeking content with HeightDetent or AnchorDetent) to expanded content (ContentDetent or FullScreen) the content may be modified hence simplifying the overall logic.

In my case, I would like to change the header title under the expanded window. When the smaller window, the title could be advisory, while with the expanded window, the title would be the actual content title.

Capturing the new Detent in the event handler would be ideal, and this is straightforward anyway.

Thank you.

I can add a bot padding to the content as a workaround, when android displays those virtual buttons (if I find how to detect that).

Android Simulator Pixel 5 / API 31.

mapsui 4.0.0-rc2

The sample does not open and crashes on Main Activity. Below are the logs . Please suggest issue and workaround.

Time Device Name Type PID Tag Message
04-25 06:40:43.709 Samsung SM-A336E Info 27951 MonoDroid android.runtime.JavaProxyThrowable: Microsoft.Maui.Controls.Xaml.XamlParseException: Position 36:220. StaticResource not found for key ListItem
at Microsoft.Maui.Controls.Xaml.ApplyPropertiesVisitor.ProvideValue(Object& value, ElementNode node, Object source, XmlName propertyName)
at Microsoft.Maui.Controls.Xaml.ApplyPropertiesVisitor.Visit(ElementNode node, INode parentNode)
at Microsoft.Maui.Controls.Xaml.ElementNode.Accept(IXamlNodeVisitor visitor, INode parentNode)
at Microsoft.Maui.Controls.Xaml.ElementNode.Accept(IXamlNodeVisitor visitor, INode parentNode)
at Microsoft.Maui.Controls.Xaml.ElementNode.Accept(IXamlNodeVisitor visitor, INode parentNode)
at Microsoft.Maui.Controls.Xaml.RootNode.Accept(IXamlNodeVisitor visitor, INode parentNode)
at Microsoft.Maui.Controls.Xaml.XamlLoader.Visit(RootNode rootnode, HydrationContext visitorContext, Boolean useDesignProperties)
at Microsoft.Maui.Controls.Xaml.XamlLoader.Load(Object view, String xaml, Assembly rootAssembly, Boolean useDesignProperties)
at Microsoft.Maui.Controls.Xaml.XamlLoader.Load(Object view, String xaml, Boolean useDesignProperties)
at Microsoft.Maui.Controls.Xaml.XamlLoader.Load(Object view, Type callingType)
at Microsoft.Maui.Controls.Xaml.Extensions.LoadFromXaml[MainPage](MainPage view, Type callingType)
at The49.Maui.BottomSheet.MainPage.InitializeComponent()
at The49.Maui.BottomSheet.MainPage..ctor()
at The49.Maui.BottomSheet.App..ctor()
at System.Reflection.RuntimeConstructorInfo.Invoke(BindingFlags invokeAttr, Binder binder, Object[] parameters, CultureInfo culture)
at Microsoft.Extensions.DependencyInjection.ServiceLookup.CallSiteRuntimeResolver.VisitConstructor(ConstructorCallSite constructorCallSite, RuntimeResolverContext context)
at Microsoft.Extensions.DependencyInjection.ServiceLookup.CallSiteVisitor2[[Microsoft.Extensions.DependencyInjection.ServiceLookup.RuntimeResolverContext, Microsoft.Extensions.DependencyInjection, Version=7.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60],[System.Object, System.Private.CoreLib, Version=7.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].VisitCallSiteMain(ServiceCallSite callSite, RuntimeResolverContext argument) at Microsoft.Extensions.DependencyInjection.ServiceLookup.CallSiteRuntimeResolver.VisitRootCache(ServiceCallSite callSite, RuntimeResolverContext context) at Microsoft.Extensions.DependencyInjection.ServiceLookup.CallSiteVisitor2[[Microsoft.Extensions.DependencyInjection.ServiceLookup.RuntimeResolverContext, Microsoft.Extensions.DependencyInjection, Version=7.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60],[System.Object, System.Private.CoreLib, Version=7.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].VisitCallSite(ServiceCallSite callSite, RuntimeResolverContext argument)
at Microsoft.Extensions.DependencyInjection.ServiceLookup.CallSiteRuntimeResolver.Resolve(ServiceCallSite callSite, ServiceProviderEngineScope scope)
at Microsoft.Extensions.DependencyInjection.ServiceProvider.CreateServiceAccessor(Type serviceType)
at System.Collections.Concurrent.ConcurrentDictionary2[[System.Type, System.Private.CoreLib, Version=7.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e],[System.Func2[[Microsoft.Extensions.DependencyInjection.ServiceLookup.ServiceProviderEngineScope, Microsoft.Extensions.DependencyInjection, Version=7.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60],[System.Object, System.Private.CoreLib, Version=7.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]], System.Private.CoreLib, Version=7.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].GetOrAdd(Type key, Func`2 valueFactory)
at Microsoft.Extensions.DependencyInjection.ServiceProvider.GetService(Type serviceType, ServiceProviderEngineScope serviceProviderEngineScope)
at Microsoft.Extensions.DependencyInjection.ServiceProvider.GetService(Type serviceType)
at Microsoft.Maui.MauiContext.WrappedServiceProvider.GetService(Type serviceType)
at Microsoft.Maui.MauiContext.WrappedServiceProvider.GetService(Type serviceType)
at Microsoft.Extensions.DependencyInjection.ServiceProviderServiceExtensions.GetRequiredService(IServiceProvider provider, Type serviceType)
at Microsoft.Extensions.DependencyInjection.ServiceProviderServiceExtensions.GetRequiredService[IApplication](IServiceProvider provider)
at Microsoft.Maui.MauiApplication.OnCreate()
at The49.Maui.BottomSheet.MainApplication.OnCreate()
at Android.App.Application.n_OnCreate(IntPtr jnienv, IntPtr native__this)
at Android.Runtime.JNINativeWrapper.Wrap_JniMarshal_PP_V(_JniMarshal_PP_V callback, IntPtr jnienv, IntPtr klazz)
at crc64b898ff4a14f0223d.MainApplication.n_onCreate(Native Method)
at crc64b898ff4a14f0223d.MainApplication.onCreate(MainApplication.java:25)
at android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1266)
at android.app.ActivityThread.handleBindApplication(ActivityThread.java:7614)
at android.app.ActivityThread.-$$Nest$mhandleBindApplication(Unknown Source:0)
at android.app.ActivityThread$H.handleMessage(ActivityThread.java:2400)
at android.os.Handler.dispatchMessage(Handler.java:106)
at android.os.Looper.loopOnce(Looper.java:226)
at android.os.Looper.loop(Looper.java:313)
at android.app.ActivityThread.main(ActivityThread.java:8757)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:571)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1067)

Hi,

I haven't investigated this thoroughly but confirmed with Debug hitting before but not after the Dismiss() call as shown below.

To ensure that no duplicates are created, I do the following test before creating one.

if (bottomSheetPage is not null) await bottomSheetPage.Dismiss();

In some cases the execution never returns to the next line of code and suspect perhaps disappearing to do UI thread issues??

Alternatively, setting bottomSheetPage = null; works like a breeze.

Just to let you know...

Do you think there could be an easy / cheap implementation for the blur effect ?

I`ll prove an example picture

Image was taken from the website https://ionic.io/blog/5-examples-of-the-new-ionic-6-bottom-sheet-modal

Is it possible to have input transparent backdrop with this?

This issue still happening exactly as @DiogoDeAlmeida explained it on #14, i tried:
var sheet = new MySheet();
sheet.Showing += (s, e) =>
{
sheet.Controller.Behavior.DisableShapeAnimations();
};
sheet.ShowAsync(Window);
But the CornerRadius still animates when extended.

I've been able to keep the background interactive on iOS by adding the Medium detent and LargestUndimmedDetentIdentifier property in the Showing event handler.

The issue I have now is that the sheet is always in front of the entire AppShell view controller. I can close it on navigating away from the view I want it visible on, but I can't find a way to place it behind the flyout menu or hide it on opening the menu. Any ideas?

I prefer the square corners than rounded corners for Android. I followed the customization with a theme.xml as suggested, which works when the window is expanded but not for minimal window such as a small HeightDetent.

I recall that the early versions had square corners, so I would assume getting to that programmatically should be easy. Perhaps making this an option with bool property IsRoundedCorners would be great.

Can this be accommodated?

Thank you.

Description

See title.

Steps to Reproduce

1. Clone and open solution
2. In App.xaml.cs, replace MainPage = new AppShell(); with MainPage = new NavigationPage(new MainPage());
3. Run and try to open a Non-modal sheet

Version with bug

1.0.0-alpha1

Affected platforms

Android

Hello @paulvarache ,

First, I would like to thank you for the time and effort on this plugin, I have been using it on my first project and it works and looks fantastic for iOS and Android.

I am here to ask a question: I am using the bottom sheet to display some information and the information has some buttons that navigate to another screen (content page using modal), however, when I click the button or element it does not work. It triggers correctly the tap gesture event, however, it does not navigate to the modal screen.

This is how I want to navigate to a page (modal) from the tap event:

async void TapGestureRecognizer_Tapped(System.Object sender, Microsoft.Maui.Controls.TappedEventArgs e)
    {
        // await this.Dismiss(); if I dismiss it first it navigates OK.

        var viewModel = BindingContext as DashboardViewModel;
        if (viewModel.NavigateLocationLogsCommand.CanExecute(null))
            await viewModel.NavigateLocationLogsCommand.ExecuteAsync(null);
    }

Then on my viewmodel command I have the following line:
await Shell.Current.GoToAsync($"{nameof(InformationPage)}");

The Information Page has this property set:
Shell.PresentationMode="ModalAnimated"

I would like to navigate to that page and when the user closes it manually, return back and the bottom sheet still be open.

Any hint is always welcome.

Thanks in advance!!

I am currently using bottomsheet on the Android . When the bottomsheet is open and the device's back button is pressed, the route will back, but the bottomsheet will not be closed. I think under normal circumstances, press the back button will close the bottomsheet, and then press the return button again will execute the routing.

I believe this was discussed in issue #28 , but after updating to the rc2 update i still get the same issue.

Crashes:

<bottomSheet:BottomSheet ...      IsCancelable="False">

    <!--  crashes -->
    <bottomSheet:BottomSheet.Detents>
      <bottomSheet:MediumDetent IsDefault="True" />
    </bottomSheet:BottomSheet.Detents>

    <!--  ok ! (without IsDefault) -->
    <bottomSheet:BottomSheet.Detents>
      <bottomSheet:MediumDetent />
    </bottomSheet:BottomSheet.Detents>

Also tried with RatioDetent and HeightDetent

Stack trace

InnerException was NullReferenceException: Object reference not set to an instance of an object.
	   at The49.Maui.BottomSheet.BottomSheetController.GetStateForDetent(Detent detent)
   at The49.Maui.BottomSheet.BottomSheetController.UpdateStateFromDetent()
   at The49.Maui.BottomSheet.BottomSheetHandler.PlatformMapSelectedDetent(BottomSheet view)
   at The49.Maui.BottomSheet.BottomSheetHandler.MapSelectedDetent(BottomSheetHandler handler, BottomSheet view)
   at Microsoft.Maui.PropertyMapper`2.<>c__DisplayClass5_0[[The49.Maui.BottomSheet.BottomSheet, The49.Maui.BottomSheet, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null],[The49.Maui.BottomSheet.BottomSheetHandler, The49.Maui.BottomSheet, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].<Add>b__0(IElementHandler h, IElement v) in D:\a\_work\1\s\src\Core\src\PropertyMapper.cs:line 172
   at Microsoft.Maui.PropertyMapper.UpdatePropertyCore(String key, IElementHandler viewHandler, IElement virtualView) in D:\a\_work\1\s\src\Core\src\PropertyMapper.cs:line 47
   at Microsoft.Maui.PropertyMapper.UpdateProperties(IElementHandler viewHandler, IElement virtualView) in D:\a\_work\1\s\src\Core\src\PropertyMapper.cs:line 82
   at Microsoft.Maui.Handlers.ElementHandler.SetVirtualView(IElement view) in D:\a\_work\1\s\src\Core\src\Handlers\Element\ElementHandler.cs:line 79
   at Microsoft.Maui.Handlers.ViewHandler.SetVirtualView(IElement element) in D:\a\_work\1\s\src\Core\src\Handlers\View\ViewHandler.cs:line 134
   at Microsoft.Maui.Handlers.ViewHandler`2[[Microsoft.Maui.IContentView, Microsoft.Maui, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null],[Microsoft.Maui.Platform.ContentViewGroup, Microsoft.Maui, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].SetVirtualView(IView view) in D:\a\_work\1\s\src\Core\src\Handlers\View\ViewHandlerOfT.cs:line 53
   at Microsoft.Maui.Handlers.ContentViewHandler.SetVirtualView(IView view) in D:\a\_work\1\s\src\Core\src\Handlers\ContentView\ContentViewHandler.Android.cs:line 27
   at Microsoft.Maui.Handlers.ViewHandler`2[[Microsoft.Maui.IContentView, Microsoft.Maui, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null],[Microsoft.Maui.Platform.ContentViewGroup, Microsoft.Maui, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].SetVirtualView(IElement view) in D:\a\_work\1\s\src\Core\src\Handlers\View\ViewHandlerOfT.cs:line 56
   at Microsoft.Maui.Controls.Element.SetHandler(IElementHandler newHandler) in D:\a\_work\1\s\src\Controls\src\Core\HandlerImpl\Element\Element.Impl.cs:line 69
   at Microsoft.Maui.Controls.Element.set_Handler(IElementHandler value) in D:\a\_work\1\s\src\Controls\src\Core\HandlerImpl\Element\Element.Impl.cs:line 19
   at Microsoft.Maui.Controls.VisualElement.Microsoft.Maui.IElement.set_Handler(IElementHandler value) in D:\a\_work\1\s\src\Controls\src\Core\HandlerImpl\VisualElement\VisualElement.Impl.cs:line 303
   at Microsoft.Maui.Platform.ElementExtensions.ToHandler(IElement view, IMauiContext context) in D:\a\_work\1\s\src\Core\src\Platform\ElementExtensions.cs:line 96
   at Microsoft.Maui.Platform.ElementExtensions.ToPlatform(IElement view, IMauiContext context) in D:\a\_work\1\s\src\Core\src\Platform\ElementExtensions.cs:line 127
   at Microsoft.Maui.Platform.ContainerView.SetView(IElement view, Boolean forceRefresh) in D:\a\_work\1\s\src\Core\src\Platform\Android\ContainerView.cs:line 72
   at Microsoft.Maui.Platform.ContainerView.set_CurrentView(IElement value) in D:\a\_work\1\s\src\Core\src\Platform\Android\ContainerView.cs:line 51
   at Microsoft.Maui.Platform.ElementExtensions.ToContainerView(IElement view, IMauiContext context) in D:\a\_work\1\s\src\Core\src\Platform\Android\ElementExtensions.cs:line 11
   at The49.Maui.BottomSheet.BottomSheetManager.CreateLayout(BottomSheet page, IMauiContext mauiContext)
   at The49.Maui.BottomSheet.BottomSheetController.Show(Boolean animated)
   at The49.Maui.BottomSheet.BottomSheetManager.PlatformShow(Window window, BottomSheet sheet, Boolean animated)
   at The49.Maui.BottomSheet.BottomSheetManager.Show(Window window, BottomSheet sheet, Boolean animated)
   at The49.Maui.BottomSheet.BottomSheet.ShowAsync(Window window, Boolean animated)
   at MyApp.Views.Home.MyPage.OnParentSet()

Hi !

First of all, I want to thank you for this package, it works perfectly! I have just one question about the corner radius of the bottom sheet. As you can see in my video, when the bottom sheet is fully extended, the corner radius disappears.
Is this intentional? Can I remove it? Or is this specific to my Android version only?

Issue

I've encountered an issue with the TapGestureRecognizer not triggering within a BottomSheet in a .NET MAUI project.

The specific scenario involves an Image control with a TapGestureRecognizer. When the image is tapped, the corresponding event handler is not invoked. This issue is present when using the BottomSheet from the The49.Maui.BottomSheet library.

Here is a simplified code snippet:

<Image Source="icon_yes.svg"
    WidthRequest="80"
    HeightRequest="80">
    <Image.GestureRecognizers>
        <TapGestureRecognizer Tapped="OnYes_Tapped" />
    </Image.GestureRecognizers>
</Image>

The method OnYes_Tapped is not triggered when the image is tapped.

Workaround

Use keyboard 'tab' btn + ImageButton

As a workaround, I tried using an ImageButton instead of Image, and used the Clicked event which seems to work, but it's not ideal since it requires users to use the keyboard to trigger the event. Here is the workaround:

<ImageButton Source="icon_yes.svg"
    Clicked="OnYes_Tapped"
    WidthRequest="80"
    HeightRequest="80">
</ImageButton>

This issue might be specific to the emulator I'm using or could be related to the interaction between the TapGestureRecognizer and the BottomSheet library.

This issue affects the usability of the application as it requires keyboard interaction (Use keyboard 'tab' btn) which is not expected behavior for tap gestures on touch interfaces.

Got an app with a tab bar on the main screen.
Each tab has it's own stack.

When a child screen is opened from the 1st tab, and this child has a bottom sheet, the tab bar is hidden by that bottom sheet.

Is there a way to display the bot sheet above the bot tab bar ?

Since the last update the control crashes when I switch between two different BottomSheets.
I can open and close (and repeat) the first without a problem. Then I open and close the second; no problem.
Then I try opening the first again. Exception. Stack trace below:

System.ArgumentNullException: 'Value cannot be null. (Parameter 'source')'

at System.Linq.ThrowHelper.ThrowArgumentNullException(ExceptionArgument argument)
at System.Linq.OrderedEnumerable2[[System.Collections.Generic.KeyValuePair2[[The49.Maui.BottomSheet.Detent, The49.Maui.BottomSheet, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null],[System.Double, System.Private.CoreLib, Version=7.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]], System.Private.CoreLib, Version=7.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e],[System.Double, System.Private.CoreLib, Version=7.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]]..ctor(IEnumerable1 source, Func2 keySelector, IComparer1 comparer, Boolean descending, OrderedEnumerable1 parent)
at System.Linq.Enumerable.OrderByDescending[KeyValuePair2,Double](IEnumerable1 source, Func2 keySelector) at The49.Maui.BottomSheet.BottomSheetManager.LayoutDetents(BottomSheetBehavior behavior, ViewGroup container, IDictionary2 heights, Double maxSheetHeight)
at The49.Maui.BottomSheet.BottomSheetController.Layout()
at The49.Maui.BottomSheet.BottomSheetController.b__30_0()
at Microsoft.Maui.Dispatching.Dispatcher.<>c__DisplayClass4_0.b__0() in D:\a_work\1\s\src\Core\src\Dispatching\Dispatcher.Android.cs:line 22
at Java.Lang.Thread.RunnableImplementor.Run() in /Users/runner/work/1/s/xamarin-android/src/Mono.Android/Java.Lang/Thread.cs:line 36
at Java.Lang.IRunnableInvoker.n_Run(IntPtr jnienv, IntPtr native__this) in /Users/runner/work/1/s/xamarin-android/src/Mono.Android/obj/Release/net7.0/android-33/mcw/Java.Lang.IRunnable.cs:line 84
at Android.Runtime.JNINativeWrapper.Wrap_JniMarshal_PP_V(_JniMarshal_PP_V callback, IntPtr jnienv, IntPtr klazz) in /Users/runner/work/1/s/xamarin-android/src/Mono.Android/Android.Runtime/JNINativeWrapper.g.cs:line 22

Suppose a Shell page with PresentationMode=Modal. If I open a bottomsheet from this page, then it does not show on top of the modal page. Instead, i have to close the modal page and then the bottom sheet is displayed.

Expected behavior:
Bottom sheet opens on top of Shell Modal page.

iOS works fine

In my BottomSheet I have some entries. When using modal and clicking outside, BottomSheet is closed but the keyboard still visible.

When I use a dismiss button I can set " this.Focus()" to close the keyboard, so if it had an event when BottomSheet is closed I could do the same approach.

Any ideas on how to solve this?

<the49:BottomSheet xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:the49="https://schemas.the49.com/dotnet/2023/maui"
Padding="16,32" BackgroundColor="LightGrey" HasHandle="True" HandleColor="Red"
x:Class="MauiApp2.Controls.BottomSheet">
the49:BottomSheet.Detents
<the49:MediumDetent />
</the49:BottomSheet.Detents>


<Grid.RowDefinitions>


</Grid.RowDefinitions>

</ScrollView>

Steps to Reproduce

1. Compile and run the provided BottomSheetTest project on Android.
2. Tap the Show button to show the bottom sheet.
3. Switch to a different app.
4. Switch back to BottomSheetTest and notice that the Show and Hide buttons still work to show and hide the bottom sheet.
5. Tap the Show button to show the bottom sheet.
6. Switch to an email app.
7. Send yourself an email with the link https://bottom-sheet/test
8. Open the email and tap on the link https://bottom-sheet/test
9. Notice that the bottom sheet is gone.
10. Tap the Show and Hide buttons to verify that the Botton sheet no longer appears.

Expected Behavior

After using the link to open an intent handler, the bottom sheet should continue to work as usual.

This isn't urgent but I wanted to bring up this issue. Not sure if it is possible to fix, but hot reload doesn't work for bottom sheets. This could be a visual studio/Maui issue not recognizing BottomSheet as something that is hot reload compatible.

System.TypeLoadException: 'Could not load type of field 'The49.Maui.BottomSheet.BottomSheetController:_handle' (7) due to: Could not resolve type with token 010000a3 from typeref (expected class 'Google.Android.Material.BottomSheet.BottomSheetDragHandleView' in assembly 'Xamarin.Google.Android.Material, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null') assembly:Xamarin.Google.Android.Material, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null type:Google.Android.Material.BottomSheet.BottomSheetDragHandleView member:(null)'

An extra white space is added over the title after closing a BottomSheet, see below:

The space disappears if the bottom sheet is reopened, but appears again after closing.

Steps to reproduce:

1. Create new Maui project
2. Install the the:49:BottomSheet NuGet package - version rc1, and follow the Readme for usage
3. Copied the SimplePage from the Sample. Display the SimplePage-BottomSheet on ButtonClick
4. Build and deploy on Android -> click button

This does not happen with the alpha7 version

Hi @paulvarache

Are you aware that using OnPlatform is not woking with your Plugin as I could be wrong but it requires a Type and Value but looking at your example it doesn't work on my side. Below is what I used to have different presentation of the Bottomsheet per platform.

bottomSheet:BottomSheet.Detents


<bottomSheet:RatioDetent Ratio=".50" />


<bottomSheet:MediumDetent />


</bottomSheet:BottomSheet.Detents>

Kindly advise as to how to go about using OnPlatofrm with the Plugin.

Description

If there is a scrollView as the main content of the BottomSheetPage and you rotate the orientation of the device (e.g. to landscape mode), the scrollView does not get layout correctly. The scrollView has still the same height as previously. Therefore, the scrolling does not work properly. The issue always occurs when the orientation of the bottom sheet is different from the initial orientation while starting the app.

While debugging this issue I was curious about the Window.height property. The value does not getting updated while rotating the device. Instead, the Window.width property updated to the matching value. Due to that, the BottomSheet Detent gets measured wrong here: https://github.com/the49ltd/The49.Maui.BottomSheet/blob/main/src/Platforms/iOS/BottomSheetContainer.cs#L43.

Steps to Reproduce

1. Open a BottomSheetPage with a ScrollView as the content
2. Rotate the device orientation
3. If the content is larger than the devices height, the user cannot scroll anymore

Version with bug

1.0.1

Affected platforms

iOS

Hi,

I have tried this plugin. The first time I'm run Page.Show(), the BottomSheet shows successfully.

However, if I try a second time, it throws an error saying :

Java.Lang.IllegalArgumentException Message=ratio must be a float value between 0 and 1

Do you know please how to solve that ?

Thanks.

Regards,

Hi it looks very nice.. Do you have an example how can you trigger a bottomsheet from a view model?

many thanks

Hello, the nugget is not available on Visual studio anymore

Couldn't find the package on Nuget, tried The49.Maui.BottomSheet, Maui.BottomSheet, The49

The little Handler Bar at the top (when HasHandle = true) almost disappears with dark background setting (and, of course, disappears completely if same background color is set).

To set a contrasting Handle color to a chosen sheet background color, can a HandleColor property be provided such that it can be set in XAML or via binding?

I am doing some prototyping for an app I am planning and ran across a bug that is only affecting Android. With a simple UI the bottom sheet slides onto the screen and overlays fine. With a more complex UI, like multiple grids, vertical or horizontal stack layouts, the bottom sheet pushes the content up about 20-40 points.

Video of bug in action.

Description

The sample application crashes when starting directly but not at DEBUG mode. It may be a bug of xaml. (see dotnet/maui#12900)

Steps to Reproduce

1. Clone and run The49.Maui.BottomSheet.Sample
2. Try in DEBUG mode and directly running

Version with bug

1.0.0-alpha1

Affected platforms

Android, Windows

When opening the bottom sheet into a navigation page, it expands by cutting off top and bottom of the screen

the bottom sheet works perfectly on Android 13. On Android 9 it crashes when opening because of a missing method error in

BottomSheetController > GetAvailableHeight > GetInsets

I tracked the issue down to _frame being null in public void Layout() which is located in Platforms\Android\BottomSheetController.cs code file.

• Download the demo project from https://github.com/dg2k/MauiBottomSheetFailDemo
• Run it in the same way as the sample project that accompanies the Maui.BottomSheet package.
• The project starts with a Home Page. Tap on the top right toolbar icon to invoke a demo. BottomSheet shows up with two buttons, one to navigate to a HelpPage and the other for Dismiss action. Try out Dismiss first and again tap on toolbar this time to navigate to HelpPage.
• On the Help Page, like for the previous page, tap on the toolbar icon to invoke Maui.BottomSheet. When this attempt is made, it fails because the _frame object being null.
• I made it break on Debug.Assert(_frame is not null); and commenting this out will show the obvious error.
• PR #17 seems to solve the problem -- just uncommented a line that was commented out the issue is gone for my usage scenario.

Is that an unsupported scenario ?
If it has a handle, the top part with the handle should be where it captures the swipe ? And let the scrolling part scroll down ?

Hello,

I've encountered an issue on Android where there's an approximately 40px white space at the bottom of the Bottom Sheet.
Additionally, it seems that SafeArea is affecting the layout. Is there a way to disable SafeArea? The main content is ending up under the navigation keys, causing an undesired display.

I also noticed that when I switch to FullScreen mode, the area where the status bar is located becomes usable.

I looked through the code but couldn't find anything.

Screenshot

Thank you.

Hey there, amazing 49ers! 🤠👋

I hope you're having a fantastic day! 😃 I've stumbled upon a 🐛 that's causing our app to crash, and I could really use your expertise to squash it. 🙏

Steps to reproduce the issue 🕵️‍♀️:

1. Create a button that, when clicked, opens the BottomSheet modal with the following code:

var page = new DataPickerBottomSheetPage();
page.IsModal = true;
page.ShowHandle = true;
page.Cancelable = true;
page.Show(Window);

2. Click on the button 🖱️ and behold the modal in all its glory! 🌟
3. Dismiss the BottomSheet modal by pulling it down like a fancy window blind 📉
4. Click on the same button again to reopen the modal 🔄
   💥 Boom! The app goes down like a house of cards 🃏🏠

Expected behavior 🧐:

The app should allow us to open and close the BottomSheet modal as many times as our hearts desire, without any crashes. 😍🔄

Actual behavior 😵:

The app crashes when we try to reopen the BottomSheet modal after dismissing it. 😢💔

Environment 🌍:

I know you folks are wizards when it comes to fixing bugs like these! 🧙‍♂️ So, I'm sure this issue will be resolved in no time. Thanks in advance for your help! You're the best! 😎🎉

Keep up the fantastic work, and may the force be with you! 🚀🌟

Should be HandleColor

First up: Works fine for devices with iOS v16+. Just any iOS version from 15 upwards that I tried crashed.

Steps to reproduce:

1. Build and deploy sample app for a iOS device (or simulator) with version 15.*
2. Try to open any bottomsheet
3. App crashes

Exception that is thrown in the sample app:
ObjCRuntime.ObjCException: 'Objective-C exception thrown. Name: NSInvalidArgumentException Reason: +[UISheetPresentationControllerDetent customDetentWithIdentifier:resolver:]: unrecognized selector sent to class 0x12cc00160

	0   CoreFoundation                      0x000000011112dbb4 __exceptionPreprocess + 242
	1   libobjc.A.dylib                     0x000000011fcfabe7 objc_exception_throw + 48
	2   CoreFoundation                      0x000000011113c73a __CFExceptionProem + 0
	3   CoreFoundation                      0x00000001111320bc ___forwarding___ + 1433
	4   CoreFoundation                      0x00000001111341e8 _CF_forwarding_prep_0 + 120
	5   libxamarin-dotnet-debug.dylib       0x000000010eba6149 xamarin_dyn_objc_msgSend + 217
	6   ???                                 0x000000014f9bcca7 0x0 + 5630577831
	7   libmonosgen-2.0.dylib               0x000000010f36d42a ves_pinvoke_method + 474
	8   libmonosgen-2.0.dylib               0x000000010f35f6a5 interp_exec_method + 3717
	9   libmonosgen-2.0.dylib               0x000000010f35ce53 interp_runtime_invoke + 259
	10  libmonosgen-2.0.dylib               0x000000010f18389d mono_runtime_try_invoke + 157
	11  libmonosgen-2.0.dylib               0x000000010f185a2f mono_runtime_invoke + 95
	12  The49.Maui.BottomSheet.Sample       0x000000010dfc1059 _ZL32native_to_managed_trampoline_101P11objc_objectP13objc_selectorPP11_MonoMethodS0_j + 473
	13  The49.Maui.BottomSheet.Sample       0x000000010dfc0e55 -[__UIGestureRecognizerGenericCB target:] + 69
	14  UIKitCore                           0x000000012b79ef8f -[UIGestureRecognizerTarget _sendActionWithGestureRecognizer:] + 49
	15  UIKitCore                           0x000000012b7a90e9 _UIGestureRecognizerSendTargetActions + 100
	16  UIKitCore                           0x000000012b7a5c55 _UIGestureRecognizerSendActions + 294
	17  UIKitCore                           0x000000012b7a4f91 -[UIGestureRecognizer _updateGestureForActiveEvents] + 725
	18  UIKitCore                           0x000000012b797213 _UIGestureEnvironmentUpdate + 2713
	19  UIKitCore                           0x000000012b7962f2 -[UIGestureEnvironment _updateForEvent:window:] + 902
	20  UIKitCore                           0x000000012bd129c9 -[UIWindow sendEvent:] + 5273
	21  UIKitCore                           0x000000012bce94e8 -[UIApplication sendEvent:] + 825
	22  UIKitCore                           0x000000012bd7f28a __dispatchPreprocessedEventFromEventQueue + 8695
	23  UIKitCore                           0x000000012bd81a10 __processEventQueue + 8579
	24  UIKitCore                           0x000000012bd781b6 __eventFetcherSourceCallback + 240
	25  CoreFoundation                      0x000000011109be25 __CFRUNLOOP_IS_CALLING_OUT_TO_A_SOURCE0_PERFORM_FUNCTION__ + 17
	26  CoreFoundation                      0x000000011109bd1d __CFRunLoopDoSource0 + 180
	27  CoreFoundation                      0x000000011109b1f2 __CFRunLoopDoSources0 + 242
	28  CoreFoundation                      0x0000000111095951 __CFRunLoopRun + 875
	29  CoreFoundation                      0x0000000111095103 CFRunLoopRunSpecific + 567
	30  GraphicsServices                    0x00000001220f6cd3 GSEventRunModal + 139
	31  UIKitCore                           0x000000012bcc9e63 -[UIApplication _run] + 928
	32  UIKitCore                           0x000000012bccea53 UIApplicationMain + 101
	33  libxamarin-dotnet-debug.dylib       0x000000010eb6064a xamarin_UIApplicationMain + 58
	34  libmonosgen-2.0.dylib               0x000000010f36e5f9 do_icall + 345
	35  libmonosgen-2.0.dylib               0x000000010f36d103 do_icall_wrapper + 291
	36  libmonosgen-2.0.dylib               0x000000010f35f4ff interp_exec_method + 3295
	37  libmonosgen-2.0.dylib               0x000000010f35ce53 interp_runtime_invoke + 259
	38  libmonosgen-2.0.dylib               0x000000010f181de8 mono_runtime_invoke_checked + 136
	39  libmonosgen-2.0.dylib               0x000000010f189dfc do_exec_main_checked + 92
	40  libmonosgen-2.0.dylib               0x000000010f2b8e42 mono_jit_exec + 354
	41  libxamarin-dotnet-debug.dylib       0x000000010eba4c77 xamarin_main + 1927
	42  The49.Maui.BottomSheet.Sample       0x000000010dfe96f4 main + 68
	43  dyld                                0x000000010e61ce1e start_sim + 10
	44  ???                                 0x000000010e9c141f 0x0 + 4540077087

Did anyone experience anything similar?

This is something new since the latest update.

When BottomSheet is dismissed, it leaves behind a blank space with exact height as the minimal height of BottomSheet.

It is as if the height is defined with absolute px value rather than with Auto, which should collapse to zero height.

Description:

I came across an issue when using the BottomSheet in my project. When I try to dismiss the full-screen BottomSheet, there is a weird gap at the top of the screen. I suspect that there might be some bugs, or perhaps I'm doing something wrong.

I was able to observe that the sample app provided in the repository does not have this issue, and the BottomSheet works beautifully in the sample app.

Steps to reproduce:

Implement a full-screen BottomSheet in a project.
Dismiss the BottomSheet.
Observe the weird gap at the top of the screen.
Expected behavior:

The BottomSheet should dismiss without any weird gap at the top of the screen, similar to the sample app provided in the repository.

Actual behavior:

When dismissing the full-screen BottomSheet, a weird gap appears at the top of the screen.

Additional context:

Here's a link to a video where I encountered the issue (timestamped to the relevant part): https://www.youtube.com/watch?v=JJUm58avADo&t=755s

I would appreciate any guidance on how to resolve this issue, or please let me know if there are any known bugs or workarounds.

Thank you!

Hello i would like to open your wonderful bottom sheet from the view model.
But the parameter window can't be accessible from this page.
Can you help me ?

Thanks.

Corentin.

[Edit]

Found solution thanks !

Hi !

I have a last issue to finish to implement my Bottom Sheets.
Content height seems to be misscalculated when Label take multiple lines and i let him took all place it need. Same issue on iOS and Android side.

If you have any workaround or i miss something ?

Android :

iOS :

Hello i really like this BottomSheet, but the big issue for me it's need to show from code-behind.
Can you share or create method to show from viewmodel ?

I try to add page into view model but with iOS i have a little bug.

2023-06-21 17:40:44.447274+0200 [67953:1059473] [Presentation] Attempt to present <The49_Maui_BottomSheet_BottomSheetViewController: 0x7fe9efaeae80> on <CommunityToolkit_Maui_Core_Views_MauiPopup: 0x7fe9f038e4d0> (from <CommunityToolkit_Maui_Core_Views_MauiPopup: 0x7fe9f038e4d0>) whose view is not in the window hierarchy.

Some idea to fix it ?

Hello,

One usage I found effective for Maui.BottomSheet is to display Usage Tips whereby e-learning type Help needs to be integrated with an App. There are situations where I want to show the Content rather than the minimalist AnchorDetent (my anchor being near the very top) and would like to have both ContentDetent and AnchorDetent.

Unless I missed the obvious, I see no option for showing a specific Detent first. I know the default is great, but such added options will only expand the usage scope for this great package, particularly for educational apps.

How do you set ContentDetent as a default on invoking the Show() method?

It would be great if the default behavior can be overridden like bottomSheet.Show(startWith:DetentType.Content).