看看下面的XAML。
当我用鼠标悬停在它上面时,我希望«HelloText»TextBlock“发光”(因此故事板而不是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时它将不起作用。
答案 0 :(得分:9)
当我将鼠标悬停在它上面时,我希望«HelloText»TextBlock“发光” 鼠标
听起来您希望为Style
提供TextBlock
而不是StackPanel
:
<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>
当我用鼠标悬停在它上面时(因此故事板而不是 触发IsMouseOver)。
请注意,设置IsMouseOver
和EnterActions
后,ExitActions
可以达到同样的效果:
<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>
希望这有帮助!