Question

Have a look at the XAML below.

I want the «HelloText» TextBlock to “glow” when I hover over it with the mouse (thus the storyboard instead of a trigger on IsMouseOver). The code below doesn’t work since two TextBlocks have the same name. How can I edit this code so that I can apply «MyStackPanelStyle» to more than one 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>

Edit:

I’ve read an article by Sergio Loscialo which lookded promising. Unfortunately, this solution applies to all target elements that inherit from AnimationPlaceholder, which means that it won’t work when I’ve more than one of these StackPanels on my page.

Answer 1

I want the «HelloText» TextBlock to “glow” when I hover over it with
the mouse

Sounds likes you want to be providing a Style for the TextBlock and not the 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>

when I hover over it with the mouse (thus the storyboard instead of a
trigger on IsMouseOver).

Please note the same effect can be achieved with IsMouseOver by setting the EnterActions and 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>

The above answer assumes you don’t have a requirement which relates the TextBlock to your StackPanel (e.g. always animate the first TextBlock in the StackPanel, or always animate a TextBlock with a certain name). If this was the case, relying on the Name would be brittle and you would be better off creating a custom control or user control with a property or named part for the special content.

Edit:

To start the animations when the mouse enters the StackPanel you could just adapt the above solution to use a DataTrigger instead:

<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>

Hope this helps!