CODEWITHSUNDEEP
c#mauimaui-community-toolkit
Dharun
Dharun

Reputation: 77

.NET MAUI - Rounded Corner Shape Popup not displaying properly using MAUI toolkit

I am trying to implement a Popup using CommunityToolkit and the popup should be displayed as the RoundedCornerShape like below:

enter image description here

But the Corner Shape doesn't display like above.

Below is my XAML code:

<?xml version="1.0" encoding="utf-8" ?>
<xct:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
           xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
           xmlns:xct="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
           Size="{OnIdiom  Tablet='560,300',Phone='360,200'}"
           CanBeDismissedByTappingOutsideOfPopup="False"
           xmlns:resources="clr-namespace:CMMobile.Resources"
           xmlns:nn="clr-namespace:Microsoft.Maui.Controls.Compatibility;assembly=Microsoft.Maui.Controls"
           xmlns:mdc="clr-namespace:Material.Components.Maui;assembly=Material.Components.Maui"
           x:Class="CMMobile.Views.DisplayPopup">

    <Frame Padding="0" BackgroundColor="#FFEAE7EC" CornerRadius="28" IsClippedToBounds="True">
        <StackLayout Padding="5"  VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" BackgroundColor="{AppThemeBinding Light={StaticResource colorWhite}, Dark={StaticResource DisableBackgroundDark},Default={StaticResource colorWhite}}">
            <mdc:Label Text="Are you sure you want to update?"/>

            <mdc:Button Text="Confirm"/>

        </StackLayout>
    </Frame>
   
   
</xct:Popup>

Output:

enter image description here

I have tried with both ContentView and Frame and looks in the four corners i am seeing the rectangular frame layout(in above image marked those), which should not come. What will be the best way to develop the pop-up with the RoundedCornerShape without those shadowed corners? What am i missing here?

Upvotes: 2

Views: 2660

Answers (1)

FreakyAli
FreakyAli

Reputation: 16547

I would make the following changes to fix the issue you are facing:

The first is to set the Popup's Color property to Transparent as suggested in one of the comments, Then I would replace Frame with Border since Frame is obsolete in Maui and uses the old XF frame which is probably not the best choice, I would also replace StackLayout with either HorizontalStacklayout or VerticalStackLayout wherever necessary for the same reason as mentioned for frame and the other reason being these are rewritten from scratch with better performance in mind and they actually work well too unless you for some reason need to switch between orientations just use the later, so now your final Layout would look like below:

NOTE: I have not designed it the same just got the fundamentals

<?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"
    Color="Transparent"
    x:Class="Mobile.Popups.GenericConfirmationPopup">
   <Border Padding="0" HeightRequest="300"
           WidthRequest="300"
           Stroke="Transparent"
           BackgroundColor="#FFEAE7EC">
        <Border.StrokeShape>
            <RoundRectangle CornerRadius="28"/>
        </Border.StrokeShape>
        <VerticalStackLayout Padding="5"  VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" BackgroundColor="{AppThemeBinding Light={StaticResource colorWhite}, Dark={StaticResource DisableBackgroundDark},Default={StaticResource colorWhite}}">
            <Label Text="Are you sure you want to update?"/>
            <Button VerticalOptions="End" Text="Confirm"/>
        </VerticalStackLayout>
    </Border>
</toolkit:Popup>

I have also added screenshots of the final result:

enter image description here

Upvotes: 8

Related Questions