UWP VisualStateManager PointerOver 不起作用 [英] UWP VisualStateManager PointerOver does not work

问题描述

我正在模仿 Groove Music 的行为，当鼠标悬停在专辑封面上时，它会显示阴影效果(在我的代码中，它是整个 DataTemplate).但是我的 VisualStateManager 似乎不起作用.有任何想法吗?我已经以编程方式实现了这一点，但我想使用 xaml 来进行练习.

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.

---更新---

将 Stackpanel 更改为 Grid 仍然不起作用.

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>

推荐答案

那是因为 StackPanel 不是控件.只有控件支持 VisualStates.您可以创建一个透明控件，将其置于所有内容之上(假设您不需要与控件内的某些内容进行交互).抱歉，我知道这可能会令人困惑.

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);
    }
}

这篇关于UWP VisualStateManager PointerOver 不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！