[BUG] Popup does not fill screen

[mklement-ps]

Is there an existing issue for this?

• [x] I have searched the existing issues

Did you read the "Reporting a bug" section on Contributing file?

• [x] I have read the "Reporting a bug" section on Contributing file: https://github.com/CommunityToolkit/Maui/blob/main/CONTRIBUTING.md#reporting-a-bug

Current Behavior

The popup, both v1 and v2, do not respect the HorizontalOptions="Fill" setting when set on either the ContentView or the top-level Grid of the popup view.

Expected Behavior

When HorizontalOptions="Fill" is specified, the popup should fill the whole screen.

Steps To Reproduce

1. Open the solution from the reproduction sample.
2. Click the button "Open Popup" to see the current behaviour.
3. Click the button "Open Popup with Workaround" to see the expected behaviour.

Link to public reproduction project repository

https://github.com/mklement-ps/maui-community-toolkit-popup-bug

Environment

- .NET MAUI CommunityToolkit: 12.1.0 (occurred also in 11.2.0 and 12.0.0)
- OS: Windows 11 Pro 24H2
- .NET MAUI: 9.0.90 (occurred also in 9.0.80)

Anything else?

Does also not work with VerticalOptions="Fill".

Please not that I set the popup margin and padding to 0 on the global default:

.UseMauiCommunityToolkit(options =>
{
    options.SetPopupDefaults(new DefaultPopupSettings
    {
        Margin = 0,
        Padding = 0
    });
    options.SetPopupOptionsDefaults(new DefaultPopupOptionsSettings
    {
        Shadow = null,
        Shape = new Microsoft.Maui.Controls.Shapes.RoundRectangle
        {
            CornerRadius = new CornerRadius(10, 10, 0, 0),
            StrokeThickness = 0
        }
    });
})

[ghost]

I though fill was deprecated, but it's not. Fill and Expand is deprecated. Good workaround @mklement-ps .

[bijington]

I haven't tested this but what happens if you remove the ContentView root element and replace it with your inner Grid?

[mklement-ps]

I haven't tested this but what happens if you remove the ContentView root element and replace it with your inner Grid?

@bijington You mean like this?

<?xml version="1.0" encoding="utf-8" ?>
<Grid
    x:Class="MauiCommunityToolkit.ReproductionSample.PopupFillBug.Views.PopupWithFillBug"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    HeightRequest="100"
    Margin="0"
    Padding="20"
    BackgroundColor="Orange"
    HorizontalOptions="Fill"
    VerticalOptions="End">

    <Label
        FontSize="14"
        HorizontalTextAlignment="Center"
        Text="This popup should fill the screen."
        TextColor="Black"
        VerticalTextAlignment="Center" />
</Grid>

Still doesn't fill horizontally, but the size of the popup takes up a little bit more space. I'm not sure why, though.

[ghost]

<?xml version="1.0" encoding="utf-8" ?>
<Grid
  <Grid.RowDefenitions>
    <RowDefenition Height="*" />
  </Grid.RowDefenitions>
  <Grid
    Grid.Row=0
    x:Class="MauiCommunityToolkit.ReproductionSample.PopupFillBug.Views.PopupWithFillBug"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    HeightRequest="100"
    Margin="0"
    Padding="20"
    BackgroundColor="Orange"
    HorizontalOptions="Fill"
    VerticalOptions="End">

    <Label
        FontSize="14"
        HorizontalTextAlignment="Center"
        Text="This popup should fill the screen."
        TextColor="Black"
        VerticalTextAlignment="Center" />
  </Grid>
</Grid>

Does this help @mklement-ps ?

[mklement-ps]

Does this help @mklement-ps ?

@rokmeglic71 No, unfortunately not.

As you can see, the whole grid is not filling all available space, as it usually does. So the column definition of * also only fills what is available to the Grid.

Here's my code, had to adapt it a bit to make it compile:

<?xml version="1.0" encoding="utf-8" ?>
<Grid
    x:Class="MauiCommunityToolkit.ReproductionSample.PopupFillBug.Views.PopupWithFillBug"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    ColumnDefinitions="*"
    HorizontalOptions="Fill"
    VerticalOptions="End">
    <Grid
        Grid.Row="0"
        HeightRequest="100"
        Margin="0"
        Padding="20"
        BackgroundColor="Orange">

        <Label
            Margin="0"
            Padding="0"
            FontSize="14"
            HorizontalTextAlignment="Center"
            Text="This popup should fill the screen."
            TextColor="Black"
            VerticalTextAlignment="Center" />
    </Grid>

</Grid>

btw, is this expected behavior that the popup is not rendered in the XAML Live Previewer?

[ghost]

I think ColumnDefinitions="*" should be RowDefinitions="*" as we are using "Grid.Row="0" @mklement-ps .

[mklement-ps]

I think ColumnDefinitions="*" should be RowDefinitions="*" as we are using "Grid.Row="0" @mklement-ps .

Well, it's implicitly also on Grid.Column="0", so it doesn't really make a difference. Just tried it to be sure and added it with RowDefinitions="*", but same result. Also I want the popup to fill on the horizontal axis, so column should be the right one to use here, shouldn't it? Row would fill vertically to my understanding.

[ghost]

OO, yes, you are right. In this case we would need Grid.Column="0" and ColumnDefinitions="*" like you did.

The only thing I can think of is if Grid would be inside the <ContentPage.Content><ContentView>, this is how my first page is expanded to full. Maybe it's different for popup.

Additional info. I can see I have an image inside the Grid, with Aspect="Fill", so maybe this image forces the Grid to expand to it's maximum width/height, and I also set the Height/Width based on Grid_PropertyChanged event, which get's me maximum content width/height. OK, that explains it. I basically force the image to full phone height/width and then the Grid expands due to RowDefinitions="*".

[welissonArley]

What I'm doing in my code as a workaround is set the WeightRequest property. However instead of just play with numbers to try to find the best one I just use the device screen size for this:

var screenWidth = DeviceDisplay.MainDisplayInfo.Width / DeviceDisplay.MainDisplayInfo.Density;

WidthRequest = scheenWidth * 0.8;

so I get the screen width in DIP (MAUI unit of measure for components) and multiply by 80% because I dont wanna fit 100% of the screen :)

[thomasgalliker]

@mklement-ps workaroud did the trick for me to have the popup content filling the full width of the display.

<Rectangle
    HeightRequest="1"
    BackgroundColor="Transparent"
    VerticalOptions="End"
    ZIndex="-99" />

If anyone knows a better way to achieve it, let us know.

[malsabi]

I can confirm VerticalOptions and HorizontalOptions doesn't respect the value of Fill but somehow if you defined a global DefaultPopupSettings and set the default values to Fill instead of Center then the popup will take full height / width. This doesn't have to do with either using ContentView or Grid or Popup in case you want to return a result. I also noticed if you set FillAndExpand in the ContentView then it will take full height, but FillAndExpand is obsolete. I'm not sure why Fill is not working. @bijington

This also applies to Padding If I want to set the Padding in the ContentView it will not be affected. The only way to apply padding to the Popup or ContentView is from DefaultPopupSettings by setting the Padding property to any value. I think Margin is the same issue here.

The only thing that is working is BackgroundColor which can be applied in the ContentView or from DefaultPopupSettings.

Please make sure all properties can be applied from ContentView as well and not only from DefaultPopupSettings .

[Zack-RI]

Using Fill doesnt work, but FillAndExpand does. Fill used to work in version 10 Since FillAndExpand is obsolete - this behaviour needs to work with Fill.

[GuidoNeele]

I can confirm that using FillAndExpand works whereas Fill doesn't. For me HorizontalOptions Fill did work, I only had issues with VerticalOptions Fill.