ThinkGeo.com    |     Documentation    |     Premium Support

Popup UI does not handle device theme correctly

#1

Good Morning.

I have a Xamarin Forms app and currently running on a droid device that has it’s theme set to dark mode.

Following your sample for Popups on a Feature I found the Popup did display but was not readable. See screen shot.
It appears you honor the devices theme for the text color but not the background color of the popup (white text on a white background :slight_smile: ).

Screenshot 2021-06-30 Popup

Looking over the Popup class there is no way I can change the Text color but it appears there are bindable properties for the background and background color.
I tried to manipulate those directly on the instance and those changes did not take effect.
I also tried to do it via the resource dictionary, see below, and it is also did not take effect.

<Style TargetType="ThinkGeo:Popup">
	<Setter Property="BackgroundColor"
			Value="Black" />
</Style>

Question 1: I think you have a bug in regards to the Popup not working correctly based on the devices theme. Could possibly be a bigger problem with the latest android OS as it goes beyond just light and dark themes.

Question 2: How do we go about styling the popup? It appears the class has some bindable properties for such a task but appears to ignore them.

Currently I am unable to test this behavior on iOS.

Thanks for your help …
Chris …

My env details:
Microsoft Visual Studio Professional 2019
Version 16.9.4
VisualStudio.16.Release/16.9.4+31205.134
Microsoft .NET Framework
Version 4.8.04084

Xamarin 16.9.000.273 (d16-9@1bba9e0)
Visual Studio extension to enable development for Xamarin.iOS and Xamarin.Android.

Xamarin Templates 16.9.72 (426ebf6)
Templates for building iOS, Android, and Windows apps with Xamarin and Xamarin.Forms.

Xamarin.Android SDK 11.2.2.1 (d16-9/877f572)
Xamarin.Android Reference Assemblies and MSBuild support.
Mono: 5e9cb6d
Java.Interop: xamarin/java.interop/d16-9@54f8c24
ProGuard: Guardsquare/proguard/v7.0.1@912d149
SQLite: xamarin/sqlite/3.34.1@daff8f4
Xamarin.Android Tools: xamarin/xamarin-android-tools/d16-9@d210f11

Xamarin.iOS and Xamarin.Mac SDK 14.14.2.5 (3836759d4)
Xamarin.iOS and Xamarin.Mac Reference Assemblies and MSBuild support.

ThinkGeo.UI.XamarinForms v12.3.10

Xamarin Forms v4.8.0.1687

#2

Afternoon.

I am now able to test his on iOS and I think we have an issue but on iOS it is the “x” to close is not visible on any theme.
Using an simulator iPhone 12 iOS 14.4.

In a light theme:
Screenshot 2021-08-09 iOS Popup Light Theme

In a dark theme
Screenshot 2021-08-09 iOS Popup Dark Theme

I assume that area to the right hand side is where the closing “x” is located but in both themes I assume we have a white x on a white background. I found clicking somewhere in the middle of that white area I got the popup to close.

Regards
Chris …

#3

Chris,

We are taking a look at this. The plan is to have two nine patch images, one for dark and light mode and then based on the theme choose them. I have not yet looked into the close X problem, but I will as a part of this.

#4

Thanks David.

What about exposing the elements used to build the popup UI and then via Styles the developer can manipulate them? Then I have a Resource Dictionary and the colors can be whatever suits.

Another thought what about allowing the developer to provide their own content? Via control templates for example? That way by default it shows text as the content or if the developer wants more they can provide a content template.

The use case for this is to within a popup show some descriptive text … primarily a summary but also provide a button or link so the user can navigate to a page to display more detail.

Cheers
Chris …

#5

Hi Chris,

I know it’s been a while but just want to have a quick update in case you or anyone is interested.

  1. Transition from Xamarin.Forms to .NET MAUI : Xamarin.Forms is now officially replaced by .NET MAUI (Multi-platform App UI), which Microsoft stopped supporting as of May 1, 2024. .NET MAUI offers several advantages over its predecessor.

  2. ThinkGeo’s New MAUI Edition : ThinkGeo has released its MAUI edition starting with version 14. You can download it from NuGet: ThinkGeo.UI.Maui 14.1.0. Also, check out this brief one-minute video showcasing the new features compared to the previous Xamarin.Forms edition: ThinkGeo UI Mobile V14 (based on Maui) in 1 minute.

  3. Customizable Markers with ThinkGeo MAUI : You can create a variety of customized markers/popups using ThinkGeo MAUI. We have a couple of samples available in our MAUI HowDoI series:

I hope that helps!

Thanks,
Ben