I have a button with my own style:

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

When I put it IsEnabled = false, and the cursor is over the button, instead of just changing the color to this:

Picture of a normal disabled button

the animation on the MouseLeave trigger also works and the following mess is obtained:

Picture of abnormal disabled button

Normal button:

Normal not disabled button

And now I need to somehow block the animation, since it’s not very good to wait 300 ms after the animation, since the IsEnabled buttons depend on the text in TextBox, and dance with a tambourine too.

The purpose of the IsEnabled button:

 btn_next.IsEnabled = tb.Text != "";
  • Why not just use multitrigger? Or for example go to VisualState. - VladD
  • @VladD Hmm, interesting solution, in that case, will IsMouseOver = true if IsEnabled = false? - Arasfon
  • Immediately I will not answer, but you can experiment on the idea - VladD
  • @VladD Unfortunately, IsMouseOver always returns false if the button is turned off. :( Is it possible to somehow somehow catch the mouse through wpf? Otherwise, my idea with the multitrigger is crumbling. - Arasfon
  • I'll see what i can do. - VladD

1 answer 1

Try with VisualStateManager, everything is much easier with it. At the same time, reverse animations are not needed.

I did this:

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

Result:

simple anima named Natasha

It seems to be easier without key frames:

 <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>
  • Well, thanks, I'll try! I just did not understand why <VisualStateGroup.Transitions /> is needed? - Arasfon
  • @Arasfon: Good question. Yes, I think it is not necessary. - VladD
  • Reverse animations needed. Reverse, for some reason, he does not. And I would like to. Otherwise, you have to write an additional cancellation of the previous properties. ( - Arasfon
  • @Arasfon: Strange, I have an animation in both directions without any problems. Attached a picture to the answer. - VladD
  • And indeed it is strange, maybe this is due to different versions of Windows / VS / .NET? I have 10, and Visual studio 2017 preview, .net 4.6.1 - Arasfon