I am making an app with some buttons and I added some visual states that target buttons. The buttons have the correct color in the "Normal" state, but when I try to hover over them and activate the "PointerOver" state, they do not change color like they are supposed to. I have looked over the dotnet gitub on the visual states and I am sure I am coding it properly for what I can see. Any insight on this issue would be great.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="New.BBM.HMI.MAUI.Pages.Home"
             Title="Home"
             Shell.NavBarIsVisible="False">
    <ContentPage.Resources>
        <Style x:Key="navButtons"
            TargetType="Button">
            <Setter Property="TextColor" Value="Black"/>
            <Setter Property="FontFamily" Value="BankGothicMedBT"/>
            <Setter Property="HeightRequest" Value="70"/>
            <Setter Property="FontSize" Value="Small"/>
            <Setter Property="BorderColor" Value="Black"/>
            <Setter Property="VisualStateManager.VisualStateGroups">
                <VisualStateGroupList>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor" Value="Lime" />
                            </VisualState.Setters>
                        </VisualState>

                        <VisualState x:Name="Focused">
                            <VisualState.Setters>
                                <Setter Property="FontSize" Value="36" />
                            </VisualState.Setters>
                        </VisualState>

                        <VisualState x:Name="Disabled">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor" Value="Pink" />
                            </VisualState.Setters>
                        </VisualState>

                        <VisualState x:Name="PointerOver">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor" Value="LightBlue" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateGroupList>
            </Setter>
        </Style>
    </ContentPage.Resources>
    <Grid BackgroundColor="WhiteSmoke" RowDefinitions="20*,*" ColumnDefinitions="1.5*,15*,5*" ColumnSpacing="5">
        <!--Left side Nav bar-->
        <Grid x:Name="navBar" Margin="5,5,0,0" VerticalOptions="Start" RowSpacing="10" RowDefinitions="Auto,Auto,Auto,Auto,Auto,Auto">
            <ImageButton x:Name="imgLogo" Clicked="GoToWebsite" Source="icon.png" HeightRequest="70" />
            <Button x:Name="btnHome" Clicked="GoToHome" Text="Home" Grid.Row="1" BorderWidth="2" Style="{StaticResource navButtons}" />
            <Button x:Name="btnToolPage" Clicked="GoToToolPage" Text="Tool&#10;Page" Grid.Row="2" Style="{StaticResource navButtons}" />
            <Button x:Name="btnMessages" Clicked="GoToMessages" Text="Messages" Grid.Row="3" Style="{StaticResource navButtons}" />(https://www.stackoverflow.com/)
            <Button x:Name="btnLaser" Clicked="GoToLaser" Text="Laser" Grid.Row="4" Style="{StaticResource navButtons}" />
            <Button x:Name="btnSettings" Clicked="GoToSettings" Text="Settings" Grid.Row="5" Style="{StaticResource navButtons}" />
        </Grid>
        <!--Center Div-->
        <Grid Grid.Column="1" Grid.Row="0" BackgroundColor="Blue">
            
        </Grid>
        <!--Right side Operator Panel-->
        <Grid Grid.Column="2" BackgroundColor="Yellow">

        </Grid>
    </Grid>
</ContentPage>

Here is a short GIF of what is happening.

• I tried creating the visual state per-button.
• I then tried to do it in a style that targets all buttons.
• I then went ahead and copied/pasted the example visual states from Microsoft and the buttons are lime, but will not go light blue on hover. I did this to make sure I was not making any syntax mistakes.

CodePudding user response：

If you use Xamarin, this PointerOver feature is not included. But if you use Maui, PointerOver feature has now been incuded. You should use .NET 7.0 instead of .NET6.0. Also, the PointerGestureRecognizer could be used to detect when the mouse pointer enters, exits, and moves within a view.

I tried your code in .NET 7.0 and it worked well. So upgrade it and have a try.

For more information, you could refer to What's new in .NET MAUI for .NET 7.