New Bottom Sheet Control in MCT

[eramrit78]

Now a days in most apps Android and IOS bottom sheet used in lot of screens. You can VOT it to add in MCT.

Thanks

[bijington]

How would this apply to macOS and Windows?

[eramrit78]

We can use a Bottom Bar for MAC and Windows like This:

[bijington]

Is this a feature that you are willing to contribute into the toolkit?

[eramrit78]

No, The community will do it if possible.

[VladislavAntonyuk]

https://vladislavantonyuk.github.io/articles/Creating-a-bottom-sheet-using-.NET-MAUI

[vhugogarcia]

This library is widely used by a lot of developers, including myself. I highly recommend it since it used native implementation on each platform: https://github.com/the49ltd/The49.Maui.BottomSheet even our friend Gerald has mentioned it in 2 videos.

• https://www.youtube.com/watch?v=JJUm58avADo
• https://www.youtube.com/watch?v=bdKWnddRDY0

I think we should not implement a Bottom Sheet in MCT since there are already out there some solid options.

[peruchali]

This library is widely used by a lot of developers, including myself. I highly recommend it since it used native implementation on each platform: https://github.com/the49ltd/The49.Maui.BottomSheet even our friend Gerald has mentioned it in 2 videos.

• https://www.youtube.com/watch?v=JJUm58avADo
• https://www.youtube.com/watch?v=bdKWnddRDY0

I think we should not implement a Bottom Sheet in MCT since there are already out there some solid options.

These bottom sheet implementations don't work very well if your app has a flyout (it shows up above flyouts which is weird), or if you want it to show above tabbar/navigation bar (like Google Maps). It'd be awesome to have a bottomsheet implementation in MCT that actually works and is customizable.

[stephenquan]

You can create a simple BottomSheet appearance with minimal customization of Popup. The key elements are:

• Popup.HorizontalOptions="Fill"
• Popup.VerticalOptions="End"
• Popup.Color-"Transparent"
• Border.StrokeShape="RoundRectangle 10,10,0,0"

The rest is customizing the appearance to suit your requirements

<toolkit:Popup
    x:Class="MauiVariablePopup.ResizePopup"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    HorizontalOptions="Fill"
    VerticalOptions="End"
    Color="Transparent">
    <Border BackgroundColor="White" MaximumWidthRequest="600" StrokeShape="RoundRectangle 10,10,0,0">
        <VerticalStackLayout>
            <Label Margin="10,10,10,10" HorizontalOptions="Center" Text="Bottom Sheet Title" />
            <Border Margin="0,5,0,5" />
            <VerticalStackLayout Margin="20,0,20,0">
                <RadioButton Content="Yes" />
                <RadioButton Content="No" />
            </VerticalStackLayout>
            <Border Margin="0,5,0,5" />
            <Button Margin="20,10,20,10" HorizontalOptions="End" Text="Vote" />
        </VerticalStackLayout>
    </Border>
</toolkit:Popup>

[peruchali]

How does this work for non-modal bottomsheets? There's lot of functionality that a bottomsheet provides like detents, etc.

[CliffAgius]

Closed as answered, if closed in error please let us know to re-open.

[peruchali]

I don't think this is answered. There are workarounds, but those fall short of an actual bottomsheet control.

[bijington]

I think the answer is we aren't going to be implementing this in the toolkit. There aren't enough votes on the request and from what I can tell nobody is willing to implement it.

[stephenquan]

@peruchali non-modal behavior can be configured by setting CanBeDismissedByTappingOutsideOfPopup to False. A non-modal BottomSheet/BottomBar can also be achieved with DockLayout.

@peruchali as to the detents one way that you may achieve this is if you use an invisible rotated Slider to intercept the user swipe gesture and I also use Slider to drive TranslationY of both the bottom sheet grip and the bottom sheet content. Because It's in a ContentView the user can supply their own content via the ContentPresenter.

<!-- BottomSheetView.xaml -->
<?xml version="1.0" encoding="utf-8" ?>
<ContentView
    x:Class="Maui.StackOverflow.BottomSheetView"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">
    <ContentView.Resources>
        <toolkit:MathExpressionConverter x:Key="Math" />
        <toolkit:MultiMathExpressionConverter x:Key="MultiMath" />
    </ContentView.Resources>
    <ContentView.ControlTemplate>
        <ControlTemplate>
            <Grid x:Name="bs">
                <Border
                    x:Name="grip"
                    Padding="1"
                    BackgroundColor="{AppThemeBinding Light=White, Dark=Black}"
                    HeightRequest="40"
                    Stroke="Gray"
                    StrokeShape="RoundRectangle 20, 20, 0, 0"
                    StrokeThickness="{TemplateBinding BorderWidth}"
                    TranslationY="{MultiBinding {Binding Value, Source={Reference slider}},
                                                {Binding Height, Source={Reference bs}},
                                                Converter={StaticResource MultiMath},
                                                ConverterParameter='x - x1 + 2'}"
                    VerticalOptions="End">
                    <Rectangle
                        BackgroundColor="Gray"
                        HeightRequest="4"
                        WidthRequest="40" />
                </Border>
                <Slider
                    x:Name="slider"
                    HeightRequest="{Binding Width, Source={Reference bs}}"
                    Maximum="{Binding Height, Source={Reference bs}}"
                    Minimum="{Binding Height, Source={Reference grip}}"
                    Opacity="0"
                    Rotation="90"
                    WidthRequest="{Binding Height, Source={Reference bs}}"
                    ZIndex="1"
                    Value="{Binding Height, Source={Reference bs}, Converter={StaticResource Math}, ConverterParameter='x/2'}" />
                <Border
                    x:Name="content"
                    Padding="1"
                    BackgroundColor="{AppThemeBinding Light=White, Dark=Black}"
                    HeightRequest="{MultiBinding {Binding Height, Source={Reference bs}},
                                                 {Binding Value, Source={Reference slider}},
                                                 Converter={StaticResource MultiMath},
                                                 ConverterParameter='x - x1 + 2'}"
                    HorizontalOptions="Fill"
                    TranslationY="{Binding Value, Source={Reference slider}}"
                    VerticalOptions="Start"
                    ZIndex="2">
                    <ContentPresenter />
                </Border>
            </Grid>
        </ControlTemplate>
    </ContentView.ControlTemplate>
</ContentView>