我正在模仿Groove Music的行为,当鼠标悬停在专辑封面上时,它会显示投影效果(在我的代码中,它是整个DataTemplate(。但是我的 VisualStateManager 似乎不起作用。有什么想法吗?我已经以编程方式实现了它,但我想使用 xaml 来练习。
---更新---
将Stackpanel更改为Grid仍然无法使事情正常工作。
<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不是一个控件。只有控件支持视觉状态。您可以创建一个透明控件,将其置于所有控件之上(假设您不需要与控件中的某些内容进行交互(。对不起,我知道这可能会令人困惑。
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);
}
}