UWP VisualStateManager PointerOver does not work

Question

I am mimicking the behavior of Groove Music, which displays a drop shadow effect when mouse hovers on an album cover (in my code it's the entire DataTemplate). But My VisualStateManager doesn't seem to work. Any ideas? I have implemented that programmatically but I want to use xaml to do that for practice.

---Update---

Changing Stackpanel to Grid still doesn't make things work.

    <GridView
        Grid.Row="1"
        Margin="10"
        IsItemClickEnabled="True"
        ItemsSource="{x:Bind Albums}">
        <GridView.ItemTemplate>
            <DataTemplate x:DataType="data:GridAlbumView">
                <Grid
                    Width="180"
                    Height="240"
                    Margin="10">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <controls:DropShadowPanel
                        x:Name="AlbumShadowPanel"
                        VerticalContentAlignment="Top"
                        BlurRadius="15"
                        OffsetX="4"
                        OffsetY="4"
                        ShadowOpacity="0"
                        Color="Black">
                        <Image Source="{x:Bind Cover}" />
                    </controls:DropShadowPanel>
                    <TextBlock
                        Margin="0,5,0,0"
                        Grid.Row="1"
                        FontWeight="SemiBold"
                        MaxLines="2"
                        Text="{x:Bind Name}"
                        TextAlignment="Left"
                        TextWrapping="Wrap"
                        Visibility="{x:Bind Name, Converter={StaticResource AlbumNameVisibilityConverter}}" />
                    <TextBlock
                        Grid.Row="2"
                        FontSize="12"
                        Foreground="Gray"
                        Text="{x:Bind Artist}"
                        TextAlignment="Left" />
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="PointerOver">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="AlbumShadowPanel" Storyboard.TargetProperty="ShadowOpacity">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="1" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                </Grid>
            </DataTemplate>
        </GridView.ItemTemplate>
    </GridView>

Answer 1

That's because StackPanel is not a control. Only controls support VisualStates. You could just create a transparent control that you put over top of everything (assuming you don't need to interact with something inside the control). Sorry, I know this can be confusing.

public class MyOverlayControl : Control
{
    public MyOverlayControl() : base()
    {
        Background = new SolidColorBrush(Colors.Transparent);
        HorizontalAlignment = HorizontalAlignment.Stretch;
        VerticalAlignment = VerticalAlignment.Stretch;
        PointerEntered += (s, e) => VisualStateManager.GoToState(this, nameof(PointerEntered), true);
        PointerExited += (s, e) => VisualStateManager.GoToState(this, nameof(PointerExited), true);
    }
}