Skip to content

[BUG] Incorrect Position and Size of Popup on Windows #1349

Closed
#1350
Closed
[BUG] Incorrect Position and Size of Popup on Windows#1349
#1350
Labels
bugSomething isn't workingunverified
@cat0363

Description

@cat0363
cat0363
opened on Aug 17, 2023

Is there an existing issue for this?

  • I have searched the existing issues

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

Current Behavior

On Windows, even if you specify the Popup's Size property, the Popup's Content size takes precedence.

Layout as follows.

<toolkit:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    x:Class="MauiComm_VerifyPopupStyle.Popup1" 
    Size="100, 100" 
    VerticalOptions="Center"
    HorizontalOptions="Start">
    <Label Text="1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ" TextColor="Black"  />
</toolkit:Popup>

The execution result is as follows.

PopupSizeIssue

The Popup's Content Size exceeds the Size specified in the Popup's Size property.
On Android and iOS, the size specified in the Popup's size property takes precedence.
However, it takes precedence as long as it does not exceed the size of its parent.

Next, layout as follows.

<toolkit:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    x:Class="MauiComm_VerifyPopupStyle.Popup1" 
    Size="100, 100" 
    VerticalOptions="Center"
    HorizontalOptions="Start">

    <Grid WidthRequest="100" HeightRequest="100">
        <Grid WidthRequest="10" HeightRequest="10" VerticalOptions="Start" HorizontalOptions="Start" BackgroundColor="Blue" />
        <Grid WidthRequest="10" HeightRequest="10" VerticalOptions="Start" HorizontalOptions="End" BackgroundColor="Blue" />
        <Grid WidthRequest="10" HeightRequest="10" VerticalOptions="End" HorizontalOptions="Start" BackgroundColor="Blue" />
        <Grid WidthRequest="10" HeightRequest="10" VerticalOptions="End" HorizontalOptions="End" BackgroundColor="Blue" />
    </Grid>
</toolkit:Popup>

This is the result of changing HorizontalOptions and VerticalOptions.

HorizontalOptions = "Start" VerticalOptions = "Center"

sc

HorizontalOptions = "Center" VerticalOptions = "Center"

cc

HorizontalOptions = "End" VerticalOptions = "Center"

ec

HorizontalOptions = "Start" VerticalOptions = "End"

se

HorizontalOptions = "Center" VerticalOptions = "End"

ce

HorizontalOptions = "End" VerticalOptions = "End"

ee

The red line in the execution result is the horizontal and vertical center.
As you can see from the execution result, when VerticalOptions is Center, the vertical position is off center.
Also, if VerticalOptions is End, it will not be displayed to fit in the Popup's Parent.

Next, layout as follows.

<toolkit:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    x:Class="MauiComm_VerifyPopupStyle.Popup1" 
    Size="100, 100" 
    VerticalOptions="Center"
    HorizontalOptions="End"
    CanBeDismissedByTappingOutsideOfPopup="False">

    <Grid WidthRequest="100" HeightRequest="100">
        <Grid WidthRequest="10" HeightRequest="10" VerticalOptions="Start" HorizontalOptions="Start" BackgroundColor="Blue" />
        <Grid WidthRequest="10" HeightRequest="10" VerticalOptions="Start" HorizontalOptions="End" BackgroundColor="Blue" />
        <Grid WidthRequest="10" HeightRequest="10" VerticalOptions="End" HorizontalOptions="Start" BackgroundColor="Blue" />
        <Grid WidthRequest="10" HeightRequest="10" VerticalOptions="End" HorizontalOptions="End" BackgroundColor="Blue" />
    </Grid>
</toolkit:Popup>

The following are the execution results before and after resizing the Window that displays the Popup.

[Before Resize] [After Resize]

The position of the Popup is not changed according to the resizing of the Window that displays the Popup.

Expected Behavior

I expected the following.

  1. I expected the Popup's Content Size to be limited to the Size specified in the Popup's Size property.
  2. If I specified Center for the Popup's VerticalOptions, I expected the Popup to appear in the center of the Window it was displayed from.
  3. If I specified End for the Popup's VerticalOptions, I would have expected the Popup to appear so that it fits at the bottom of the Window that displays it.
  4. If I change the Size of the Window that displays the Popup, I expected the Popup's position to update as the Window that displays the Popup resizes.

Steps To Reproduce

The steps to reproduce are as follows.
For the source code downloaded from github, be sure to refer to the latest main project of CommunityToolkit.

[Case1]

  1. Launch apps uploaded to GitHub on Windows
  2. Set HorizontalOptions to Start, VerticalOptions to Center
  3. Press Show Popup1 button

In step 3, the content of the Popup is displayed beyond the size specified in the Size property of the Popup.

[Case2]

  1. Launch apps uploaded to GitHub on Windows
  2. Set HorizontalOptions to Start, VerticalOptions to Center
  3. Press Show Popup2 button

In step 3, the Popup will be displayed off the center of the Window where the Popup is displayed.

[Case3]

  1. Launch apps uploaded to GitHub on Windows
  2. Set HorizontalOptions to Start, VerticalOptions to End
  3. Press Show Popup2 button

In step 3, the Popup is displayed beyond the display range of the Window that is the Popup's display source.

[Case 4]

  1. Launch apps uploaded to GitHub on Windows
  2. Set HorizontalOptions to End, VerticalOptions to Center
  3. Press Show Popup3 button
  4. Resize window

In step 4., the position of the Popup does not change according to the resizing of the Window that displays the Popup.

Link to public reproduction project repository

https://github.com/cat0363/MauiComm-IssuePopupWindows.git

Environment

- .NET MAUI CommunityToolkit: Latest version of main at the time this issue was posted
- OS: Windows 11
- .NET MAUI: 7.0.92

Anything else?

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingunverified

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions