Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
2 tasks done
cat0363 opened this issue Aug 17, 2023 · 1 comment · Fixed by #1350
Closed
2 tasks done

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

cat0363 opened this issue Aug 17, 2023 · 1 comment · Fixed by #1350
Labels
bug Something isn't working unverified

Comments

@cat0363
Copy link
Contributor

cat0363 commented 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

@cat0363 cat0363 added bug Something isn't working unverified labels Aug 17, 2023
@cat0363
Copy link
Contributor Author

cat0363 commented Aug 17, 2023

Could you entrust this matter to me?
I can create a PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working unverified
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant