[SOLVED] Visualize press the button action and hovering over it in MAUI.NET MVVM

Visualize press the button action and hovering over it in MAUI.NET MVVM

I use MAUI.NET with MVVM architecture. Because of this I do not want to manage things through an events.

I want to visualize two moments:

when the user hover over the button
when the user click on the button

After these moments I want to button looks normal as nothing happened.

I just found a way to manage second moment (after the button is pressed).

What I managed to do is to set VisualState in a global ResourceDirectory for a buttons, like this:

    <Style TargetType="Button" x:Key="HideButtonStyle">
        <Setter Property="VisualStateManager.VisualStateGroups">
            <VisualStateGroupList>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal">
                        <VisualState.Setters>
                            <Setter Property="BackgroundColor" Value="{StaticResource MediumDarkColor}" />
                            <Setter Property="Scale" Value="1" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Pressed">
                        <VisualState.Setters>
                            <Setter Property="BackgroundColor" Value="{StaticResource HideColor}" />
                            <Setter Property="Scale" Value="1.07" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateGroupList>
        </Setter>
    </Style>

I tried other state like "Focused".

And the buttons seems to be normal button:

                    <Button Grid.Row="2" Style="{StaticResource HideButtonStyle}" Text="123" Command="{Binding GetSourceFilePathCommand}"/>

The problem is that some buttons backs to the "normal state" immediately and some not. When the user click on something else it backs to normal, finally.

I have investigated if this is not due to async in Command, but is not. It seems that the buttons that come back to normal state (proper in my opinion) are the buttons that fires the dialog.

I would like to that after user press the button, it got a colour etc. for a 2-3 seconds and backs automatically to normal state.

It would be fantastic if I could signalize that user hover over the button with let's say scaling it, and signalize when the user press the button with a colouring it for a moment.

Solution

There is currently no IsMouseOver detection mouseover event in maui, you can continue to pay attention to this GitHub proposal.

For clicking button to change color you can use Trigger, refer to the following code:

  <Button Text="Click Me">
        <Button.Triggers>
            <Trigger TargetType="Button"
                     Property="IsFocused" Value="True">
                <Setter Property="BackgroundColor" Value="Pink"/>
            </Trigger>
        </Button.Triggers>
    </Button>

You also change the property to Scale to implement click-to-zoom functionality.