问题
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>
回答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);
}
}
来源:https://stackoverflow.com/questions/57478990/uwp-visualstatemanager-pointerover-does-not-work