WPF-触发以更改多个Button对象的前景和背景 [英] WPF - Trigger to change Foreground and Background of multiple Button's object

问题描述

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

I am trying to do a RoutedEvent to activate ColorAnimation over a TextBlock and a Panel inside Buttons. My goal is to change the TextBlock's Foreground and the Panel's Background when using the MouseEnter and MouseLeave RoutedEvents.

以下代码实际上是有效的.但是，仅当鼠标光标位于这两个对象之一上时才起作用(这很有意义).

The below code is actually working. But it works only when the mouse cursor is over one of these two objects (which makes sense).

当鼠标悬停在按钮上(特别是不在Panel或鼠标悬停在Panel上)时，我无法确定如何激活这两个 ColorAnimations . TextBlock)

I can't figure what should I do to activate both ColorAnimations when the mouse is over the Button (specially if it is not over the Panel or the TextBlock)

以下是该按钮外观正常的示例:

Here is an example of how the button looks like normal:

这是我聚焦Panel时按钮的外观:

This is how the button looks like when I focus the Panel:

这是Button当我集中注意力时的样子(Button背景的颜色与面板的背景和TextBlock的前景相同)

This is how the Button looks like when I focus himself (the Button background has the same color as the Panel's Background and the TextBlock's Foreground)

这就是当鼠标悬停在按钮上时按钮的外观

And this is how the button should looks like when the mouse is over the 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 我测试了艾哈迈德的代码，并且部分起作用.当我的光标位于Button上时， DataTrigger 起作用.但是当我离开它时(IsMouseOver = false)，Path 填充和TextBlock 前景并没有变回原来的样子: OBS:我必须添加 DataTrigger.EnterActions 以避免出现以下错误消息:

EDIT 1 I tested Ahmad's code, and it worked partially. When my cursor is over the Button, the DataTrigger works. But when I leave it (IsMouseOver = false) the Path Fill and the TextBlock Foreground are not changing back: OBS: I had to add DataTrigger.EnterActions to avoid the following error message:

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

A value of type 'BeginStoryBoard' cannot be added to a collection or dictionary of type '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>

推荐答案

使用Ahmad的初始代码，我做了一些研究，发现了 EnterActions 和 ExitActions 属性.使用单个 DataTrigger ，我可以在IsMouseOver为 True

With Ahmad initial code, I did some research and I found the EnterActions and ExitActions properties. With a single DataTrigger, I can define my animations when the IsMouseOver is 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对象的前景和背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！