[Enhancement] Transparent background for Popup

[mhrastegari]

Summary

Hi! i know it's still in preview but i have a popup in my pet project that has UWP(sadly it's not implemented yet) and iOS and Android versions and i really wanted to replace the ...... popup with XCT's (because i love how XCT puts native popup into the projects) and i have a issue with setting background of popup to transparent.

also i just found out in iOS we have a padding and radius that we can't change 🤦‍♂️ and the material frame acrylic not working on it as it should be.

Screenshot

[AndreiMisiukevich]

Hey @ahoefling any chance to take a look at this?

[SkyeHoefling]

I'm more than happy to look at this. Can you share a sample project or the popup XAML/c#.

[mhrastegari]

Yeah sure!
issue1097.zip

[SkyeHoefling]

@mhrastegary77 I downloaded your sample code and made some changes to it to help get you a little further with XCT Popups.

You need to add the following property to your XAML Color="Transparent". This will set the color of popup independent of the content control. In your example you use the sh:MaterialFrame with rounded corners, which is your main control. The native popup will need to have the Transparent Color so the user only sees the sh:MaterialFrame.

Here is an updated XAML snippet

<?xml version="1.0" encoding="utf-8" ?>
<xct:Popup
    x:Class="issue1097.PopupView"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:sh="http://sharpnado.com"
    xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
    Size="300,365"
    Color="Transparent"> <!-- this was the change to get it working -->

  <!-- omitted xaml -->

</xct:Popup>

Feature Parity Table

Most of the features work across the 3 major platforms (iOS, Android, and UWP), but not all of them have been implemented. The original Pull Request documents what works and what doesn't (#653). Below is a screenshot of our current feature parity table

Screenshots

Screenshot - Android

Screenshot - UWP

UWP requires the min target version to be 19041 - this may change before 1.1.0 is released but right now if you don't set this correctly the Popup will throw a runtime exception.

Since UWP has a default border on the Flyout, if you want it to be transparent you will need to set the border color to transparent. There is an attached property BorderColor that is available in the windows specific xmlns

Add xmlns to Popup Element

xmlns:xctwin="clr-namespace:Xamarin.CommunityToolkit.UI.Views.WindowsSpecific;assembly=Xamarin.CommunityToolkit"

Add Attached Property BorderColor

xctwin:Popup.BorderColor="Transparent"

Full XAML

<?xml version="1.0" encoding="utf-8" ?>
<xct:Popup
    x:Class="issue1097.PopupView"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:sh="http://sharpnado.com"
    xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
    xmlns:xctwin="clr-namespace:Xamarin.CommunityToolkit.UI.Views.WindowsSpecific;assembly=Xamarin.CommunityToolkit"
    Size="300,365"
    Color="Transparent"
    xctwin:Popup.BorderColor="Transparent"> <!-- add windows specific namespace and attached property for border color -->
  <!-- omitted xaml --.

</xct:Popup>

Screenshot - iOS (Not Implemented)

While iOS is implemented using native popups, that transparency feature is not currently implemented. PRs are always welcomed

Sample Code

I have updated your sample code with the changes above to help you get going faster.

issue1097_Update1.zip

[mhrastegari]

WOW! this is amazing Andrew, i don't know what to say! thanks!!!❤
btw i tried with BackgroundColor and Background and didn't work. i didn't know about that Color property, sorry :(

[pictos]

@mhrastegary77 if the property name was BackgroundColor or PopUpBackgroundColor do you think that you could found it easier?

[mhrastegari]

well, i didn't.

[pictos]

The current name is Color and not BackgroundColor, I'm asking because if you feel that another name would be more intuitive we can see if we can change the name

[SkyeHoefling]

@pictos I think our biggest problem is we don't have the documentation put together for this. People have to guess on the API or read the implementation details. The XML docs don't really work in the XAML editor. It should be a slightly better dev experience for C# views.

This is mainly my fault as I haven't had the time to write the docs yet 😞

[pictos]

IF you feel that the prop. the name will not make it easier to discover let's keep at it's. @mhrastegary77 Can we close this issue?

[mhrastegari]

No @ahoefling it's not your fault ❤

ok i will @pictos 👀

[pictos]

Thanks @mhrastegary77