.net - WPF 中堆栈面板鼠标悬停上的动画文本 block

Question

看看下面的 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 时，该解决方案将不起作用。

Answer 1

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>

希望这有帮助!