看看下面的 XAML。
我希望当我将鼠标悬停在 «HelloText» TextBlock 上时它会“发光”(因此 Storyboard而不是 IsMouseOver 上的触发器)。下面的代码不起作用,因为两个 TextBlock 具有相同的名称。如何编辑此代码以便可以将 «MyStackPanelStyle» 应用于多个 StackPanel?
<Window.Resources>
<Style TargetType="StackPanel" x:Key="MyStackPanelStyle">
<Style.Triggers>
<EventTrigger RoutedEvent="StackPanel.MouseEnter">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.5" Storeboard.TargetName="HelloText" Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)" To="LightGray" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="StackPanel.MouseLeave">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.5" Storeboard.TargetName="HelloText" Storyboard.Target="TextBlock" Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)" To="#505050" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<StackPanel style="MyStackPanelStyle">
<TextBlock Name="HelloText" Text="Hello" />
<TextBlock Text="World" />
</StackPanel>
<StackPanel style="MyStackPanelStyle">
<TextBlock Name="HelloText" Text="Hello" />
<TextBlock Text="World" />
</StackPanel>
编辑:
我读过一篇article by Sergio Loscialo这看起来很有希望。不幸的是,此解决方案适用于从 AnimationPlaceholder 继承的所有目标元素,这意味着当我的页面上有多个这些 StackPanel 时,该解决方案将不起作用。
最佳答案
I want the «HelloText» TextBlock to "glow" when I hover over it with the mouse
听起来您想为 TextBlock
而不是 StackPanel
提供 Style
:
<StackPanel>
<StackPanel.Resources>
<Style TargetType="TextBlock" x:Key="GlowingTextBlockStyle">
<Setter Property="Foreground" Value="Black" />
<Style.Triggers>
<EventTrigger RoutedEvent="UIElement.MouseEnter">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.5" Storyboard.TargetProperty="Foreground.Color" To="LightGray" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="UIElement.MouseLeave">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.5" Storyboard.TargetProperty="Foreground.Color" To="#505050" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</StackPanel.Resources>
<StackPanel>
<TextBlock Text="Hello" Style="{StaticResource GlowingTextBlockStyle}" />
<TextBlock Text="World" />
</StackPanel>
<StackPanel>
<TextBlock Text="Hello" Style="{StaticResource GlowingTextBlockStyle}" />
<TextBlock Text="World" />
</StackPanel>
</StackPanel>
when I hover over it with the mouse (thus the storyboard instead of a trigger on IsMouseOver).
请注意,通过设置 EnterActions
和 ExitActions
可以使用 IsMouseOver
实现相同的效果:
<StackPanel>
<StackPanel.Resources>
<Style TargetType="TextBlock" x:Key="GlowingTextBlockStyle">
<Setter Property="Foreground" Value="Black" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.5" Storyboard.TargetProperty="Foreground.Color" To="LightGray" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.5" Storyboard.TargetProperty="Foreground.Color" To="#505050" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
</StackPanel.Resources>
<StackPanel>
<TextBlock Text="Hello" Style="{StaticResource GlowingTextBlockStyle}" />
<TextBlock Text="World" />
</StackPanel>
<StackPanel>
<TextBlock Text="Hello" Style="{StaticResource GlowingTextBlockStyle}" />
<TextBlock Text="World" />
</StackPanel>
</StackPanel>
</StackPanel>
上述答案假设您没有将 TextBlock
与您的 StackPanel
相关联的要求(例如,始终对第一个 TextBlock
进行动画处理) StackPanel
,或者始终使用特定名称对 TextBlock
进行动画处理)。如果是这种情况,依赖 Name
将会很脆弱,您最好使用特殊内容的属性或命名部分创建自定义控件或用户控件。
编辑:
要在鼠标进入 StackPanel
时启动动画,您只需调整上述解决方案以使用 DataTrigger
即可:
<Style TargetType="TextBlock" x:Key="GlowingTextBlockStyle">
<Setter Property="Foreground" Value="Black" />
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Panel}}, Path=IsMouseOver}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.5" Storyboard.TargetProperty="Foreground.Color" To="LightGray" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.5" Storyboard.TargetProperty="Foreground.Color" To="#505050" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
希望这有帮助!
关于.net - WPF 中堆栈面板鼠标悬停上的动画文本 block ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7914629/