[BUG] Can't apply style to popup

[cat0363]

Is there an existing issue for this?

• I have searched the existing issues

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

• 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

I understand that this is a specification of Popup and not a bug.
Raise the issue as a bug, but don't be offended.

Q&A is up in #1318, but currently Popup cannot apply styles.
Neither explicit styles, implicit styles, global styles, nor dynamic styles can be applied.

In this issue, it is not possible to define Styles in the Popup's Resources, so I will post
the verification results that global styles cannot be applied.

Define the style in App.xaml like this:

<Application 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"
    xmlns:local="clr-namespace:MauiComm_IssuePopupStyle"
    x:Class="MauiComm_IssuePopupStyle.App">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
                <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
            </ResourceDictionary.MergedDictionaries>

            <Style TargetType="toolkit:Popup">
                <Setter Property="Color" Value="Red" />
                <Setter Property="HorizontalOptions" Value="Start" />
                <Setter Property="VerticalOptions" Value="Center" />
            </Style>

        </ResourceDictionary>
    </Application.Resources>
</Application>

The layout of Popup1.xaml is shown below.

<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_IssuePopupStyle.Popup1" Size="100, 100">

    <Label Text="Popup1" TextColor="Black" />

</toolkit:Popup>

I should see a Popup with horizontal position at start, vertical position in center,
and color red, but I get a gray Popup in the center.

Android	iOS	Windows

Popup styles are not applied on any platform.

Expected Behavior

I expected the Popup's style defined as global style to be applied and displayed as shown below.

Android	iOS	Windows

Steps To Reproduce

The steps to reproduce are as follows.

1. Launch apps uploaded to GitHub on each platform
2. Press the Show Popup1 button

In step 2, no styles are applied to the Popup and the Popup appears with its default position and color.

Link to public reproduction project repository

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

Environment

- .NET MAUI CommunityToolkit: 5.3.0
- OS:iOS 16.4, Android 11.0, Windows 11
- .NET MAUI: 7.0.92

Anything else?

No response

[cat0363]

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

[bijington]

Thanks @cat0363 I have assigned this issue to you

[cat0363]

@bijington, Thank you for assigning me.

[cat0363]

@bijington, I have a question.
Resolved popup size and position issues in PR #1320, #1329 targeting Android and iOS, but not Windows.
Is it okay if I post another issue and fix two issues in one PR?
In order to verify the behavior of this issue, I need to resolve the Windows popup size and position issues.
As far as I have tested, Windows Popups have size and position issues.

[bijington]

@cat0363 yes I am fine with that so long as it isn't a huge change.

I don't know if it helps with context but we recently switched popup implementations for windows based on this PR #1086

[cat0363]

@bijington, Thank you for your reply.
I would like to combine these two issues into one PR.

Has the fix for PR #1086 been imported into the recently released 5.3.0?
The behavior at the time of release of 5.3.0 and the latest behavior of main
are different, and some results are not as expected on Windows.

[cat0363]

I'll post the Windows size and position issue tomorrow.

[VladislavAntonyuk]

No, 5.3.0 doesn’t include the new popup implementation. I suggest verifying the new behavior using our MauiSamples app before creating a new issue

[cat0363]

@VladislavAntonyuk , Thanks for letting us know that 5.3.0 does not include fix #1086.
Create an issue based on the latest behavior of main.
I plan to fix the following.

1. Make Popup follow position when resizing parent window
2. Consider the height of the title bar so that the Popup is displayed at the intended position
3. Reflects the size specified in the Popup's size property

In 5.3.0 the Popup's Size property was taken into account, but in the latest version of main,
the size of the child elements takes precedence over 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.

<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 Popup's Content Size exceeds the Size specified in the Popup's Size property.

My planned fix would be:

The Popup's vertical center position is also as intended.

It's bigger than I originally thought, so I'm splitting it into two PRs.