Question

我正在尝试 RoutedEvent 来激活TextBlock和Panel Buttons内的{strong> ColorAnimation 。我的目标是在使用 MouseEnter 和 MouseLeave RoutedEvents时更改TextBlock的前景和Panel的背景。

以下代码实际上正在运行。但它只有在鼠标光标位于这两个对象中的一个上时才有效（这是有意义的）。

当鼠标悬停在按钮上时，我无法确定如何激活 ColorAnimations （特别是如果它不在{{1}之上}或Panel）

以下是按钮看起来如下的示例：



当我关注TextBlock：
时，这就是按钮的样子


当我专注于自己时，这就是Panel的样子（Button背景颜色与Panel＆＃39;背景和TextBlock＆＃39; s前景相同）



当鼠标悬停在按钮上时，这就是按钮的样子

Button

编辑1 我测试了艾哈迈德的代码，它的工作部分。当我的光标位于<UserControl.Resources> <Style x:Key="Path" TargetType="Path"> <Style.Triggers> <EventTrigger RoutedEvent="MouseEnter"> <BeginStoryboard> <Storyboard> <ColorAnimation Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)" To="White" Duration="0:0:1"/> </Storyboard> </BeginStoryboard> </EventTrigger> <EventTrigger RoutedEvent="MouseLeave"> <BeginStoryboard> <Storyboard> <ColorAnimation Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)" To="Gray" Duration="0:0:1"/> </Storyboard> </BeginStoryboard> </EventTrigger> </Style.Triggers> </Style> <Style x:Key="TextBlock" TargetType="TextBlock"> <Style.Triggers> <EventTrigger RoutedEvent="MouseEnter"> <BeginStoryboard> <Storyboard> <ColorAnimation Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" To="White" Duration="0:0:1"/> </Storyboard> </BeginStoryboard> </EventTrigger> <EventTrigger RoutedEvent="MouseLeave"> <BeginStoryboard> <Storyboard> <ColorAnimation Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" To="Gray" Duration="0:0:1"/> </Storyboard> </BeginStoryboard> </EventTrigger> </Style.Triggers> </Style> </UserControl.Resources> <Button Name="btnTest" BorderThickness="0" Width="200" Height="200" Margin="5,5,0,0" VerticalAlignment="Top" > <Button.Triggers> <EventTrigger RoutedEvent="MouseEnter"> <BeginStoryboard> <Storyboard> <ColorAnimation Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)" To="Gray"/> </Storyboard> </BeginStoryboard> </EventTrigger> </Button.Triggers> <StackPanel> <Path Style="{StaticResource Path}" Fill="Gray" Stretch="Fill" Width="98.851" Height="94.776" Data="M819.2,0H204.8C92,0,0,92.2,0,204.8v614.4C0,931.8,92,1024,204.8,1024h614.4c112.6,0,204.8-92.2,204.8-204.8V204.8 C1024,92.2,931.8,0,819.2,0z M879,337.8l-15.8,93L774.6,463.6L702,403.4l15.8-93.2l88.4-33L879,337.8z M786.2,594.8 c-61.601,22.8-129,7-180-35.399L217.8,831.2L128,702.8L528,423c-16.8-95.2,28.6-188.4,112.8-219.6c56.2-20.8,117.2-9.6,166.2,25 l-136,50.4L646.6,424L760,518l136-50.4C881.2,525.6,842.4,574,786.2,594.8z" /> <TextBlock Style="{StaticResource TextBlock}" Margin="0,20,0,0" FontSize="15" FontWeight="Bold" Foreground="Gray" HorizontalAlignment="Center"> TEST </TextBlock> </StackPanel> </Button>上方时， DataTrigger 会起作用。但是当我离开它时（IsMouseOver = false）Button 填充而Path 前景不会改变： OBS：我必须添加 DataTrigger.EnterActions 以避免以下错误消息：

类型＆＃39; BeginStoryBoard＆＃39;无法添加到集合或字典类型＆＃39; SetterBaseCollection＆＃39;。

TextBlock

Answer 1

而不是EventTrigger添加一个绑定到Text / Panel UI元素祖先的DataTrigger

<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Button},Path=IsMouseOver}" Value="True">
    <BeginStoryboard>
         <Storyboard>
              <ColorAnimation Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)" To="Gray" Duration="0:0:1"/>
         </Storyboard>
     </BeginStoryboard>
</DataTrigger>

other triggers for IsMouseOver being false ...

您可以为Panel或TextBlock执行此操作，只需从按钮中删除触发器，当鼠标位于Button上方时，它将触发，并触发文本/面板故事板。

Answer 2

使用Ahmad初始代码，我做了一些研究，然后找到了 EnterActions 和 ExitActions 属性。使用单个 DataTrigger ，我可以在IsMouseOver为 True 时定义动画

<Style x:Key="Path" TargetType="Path">
    <Style.Triggers>
        <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Button},Path=IsMouseOver}" Value="True">
            <DataTrigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimation Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)" To="White" Duration="0:0:1"/>
                    </Storyboard>
                </BeginStoryboard>
            </DataTrigger.EnterActions>
            <DataTrigger.ExitActions>
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimation Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)" To="Gray" Duration="0:0:1"/>
                    </Storyboard>
                </BeginStoryboard>
            </DataTrigger.ExitActions>
        </DataTrigger>
    </Style.Triggers>
</Style>

WPF - 触发更改多个Button对象的前景和背景

2 个答案: