maui

maui copied to clipboard

Description

I have found a problem related to visual states on buttons and the navigation between views.

I have developed a small project with two views. One view has a button that navigates to the other view. And the other view also contains another button that navigates back to the previous view.

I use MAUI's own navigation (Navigation.PushModalAsync method to be exact) and not the one provided by Shell. I use modal navigation because that is what I need for my project.

The problem is with the Pressed state of a button because it does not reset to the Normal state when you go back to the previous view.

I have styled the PointerOver visual state with a yellow background and an opacity of 0.8. And to the Pressed visual state I have applied a cyan background colour and an opacity of 0.5.

Video of the error:

https://github.com/dotnet/maui/assets/137196565/fe892050-43a1-41f6-804a-6eaddf300a1b

Steps to Reproduce

1. Create a new MAUI project.
2. Change the creation of the MainPage as NavigationPage on App.xaml.cs (If it is created as AppShell).
3. Create a new view.
4. Register MainPage view and the new view in MauiProgram.cs.
5. Create a button in MainPage that navigates to the new view using the method PushModalAsync.
6. Create another button in the new view that navigates back to the MainPage using the method PopModalAsync.
7. Add visual states to buttons (Pressed and PointerOver visual states).
8. Apply some styles to the visual states of the buttons.
9. Launch the application and test it.

Link to public reproduction project repository

Link to the repository

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

Windows

Did you find any workaround?

I couldn't find anything.

Hi -

Not sure if this helps, but I had pretty much same issue coming up in Android after migrating from .NET7 to .NET8 (visual state would not change back from pressed state).

The workaround for me was to move the original handling code call so it calls the navigation action on UI Thread (from the attached ICommand to the button) : ie.

MainThread.BeginInvokeOnMainThread(async () => { /// move your handling code inside here (including navigation etc). }

I think this then allows the pressed action to complete (and return visual state) without it being blocked.

cheers Niall

Verified this on Visual Studio Enterprise 17.9.0 Preview 2(8.0.3). Repro on Windows 11 with below Project: MADSENSE.MAUI.Sample.App-visual-state-no-reset.zip

Android 14.0-API34 and iOS 17.0 : Presssed works fine, but PointerOver does not work.

The issue reproduces on Android as well in .NET 8 with the following snippet from the docs:

<StackLayout>
    <Label Text="What is the capital of France?" />
    <Entry x:Name="entry"
           Placeholder="Enter answer" />
    <Button Text="Reveal answer">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal" />
                <VisualState x:Name="Pressed">
                    <VisualState.Setters>
                        <Setter Property="Scale"
                                Value="0.8" />
                        <Setter TargetName="entry"
                                Property="Entry.Text"
                                Value="Paris" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Button>
</StackLayout>

The problem also appears with Shell.Current.GoToAsync() method, as the visual state of buttons will not go back to "normal" and navigation will loss animation on windows platform regardless of setting parameter "animate" to true or using Shell.PresentationMode="Animated". I tried to workaround with Button.SendReleased(), but still cannot get animation back.