Xamarin XCT Popup rounded Corners

Question

is it possible to round the corners of the XCT popup? I tried to set the BackgroundColor to transparent, and to set the body in a frame with the option CornerRadius - but this does not work as desired.

Does anyone have a tip on how to round the corners?

<xct:Popup xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       x:Class="CashTracker.Views.ImagePopup"
       xmlns:viewmodels="clr-namespace:CashTracker.ViewModels"
       xmlns:xct="clr-namespace:Xamarin.CommunityToolkit.UI.Views;assembly=Xamarin.CommunityToolkit"
       Size="300,400"
       BackgroundColor="Transparent">

        <Frame CornerRadius="20" HasShadow="True">
            <StackLayout>
                <Label Text="Aufgenommenes Foto" FontSize="Medium" HorizontalOptions="Center"/>
                <Image x:Name="PopupImageSource"/>
            </StackLayout>
        </Frame>
</xct:Popup>

Xamarin XCT Popup

The popup should look like this - only without the white corners.

Xamarin Popup Frame

What happens if you set Frame's `BorderColor` to transparent? May need to set `Padding` to some non-zero value too. Otherwise, [RG Popup](https://github.com/rotorgames/Rg.Plugins.Popup) might be more flexible. — ToolmakerSteve, May 16 '22 at 17:45

Junaid Pathan · Accepted Answer · 2022-11-28T22:20:52.833

Somehow BackgroundColor was not working for Popup. Hence use the Color propperty for setting color of the Popup.

If you are using Frame in your layout, you can use Frame's CornerRadius for rounded corners (only if you are using Frame).

If you are not using Frame then you can use Xamarin Community Toolkit's CornerRadiusEffect.CornerRadius to set CornerRadius for any Layout, View or Control.

Hence for your question, it can be done by setting Popup's color as Transparent and your content's parent element must have property for corner radius and must have BackgroundColor set to White or any other Color as your Popup`s color is Transparent.

Here's the XAML

<xct:Popup ...           
           xmlns:xct="clr-namespace:Xamarin.CommunityToolkit.UI.Views;assembly=Xamarin.CommunityToolkit"
           Size="300,400"
           Color="Transparent">

    <Frame CornerRadius="20" HasShadow="True">
        <StackLayout>
            <Label Text="Aufgenommenes Foto" FontSize="Medium" HorizontalOptions="Center"/>
        </StackLayout>
    </Frame>

    //OR, if you don't need Frame then,

    <StackLayout BackgroundColor="White" xct:CornerRadiusEffect.CornerRadius="10">
        <Label Text="Aufgenommenes Foto" FontSize="Medium" HorizontalOptions="Center"/>
    </StackLayout>
</xct:Popup>

There are lot of bugs in Xamarin Community Toolkit controls and views, we need to have some work-around for every control. Be it XCT's Popup, TabView, or extensions such as CornerRadius, ShadowEffect, TouchEffects, NativeAnimations, etc. The Community can't provide a single control without any bugs. But still, there are lots of useful features in XCT, hence we can only hope that the bugs are fixed, although the focus of fixing bugs if moved on to MAUI's Community Toolkit, until then we can use some work-arounds till stable and useful version of MAUI is released (considering its current status while writing this answer).

Xamarin XCT Popup rounded Corners

1 Answers1