Home/ Questions/Q 7687801
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T19:47:03+00:00

I need to create a color animation. I have a control (a slick button

  • 0

I need to create a color animation. I have a control (a slick button – minimize, close) which works perfectly. There’s a mouseover trigger that changes its color. The problem is when I want to animate this color transition. :S

There’s an example how it looks like:

<ControlTemplate x:Key="SlickButtonTemplate" TargetType="{x:Type controls:SlickButtonControl}">
    <Grid>
        <Border x:Name="ButtonBackgroundBorder" CornerRadius="{Binding Path=CornerRadius, RelativeSource={RelativeSource TemplatedParent}}"
                Background="{Binding Path=HighlightBackground, RelativeSource={RelativeSource TemplatedParent}}" Opacity="0" BorderBrush="Black" BorderThickness="1">
        </Border>
        <Border x:Name="ButtonEdgesBorder" CornerRadius="{Binding Path=CornerRadius, RelativeSource={RelativeSource TemplatedParent}}" Opacity="1" BorderBrush="Black"
                BorderThickness="1">
            <Border.BitmapEffect>
                <DropShadowBitmapEffect Color="#FFFFFFFF" Direction="270" ShadowDepth=".75" Softness="0.20"/>
            </Border.BitmapEffect>
        </Border>
        <Border x:Name="ButtonContentBorder" CornerRadius="{Binding Path=CornerRadius, RelativeSource={RelativeSource TemplatedParent}}" Opacity="1" BorderThickness="1">
            <ContentPresenter Width="Auto" Height="Auto"  HorizontalAlignment="Center" VerticalAlignment="Center">
            </ContentPresenter>
        </Border>
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Trigger.Setters>
                <Setter Property="Opacity" TargetName="ButtonBackgroundBorder" Value="1"></Setter>
            </Trigger.Setters>
        </Trigger>
        <Trigger Property="IsMouseOver" Value="False">
            <Trigger.Setters>
                <Setter Property="Opacity" TargetName="ButtonBackgroundBorder" Value="1"></Setter>
                <Setter Property="Background" TargetName="ButtonBackgroundBorder" Value="{Binding Path=PressedBackground, RelativeSource={RelativeSource TemplatedParent}}"></Setter>
            </Trigger.Setters>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>
<Style x:Key="SlickButton" TargetType="{x:Type ToggleButton}">
    <Setter Property="Template" Value="{StaticResource SlickButtonTemplate}" />
</Style>

I tried to remove Trigger.Setters section and replace it by:

<Trigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.5" Storyboard.TargetName="ButtonBackgroundBorder"
                         Storyboard.TargetProperty="(UIElement.Opacity)" To="1" />
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.EnterActions>

It works once. There is an animation when mouse enters on the button area but no animation when it leaves. Next when mouse enters on that button again – no animation, but color changes immediately:S I dunno how to do that. I beg for some help.
Thx in advance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Thx, I’m stupid, don’t comment:P

            <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Trigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.5" Storyboard.TargetName="buttonBackgroundOverBorder"
                         Storyboard.TargetProperty="(UIElement.Opacity)" To="1" />
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.EnterActions>
            <Trigger.ExitActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.5" Storyboard.TargetName="buttonBackgroundOverBorder"
                         Storyboard.TargetProperty="(UIElement.Opacity)" To="0" />
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.ExitActions>
        </Trigger>
        <Trigger Property="IsPressed" Value="True">
            <Trigger.Setters>
                <Setter Property="Background" TargetName="buttonBackgroundPressedBorder" Value="{Binding Path=PressedBackground, RelativeSource={RelativeSource TemplatedParent}}" />
            </Trigger.Setters>
            <Trigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.5" Storyboard.TargetName="buttonBackgroundPressedBorder"
                         Storyboard.TargetProperty="(UIElement.Opacity)" To="1" />
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.EnterActions>
            <Trigger.ExitActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.5" Storyboard.TargetName="buttonBackgroundPressedBorder"
                         Storyboard.TargetProperty="(UIElement.Opacity)" To="0" />
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.ExitActions>
        </Trigger>
    </ControlTemplate.Triggers>

    Everything works fine:)

    • 0