1

I am trying to create a popup using the Xamarin.CommunityToolkit package but the popup is rendering with extra spacing across the top. Because of hardware limitations I am forced to develop using a much older version of CommunityToolkit (1.2.0) and Xamarin.Forms (5.0) so the issue may be from this.

This is the sample popup I am trying to render.

<?xml version="1.0" encoding="utf-8" ?>
<xct:Popup xmlns="http://xamarin.com/schemas/2014/forms"
           xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
           xmlns:xct="clr-namespace:Xamarin.CommunityToolkit.UI.Views;assembly=Xamarin.CommunityToolkit"
           Size="300,300"
           Color="Blue"
           x:Class="floorplanner.Dialogs.RoomDetailsDialog"
           xct:Clip="">
    <Label Text="Hello World" BackgroundColor="Green"/>
</xct:Popup>

This is what the popup looks like when it's opened:

enter image description here

So far I have tried configuring my MainTheme to have:

<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>

I have also tried specifying the size in a child layout element instead of the popup itself but it still rendered with the top spacing.

I have tried setting the VerticalOptions of the label to "Fill" and it still rendered as shown in the image. Originally, I had the label inside of a StackLayout but I removed this nesting to simplify the example for this post.

From more experiments I found that the Label itself is still rendering with a height of 300 units and the bottom the the Label's region is being clipped off the bottom. So essentially, there are ~50 units of height that are being pushed off the bottom.

As a workaround the the problem I have set the background of popup to transparent and set the inner content of the popup to the height - 50.

MrMeik
  • 41
  • 4
  • have you tried setting the VerticalOptions of the Label, or putting it inside a StackLayout? – Jason Mar 15 '22 at 20:51

1 Answers1

0

As you set the Color="Blue", the whole background of popup is blue.

You add a label to in the popup layout however you haven't set the location of the label. You can set VerticalOptions and HorizontalOptions to set the location.

Here is the xaml code:

<xct:Popup xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:xct="clr-namespace:Xamarin.CommunityToolkit.UI.Views;assembly=Xamarin.CommunityToolkit"
       Size="300,300"
       Color="Blue"
       x:Class="floorplanner.Dialogs.RoomDetailsDialog"
       xct:Clip="">

    <Label Text="Hello World" BackgroundColor="Green" VerticalOptions="Start" HorizontalOptions="Start"/>

</xct:Popup>

Reference links: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/layout-options

Alexandar May - MSFT
  • 6,536
  • 1
  • 8
  • 15
  • I appreciate the suggestion but the solution hasn't helped. Even with the Vertical Options set to start, I am not able to place the label any higher than it currently is. Even when the Vertical Options are set to fill, the green label doesn't draw over the top portion. – MrMeik Mar 16 '22 at 13:06
  • Would you mind sharing us a baisc, minimal project to test ? You can upload it to github and attach the link here . – Alexandar May - MSFT Mar 17 '22 at 09:12