WPF - 触发更改多个按钮对象的前景和背景答案

【问题标题】：WPF - Trigger to change Foreground and Background of multiple Button's objectWPF - 触发更改多个按钮对象的前景和背景
【发布时间】：2016-03-15 05:01:22
【问题描述】：

我正在尝试通过 TextBlock 和 Buttons 内的 Panel 执行 RoutedEvent 来激活 ColorAnimation。我的目标是在使用 MouseEnter 和 MouseLeave RoutedEvents 时更改 TextBlock 的前景和面板的背景。

下面的代码实际上是有效的。但它仅在鼠标光标位于这两个对象之一上时才有效（这是有道理的）。

当鼠标悬停在 Button 上时（特别是如果它不在 Panel 或TextBlock)

这是一个按钮看起来像正常的例子：

这是我聚焦Panel时按钮的样子：

这是Button在我集中注意力时的样子（按钮背景与面板的背景和文本块的前景颜色相同）

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

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

编辑 1 我测试了 Ahmad 的代码，它部分工作。当我的光标在 Button 上时，DataTrigger 起作用。但是当我离开它时（IsMouseOver = false）Path Fill 和 TextBlock Foreground 并没有变回来： OBS：我必须添加 DataTrigger.EnterActions 以避免出现以下错误消息：

“BeginStoryBoard”类型的值不能添加到集合中，或者 'SetterBaseCollection' 类型的字典。

<UserControl.Resources>
    <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>
            <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Button},Path=IsMouseOver}" Value="False">
                <DataTrigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)" To="Gray" Duration="0:0:1"/>
                        </Storyboard>
                    </BeginStoryboard>
                </DataTrigger.EnterActions>
            </DataTrigger>
        </Style.Triggers>
    </Style>
    <Style x:Key="TextBlock" TargetType="TextBlock">
        <Style.Triggers>
            <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Button},Path=IsMouseOver}" Value="True">
                <DataTrigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" To="White" Duration="0:0:1"/>
                        </Storyboard>
                    </BeginStoryboard>
                </DataTrigger.EnterActions>
            </DataTrigger>
            <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Button},Path=IsMouseOver}" Value="False">
                <DataTrigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" To="Gray" Duration="0:0:1"/>
                        </Storyboard>
                    </BeginStoryboard>
                </DataTrigger.EnterActions>
            </DataTrigger>
        </Style.Triggers>
    </Style>
</UserControl.Resources>

【问题讨论】：

标签： wpf xaml button storyboard eventtrigger

【解决方案1】：

添加一个绑定到文本/面板 UI 元素祖先的 DataTrigger，而不是 EventTrigger

<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 上方时，它将触发文本/面板情节提要。

【讨论】：

你好艾哈迈德！谢谢你的回答
我编辑了我的帖子以与 Ahmad 的建议分享代码结果，但它没有按我的预期工作。

【解决方案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>

【讨论】：