C# WPF - mouse over animation with opacity

less than 1 minute read

Resource XML.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<Windows.Resources>
        <Style x:Key="FadeOutButton" TargetType="{x:Type Button}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border Background="Transparent">
                            <ContentPresenter/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <EventTrigger RoutedEvent="Control.MouseEnter">
                    <BeginStoryboard>
                        <Storyboard >
                            <DoubleAnimation Duration="0:0:0.2" To="1" Storyboard.TargetProperty="Opacity"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger RoutedEvent="Control.MouseLeave">
                    <BeginStoryboard>
                        <Storyboard >
                            <DoubleAnimation Duration="0:0:0.2" To="0.4" Storyboard.TargetProperty="Opacity"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Style.Triggers>
        </Style>
</Windows.Resources>

Button XML.

1
2
3
4
5

    <Button Style="{StaticResource FadeOutButton}"
                   Name="Test"
                   Opacity="0.4">
                        <Image Stretch="None" Source="{StaticResource LoginImage}" FocusVisualStyle="{x:Null}" />
    </Button>

You may also enjoy