the49ltd / The49.Maui.BottomSheet

.NET MAUI library used to display pages as Bottom Sheets
MIT License
330 stars 31 forks source link

Setting CornerRadius on BottomSheet unwantedly applies to bottom corners #81

Open hansmbakker opened 10 months ago

hansmbakker commented 10 months ago

Thank you for the nice control!

When creating a bottomsheet item with the CornerRadius set like 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"
                   x:Class="MyNamespace.MyClass"
                   HasHandle="True"
                   IsCancelable="True"
                   HasBackdrop="True"
                   CornerRadius="16"
                   BackgroundColor="White">
    <!-- Content of control here -->
</the49:BottomSheet>

the bottom corners also get rounded corners, while for a BottomSheet I would only expect rounded corners for the top corners:

image

I do see that the following code only should apply to the top corners according to the documentation of GradientDrawable.setCornerRadii(...). https://github.com/the49ltd/The49.Maui.BottomSheet/blob/5bade0264bc34c7c9b69e63afc6c1f6cbb55d9bb/src/Platforms/Android/SheetRadiusDrawable.cs#L14

Am I doing something wrong? What can I do to fix this?

Environment:

RsZoli commented 3 months ago

I also experience this issue!

jaysonragasa commented 3 months ago

Same here. Rounded corner at the bottom of the sheet.

image Samsung S10 - Android 12 API 31

ELCesarMaat commented 2 months ago

You can set the Background color Transparent and put all inside of a border and its StrokeShape property to RoundRectange example: `<?xml version="1.0" encoding="utf-8"?>

<the49:BottomSheet

CornerRadius="0"
BackgroundColor="Transparent"
Padding="8, 0">

<the49:BottomSheet.Detents>
    <the49:ContentDetent />
</the49:BottomSheet.Detents>

<Border BackgroundColor="White" StrokeShape="RoundRectangle 20, 20, 0, 0">

        <!-- All you layout here -->

</Border>

</the49:BottomSheet>`

Use this makes the Handle dissapear but you can make it easily with a box, border, frame, etc

Results image