CornerRadius not working correctly for Comminitytoolkit Maui popup

Question

Hi Team,

I am working on a .Net MAUI app (in Visual Studio 2022), Android emulator used is Pixel 5 API 33.

Using CommunityToolkit popup I am unable to get the corner radius working correctly. Corner radius is not getting cut.

Details of pop up xaml file and screenshot are as below -

<?xml version="1.0" encoding="utf-8" ?>
<toolkit:Popup 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"
               VerticalOptions="Center"
               Color="Transparent"             
               x:Class="MauiApp8.SimplePopup">
    
    <Frame  CornerRadius="40" IsClippedToBounds="True">
        <VerticalStackLayout>
            <HorizontalStackLayout>
                <Label Text="Enter the Data" FontSize="Small"  />
                <Label Text="*" FontSize="Small" TextColor="red" />
            </HorizontalStackLayout>
            <Entry x:Name="entry"  Placeholder="Enter the Data" FontSize="Small" Keyboard="Numeric" MaxLength="7"  ></Entry>
            <Label x:Name="labelMileageerror" Text="Please enter a value" FontSize="Small" IsVisible="false" TextColor="Red"  />
            <HorizontalStackLayout>
                <Button Text="Save" FontSize="Small" 
                Clicked="OnYesButtonClicked" HorizontalOptions="Start" Margin="10,10,10,10"/>
                <Button Text="Cancel" FontSize="Small" HorizontalOptions="End"
                Clicked="OnNoButtonClicked"  Margin="10,10,10,10" />
            </HorizontalStackLayout>
        </VerticalStackLayout>
    </Frame>

</toolkit:Popup>

Requesting to please let me know how to get it working correctly.

Thanks,

Salil

Answer 1

Hello,

Referring to the answers made by the developers in Popups are nice, add an option to have Rounded Corners as that's more appealing and provides a distinct look #352, all you need to do is set the background color of the popup to be transparent.

<toolkit:Popup 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"
               Color="Transparent"
             x:Class="MauiApp1.NewPage1">

Best Regards,

Alec Liu.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.