Unknown Spacing at Top of Popup

360 Views Asked by At

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.

1

There are 1 best solutions below

2
On

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