在WPF中的stackpanel鼠标悬停上设置动画文本块

Question

看看下面的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时它将不起作用。

Answer 1

  

当我将鼠标悬停在它上面时，我希望«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>

希望这有帮助！