圣诞树动画

Question

Arasfon

Asked:2020-09-01 01:42:26 +0000 UTC2020-09-01 01:42:26 +0000 UTC 2020-09-01 01:42:26 +0000 UTC

将 IsEnabled 设置为 false 后阻止 MouseLeave 按钮上的动画

772

我有一个我自己风格的按钮：

<ControlTemplate x:Key="Button_Standard" TargetType="{x:Type Button}">
    <ControlTemplate.Resources>

        <Storyboard x:Key="Mouse_Enter">
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="border">
                <EasingColorKeyFrame KeyTime="0:0:0.2" Value="#FF2CA58D"/>
            </ColorAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="border">
                <EasingColorKeyFrame KeyTime="0:0:0.2" Value="#FF397C6E"/>
            </ColorAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="Mouse_Leave">
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="border">
                <EasingColorKeyFrame KeyTime="0:0:0.2" Value="#FF2CA58D"/>
            </ColorAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="textBlock">
                <EasingColorKeyFrame KeyTime="0:0:0.2" Value="#FFFBF5F3"/>
            </ColorAnimationUsingKeyFrames>
        </Storyboard>

        <Storyboard x:Key="Mouse_LeftButton_Down">
            <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" Storyboard.TargetName="border">
                <EasingThicknessKeyFrame KeyTime="0:0:0.03" Value="2"/>
            </ThicknessAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="border">
                <EasingColorKeyFrame KeyTime="0:0:0.03" Value="#FF1C473F"/>
            </ColorAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="Mouse_LeftButton_Up">
            <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" Storyboard.TargetName="border">
                <EasingThicknessKeyFrame KeyTime="0:0:0.05" Value="0"/>
            </ThicknessAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="border">
                <EasingColorKeyFrame KeyTime="0:0:0.05" Value="#FF1C473F"/>
            </ColorAnimationUsingKeyFrames>
        </Storyboard>

    </ControlTemplate.Resources>

    <Border x:Name="border" CornerRadius="7.5" BorderBrush="Black">
        <Border.Background>
            <RadialGradientBrush>
                <GradientStop Color="#FF2CA58D" Offset="0"/>
                <GradientStop Color="#FF2CA58D" Offset="1"/>
            </RadialGradientBrush>
        </Border.Background>

        <Border.Effect>
            <DropShadowEffect/>
        </Border.Effect>

        <TextBlock x:Name="textBlock" TextWrapping="Wrap" Text="{TemplateBinding Content}" TextAlignment="Center" VerticalAlignment="Center" Foreground="White"/>
    </Border>

    <ControlTemplate.Triggers>
        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Background" TargetName="border">
                <Setter.Value>
                    <RadialGradientBrush>
                        <GradientStop Color="#FF474747" Offset="0"/>
                        <GradientStop Color="#FF474747" Offset="1"/>
                    </RadialGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="Foreground" TargetName="textBlock" Value="#FF959595"/>
        </Trigger>
        <EventTrigger RoutedEvent="UIElement.PreviewMouseLeftButtonUp">
            <BeginStoryboard x:Name="Mouse_LeftButton_Up_BeginStoryboard" Storyboard="{StaticResource Mouse_LeftButton_Up}"/>
        </EventTrigger>
        <EventTrigger RoutedEvent="UIElement.MouseEnter">
            <BeginStoryboard x:Name="Mouse_Enter_BeginStoryboard" Storyboard="{StaticResource Mouse_Enter}"/>
        </EventTrigger>
        <EventTrigger RoutedEvent="UIElement.MouseLeave">
            <BeginStoryboard x:Name="Mouse_Leave_BeginStoryboard" Storyboard="{StaticResource Mouse_Leave}"/>
        </EventTrigger>
        <EventTrigger RoutedEvent="UIElement.PreviewMouseLeftButtonDown">
            <BeginStoryboard x:Name="Mouse_LeftButton_Down_BeginStoryboard" Storyboard="{StaticResource Mouse_LeftButton_Down}"/>
        </EventTrigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

当我将它设置为 IsEnabled = false 并且光标在按钮上时，而不是仅仅将颜色更改为：

另外，触发了 MouseLeave 触发器上的动画，得到如下的乱码：

普通按钮：

现在我需要以某种方式阻止动画，因为在动画后等待 300 毫秒不是很好，因为按钮的 IsEnabled 取决于 TextBox 中文本的存在，并且也与手鼓一起跳舞。

将 IsEnabled 分配给按钮：

btn_next.IsEnabled = tb.Text != "";

1 个回答

Voted

VladD · Answer 1 · 2020-09-03T06:56:40Z

用 VisualStateManager 试试，用起来容易多了。同时，不需要反向动画。

我得到它是这样的：

<ControlTemplate x:Key="Button_Standard" TargetType="{x:Type Button}">
    <ControlTemplate.Resources>
        <Storyboard x:Key="Mouse_Enter">
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="border">
                <EasingColorKeyFrame KeyTime="0:0:0.2" Value="#FF2CA58D"/>
            </ColorAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="border">
                <EasingColorKeyFrame KeyTime="0:0:0.2" Value="#FF397C6E"/>
            </ColorAnimationUsingKeyFrames>
        </Storyboard>

        <Storyboard x:Key="Mouse_LeftButton_Down">
            <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" Storyboard.TargetName="border">
                <EasingThicknessKeyFrame KeyTime="0:0:0.03" Value="2"/>
            </ThicknessAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="border">
                <EasingColorKeyFrame KeyTime="0:0:0.03" Value="#FF1C473F"/>
            </ColorAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="border">
                <EasingColorKeyFrame KeyTime="0:0:0.5" Value="#FF2CA58D"/>
            </ColorAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="border">
                <EasingColorKeyFrame KeyTime="0:0:0.5" Value="#FF397C6E"/>
            </ColorAnimationUsingKeyFrames>

        </Storyboard>

        <Storyboard x:Key="DisabledStoryboard">
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="border">
                <EasingColorKeyFrame KeyTime="0:0:0.0" Value="#FF474747"/>
            </ColorAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="border">
                <EasingColorKeyFrame KeyTime="0:0:0.0" Value="#FF474747"/>
            </ColorAnimationUsingKeyFrames>
        </Storyboard>
    </ControlTemplate.Resources>

    <Border x:Name="border" CornerRadius="7.5" BorderBrush="Black">
        <Border.Background>
            <RadialGradientBrush>
                <GradientStop Color="#FF2CA58D" Offset="0"/>
                <GradientStop Color="#FF2CA58D" Offset="1"/>
            </RadialGradientBrush>
        </Border.Background>

        <Border.Effect>
            <DropShadowEffect/>
        </Border.Effect>

        <TextBlock x:Name="textBlock" TextWrapping="Wrap" Text="{TemplateBinding Content}" TextAlignment="Center" VerticalAlignment="Center" Foreground="White"/>

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualStateGroup.Transitions>
                    <VisualTransition GeneratedDuration="0:0:0.5" />
                    <VisualTransition GeneratedDuration="0" To="Pressed" />
                </VisualStateGroup.Transitions>
                <VisualState x:Name="Normal" />
                <VisualState x:Name="MouseOver" Storyboard="{StaticResource Mouse_Enter}"/>
                <VisualState x:Name="Pressed" Storyboard="{StaticResource Mouse_LeftButton_Down}"/>
                <VisualState x:Name="Disabled" Storyboard="{StaticResource DisabledStoryboard}"/>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Border>

    <ControlTemplate.Triggers>
        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Foreground" TargetName="textBlock" Value="#FF959595"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

结果：

没有关键帧似乎更容易：

<ControlTemplate x:Key="Button_Standard" TargetType="{x:Type Button}">
    <ControlTemplate.Resources>
        <Storyboard x:Key="Mouse_Enter">
            <ColorAnimation
                Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)"
                Storyboard.TargetName="border" Duration="0:0:0.5" To="#FF2CA58D"/>
            <ColorAnimation
                Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)"
                Storyboard.TargetName="border" Duration="0:0:0.5" To="#FF397C6E"/>
        </Storyboard>
        <Storyboard x:Key="Mouse_LeftButton_Down">
            <ThicknessAnimation
                Storyboard.TargetProperty="(Border.BorderThickness)"
                Storyboard.TargetName="border" Duration="0:0:0.0" To="2"/>
            <ColorAnimation
                Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"
                Storyboard.TargetName="border" Duration="0:0:0.0" To="#FF1C473F"/>
            <ColorAnimation
                Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)"
                Storyboard.TargetName="border" Duration="0:0:0.0" To="#FF2CA58D"/>
            <ColorAnimation
                Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)"
                Storyboard.TargetName="border" Duration="0:0:0.0" To="#FF397C6E"/>
        </Storyboard>
        <Storyboard x:Key="DisabledStoryboard">
            <ColorAnimation
                Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)"
                Storyboard.TargetName="border" Duration="0:0:0.0" To="#FF474747"/>
            <ColorAnimation
                Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)"
                Storyboard.TargetName="border" Duration="0:0:0.0" To="#FF474747"/>
        </Storyboard>
    </ControlTemplate.Resources>

    <Border x:Name="border" CornerRadius="7.5" BorderBrush="Black">
        <Border.Background>
            <RadialGradientBrush>
                <GradientStop Color="#FF2CA58D" Offset="0"/>
                <GradientStop Color="#FF2CA58D" Offset="1"/>
            </RadialGradientBrush>
        </Border.Background>

        <Border.Effect>
            <DropShadowEffect/>
        </Border.Effect>

        <TextBlock x:Name="textBlock" TextWrapping="Wrap" Text="{TemplateBinding Content}" TextAlignment="Center" VerticalAlignment="Center" Foreground="White"/>

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualStateGroup.Transitions>
                    <VisualTransition GeneratedDuration="0:0:0.5" />
                    <VisualTransition GeneratedDuration="0:0:0.0" To="Pressed" />
                </VisualStateGroup.Transitions>
                <VisualState x:Name="Normal" />
                <VisualState x:Name="MouseOver" Storyboard="{StaticResource Mouse_Enter}"/>
                <VisualState x:Name="Pressed" Storyboard="{StaticResource Mouse_LeftButton_Down}"/>
                <VisualState x:Name="Disabled" Storyboard="{StaticResource DisabledStoryboard}"/>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Border>

    <ControlTemplate.Triggers>
        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Foreground" TargetName="textBlock" Value="#FF959595"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

将 IsEnabled 设置为 false 后阻止 MouseLeave 按钮上的动画

是否可以在 C++ 中继承类 <---> 结构？

这种神经网络架构适合文本分类吗？

为什么分配的工作方式不同？

控制台中的光标坐标

如何在 C++ 中删除类的实例？

点是否属于线段的问题

json结构错误

ServiceWorker 中的“获取”事件

c ++控制台应用程序exe文件[重复]

按多列从sql表中选择

将 IsEnabled 设置为 false 后阻止 MouseLeave 按钮上的动画

1 个回答

相关问题