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

编辑:

我读过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>

希望这可以帮助!