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

More issues with CollectionView IsEnabled, InputTransparent, Opacity via Styles and code behind #19771

Open
beeradmoore opened this issue Jan 9, 2024 · 1 comment
Labels
area-controls-collectionview CollectionView, CarouselView, IndicatorView area-xaml XAML, CSS, Triggers, Behaviors platform/android 🤖 platform/iOS 🍎 t/bug Something isn't working
Milestone

Comments

@beeradmoore
Copy link
Contributor

beeradmoore commented Jan 9, 2024

Description

Based on my other bug #19768 (which may be related) I tried to make a workaround to change InputTransparent and Opacity to "fake" IsEnabled=false, I immediately ran into more issues.

After making this test I found inconsistent results of how a CollectionView performs based on if I set IsEnabled, InputTransparent and Opacity via xaml styles or via code.

The linked example works like so:
Top left - Binds IsEnabled="{Binding IsCollectionViewEnabled}"
Top right - Binds IsEnabled="{Binding IsCollectionViewEnabled}" but also has the AutoInputTransparent style.
Bottom left - In the backing code (not via binding) it sets IsEnabled to true/false depending on the button pushed.
Bottom right - n the backing code (not via binding) it sets Opacity and InputTransparent to 0.5/true and 1.0/false depending on the depending on the button pushed.

In a perfect world if you hit the top row in every CollectionView you will see it select. If you hit the IsEnabled=False button then every CollectionView should go into a disabled like state. Clicking a different item in the CollectionView should not select it. Clicking the IsEnabled=True button should now re-enable every CollectionView and allow you to select another item in the CollectionView.

What actually happens is on clicking IsEnabled=False button

  • top left and bottom left CollectionViews go into a disabled looking state (text colour changes) but clicking another row will select it (reminder: these are the two that use IsEnabled explicitly in the binding or in the code behind.
  • top right and bottom right CollectionViews go into a disabled looking state and can not be interacted with any further (reminder: these are the two that use Opacity and InputTransparent to fake being disabled).

When re-enabling the CollectionViews with the IsEnabled=True button

  • top left and bottom left text color changes back to an enabled state.
  • top right can no longer be interacted with (almost like InputTransparent didn't toggle back)
  • bottom right goes back to a fully enabled state.

Summary: Bottom right CollectionView is the only one that works as expected.

EDIT: If the following is added to the MainPageModel.cs

[ObservableProperty]
bool isInputTransparent = false;

[ObservableProperty]
double opacity = 1.0;

changing the binding of the top right CollectionView to use InputTransparent="{Binding IsInputTransparent}" Opacity="{Binding Opacity}" and not use IsEnabled or Style it will behave the same as the CollectionView in the bottom right.

My take-away with that is that using a Style does not make it behave odd, however using IsEnabled + InputTransparent(style) + Opacity(style) is causing some bugs to happen.

EDIT 2:
Adding the following VisualStates to the top right collection view (removing any style, keeping IsEnabled binding)

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="CommonStates">
        <VisualState x:Name="Normal">
            <VisualState.Setters>
                <Setter Property="Opacity" Value="1.0" />
                <Setter Property="InputTransparent" Value="false" />
            </VisualState.Setters>
        </VisualState>
        <VisualState x:Name="Disabled">
            <VisualState.Setters>
                <Setter Property="Opacity" Value="0.5" />
                <Setter Property="InputTransparent" Value="true" />
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

it seems to perform the same as the bottom right CollectionView. To me this seems to indicate using a Style or using a VisualState is behaving differently even though the properties being set are identical. I don't know why these would differ, some race condition maybe?

Steps to Reproduce

  1. Create MAUI application
  2. Add CollectionView
  3. Try disable it with IsEnabled=false or InputTransparent=true+Opacity=0.5

Link to public reproduction project repository

https://github.com/beeradmoore/maui-issue-CollectionViewInputTransparentTest

Version with bug

8.0.3

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

iOS, Android, macOS

Affected platform versions

iOS 17.2.1, macOS 14.2.1, Android 13

Did you find any workaround?

No

Relevant log output

No response

@beeradmoore beeradmoore added the t/bug Something isn't working label Jan 9, 2024
@beeradmoore beeradmoore changed the title CollectionView InputTransparent from style causes issues More issues with CollectionView IsEnabled, InputTransparent, Opacity via Styles and code behind Jan 9, 2024
@jsuarezruiz jsuarezruiz added area-xaml XAML, CSS, Triggers, Behaviors area-controls-collectionview CollectionView, CarouselView, IndicatorView labels Jan 9, 2024
@PureWeen PureWeen added this to the Backlog milestone Jan 9, 2024
@ghost
Copy link

ghost commented Jan 9, 2024

We've added this issue to our backlog, and we will work to address it as time and resources allow. If you have any additional information or questions about this issue, please leave a comment. For additional info about issue management, please read our Triage Process.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area-controls-collectionview CollectionView, CarouselView, IndicatorView area-xaml XAML, CSS, Triggers, Behaviors platform/android 🤖 platform/iOS 🍎 t/bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants