[WinUI3] VisualStateManager "PonterOver" not working on StackPanel

Question

Hi,

I want to make a mouse hover effect on a StackPanel but didn't manage to make it work using VisualStateManager, here is the code

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="CommonStates">
        <VisualState x:Name="Normal">
            <Storyboard>
                <DoubleAnimation 
                    Storyboard.TargetName="RecordControlPanel" 
                    Storyboard.TargetProperty="Opacity" 
                    To="0.8" 
                    Duration="0:0:0.15" 
                />
            </Storyboard>
        </VisualState>
        <VisualState x:Name="PointerOver">
            <Storyboard>
                <DoubleAnimation 
                    Storyboard.TargetName="RecordControlPanel" 
                    Storyboard.TargetProperty="Opacity" 
                    To="1.0" 
                    Duration="0:0:0.15" 
                />
            </Storyboard>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

And the StackPanel

<StackPanel 
    x:Name="RecordControlPanel"
    Background="{ThemeResource Background}" 
    CornerRadius="15" Padding="15" 
    VerticalAlignment="Center" 
    Opacity="0.8"
>

Nothing is happening when the pointer is over the "RecordControlPanel".

Answer 1

Hi @Jonathan SERRA ,

Welcome to Microsoft Q&A!

StackPanel is not a Control subclass, only controls support VisualStates. I checked your code and the VisualStateManager doesn't seem to be inside a Control subclass.

It is recommended to modify the opacity of StackPanel from codebehind through PointerMoved and PointerExited events.

 <StackPanel 
     x:Name="RecordControlPanel"
     Background="HotPink" 
     CornerRadius="15" Padding="15" 
     VerticalAlignment="Center" 
     PointerMoved="RecordControlPanel_PointerMoved"
     PointerExited="RecordControlPanel_PointerExited"
     Opacity="0.5"/>

private void RecordControlPanel_PointerMoved(object sender, PointerRoutedEventArgs e)
{
    RecordControlPanel.Opacity = 1.0;
}

private void RecordControlPanel_PointerExited(object sender, PointerRoutedEventArgs e)
{
    RecordControlPanel.Opacity = 0.8; 
} 

Thank you.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.