Hover property on MAUI button like in CSS

Question

Hover property on MAUI button like in CSS

Dani_S 4,501

HI,
How I used Hover property on MAUI button like in CSS ?
Thanks in advance ,

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Reputation points Microsoft External Staff

2022-10-19T06:31:53.447+00:00

Hi @Dani_S , there is no Hover on a touch device. Could you provide more details on which platform you would like to implement this functionality?
As noted in the Q&A FAQ: How to write a quality question
Mark Redman 0 Reputation points

2023-11-30T18:20:47.11+00:00

MAUI is also for desktop so it should have mouse hover events
Rob Caplan - MSFT 6,032 Reputation points Microsoft Employee Moderator

2023-11-30T22:47:56.3133333+00:00

Hi @Mark Redman , you're responding to a thread from two .Net Maui versions ago. You can implement hover behavior with the PointerOver state in current versions of Maui (starting with .Net 7 - it was already implemented and available in previews when this thread was opened). The terminology is different from CSS, but the overall functionality is available.

Also please note that Q&A is not a bug tracking or feature request site. To report bugs or request features please post in the Maui GitHub repo at https://github.com/dotnet/maui .
Dani_S 4,501 Reputation points

2023-12-05T06:25:12.4766667+00:00

You can use this solution :

https://learn.microsoft.com/en-us/answers/questions/1195551/maui-hover-button-i-see-hand-like-in-css

Accepted answer

0 additional answers

Your answer

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Reputation points Microsoft External Staff

2022-10-19T06:31:53.447+00:00

Hi @Dani_S , there is no Hover on a touch device. Could you provide more details on which platform you would like to implement this functionality?
As noted in the Q&A FAQ: How to write a quality question
Mark Redman 0 Reputation points

2023-11-30T18:20:47.11+00:00

MAUI is also for desktop so it should have mouse hover events
Rob Caplan - MSFT 6,032 Reputation points Microsoft Employee Moderator

2023-11-30T22:47:56.3133333+00:00

Hi @Mark Redman , you're responding to a thread from two .Net Maui versions ago. You can implement hover behavior with the PointerOver state in current versions of Maui (starting with .Net 7 - it was already implemented and available in previews when this thread was opened). The terminology is different from CSS, but the overall functionality is available.

Also please note that Q&A is not a bug tracking or feature request site. To report bugs or request features please post in the Maui GitHub repo at https://github.com/dotnet/maui .
Dani_S 4,501 Reputation points

2023-12-05T06:25:12.4766667+00:00

You can use this solution :

https://learn.microsoft.com/en-us/answers/questions/1195551/maui-hover-button-i-see-hand-like-in-css

Answer 1

Sreeju Nair 12,661

In MAUI, Button has a Pressed VisualState that can be used to initiate a visual change to the Button when pressed, provided that it's enabled. See the details below.

https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/button#button-visual-states

Hope this helps

Dani_S 4,501 Reputation points

2022-10-19T10:33:49.35+00:00

@Sreeju Nair It affect all buttons in app, how I make this only on menu buutons?

Sreeju Nair 12,661

You can define the visual state per buttons. See the following sample that apply Visual State only to one button. Make sure you specify the visual state for the button inside the button tag.

   <Button Text="Click me 1!">  
                <VisualStateManager.VisualStateGroups>  
                    <VisualStateGroupList>  
                        <VisualStateGroup x:Name="CommonStates">  
  
                            <VisualState x:Name="Focused">  
                                <VisualState.Setters>  
                                    <Setter Property="FontSize" Value="36" />  
                                </VisualState.Setters>  
                            </VisualState>  
  
                              
                        </VisualStateGroup>  
                    </VisualStateGroupList>  
                </VisualStateManager.VisualStateGroups>  
            </Button>  
            <Button Text="Click me 2">  
                  
            </Button>

Understand more about VisualState here; https://learn.microsoft.com/en-us/dotnet/maui/user-interface/visual-states

Sreeju Nair 12,661 Reputation points

2022-10-21T06:56:52.787+00:00

@Dani_S - Did you tried this? let me know the results. If the post was helpful, please mark it as answer.

Share via

Hover property on MAUI button like in CSS

0 additional answers

Your answer