dotnet / maui

.NET MAUI is the .NET Multi-platform App UI, a framework for building native device applications spanning mobile, tablet, and desktop.
https://dot.net/maui
MIT License
21.99k stars 1.72k forks source link

The visual state "Pressed" is not reset to "Normal" when navigate and go back in Windows. #18958

Open Victor-Porter opened 9 months ago

Victor-Porter commented 9 months ago

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.

mobilewares commented 9 months ago

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

XamlTest commented 8 months ago

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. AndroidReset

cosminstirbu commented 8 months ago

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>
OliveInto commented 1 month ago

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.