WPF切换按钮悬停动画问题

时间:2019-06-12 04:25:17

标签: c# wpf xaml

在WPF应用程序中,我创建了3种不同的自定义切换按钮样式。我想在按钮悬停时添加彩色动画,因此使用事件触发器和彩色动画情节提要板,这就是我所做的;
顺便说一句,每种切换按钮样式都有一个图像。

切换按钮样式

<Style x:Key="ExeatKey" TargetType="ToggleButton">
            <Setter Property="Foreground" Value="#B2B2B2"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Margin" Value="0 0 0 0"/>
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Grid Margin="0 0 0 0" VerticalAlignment="Center" HorizontalAlignment="Center">
                            <Image Margin="0 10 0 30">

                                <!--Image Change Colour Trigger-->
                                <Image.Style>
                                    <Style TargetType="{x:Type Image}">
                                        <Style.Triggers>
                                            <DataTrigger Binding="{Binding ElementName=takeExeatBtn, Path=IsChecked}" Value="True">
                                                <Setter Property="Source" Value="/Images/Others/Button Icons/ex_blu.png"/>
                                            </DataTrigger>
                                            <DataTrigger Binding="{Binding ElementName=takeExeatBtn, Path=IsChecked}" Value="False">
                                                <Setter Property="Source" Value="/Images/Others/Button Icons/ex_gray.png"/>
                                            </DataTrigger>
                                        </Style.Triggers>
                                    </Style>
                                </Image.Style>

                            </Image>
                            <TextBlock Text="Take An Exeat" TextAlignment="Center" FontSize="20" Margin="0 58 0 0" FontWeight="SemiBold"/>
                        </Grid>
                    </DataTemplate>
                </Setter.Value>
            </Setter>

            <Style.Triggers>
                <EventTrigger RoutedEvent="MouseEnter">
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation To="#BCD0E8" Duration="0:0:0.5" Storyboard.TargetProperty="Background.Color"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger RoutedEvent="MouseLeave">
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation To="Transparent" Duration="0:0:0.5" Storyboard.TargetProperty="Background.Color"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Cursor" Value="Hand"/>
                </Trigger>
                <Trigger Property="IsPressed" Value="True">
                    <Setter Property="Cursor" Value="Hand"/>
                    <Setter Property="Background" Value="#BCD0E8"/>
                    <Setter Property="Foreground" Value="#5050EA"/>
                </Trigger>
                <Trigger Property="IsChecked" Value="True">
                    <Setter Property="Cursor" Value="Arrow"/>
                    <Setter Property="Background" Value="#BCD0E8"/>
                    <Setter Property="Foreground" Value="#7878FF"/>
                </Trigger>
            </Style.Triggers>
        </Style>

现在自然而然地,我认为这可以工作,但是每当鼠标进入时它都不会动画,只有MouseLeave可以工作。
我在代码中错过了什么?

0 个答案:

没有答案