C# WPF – mouse over animation with opacity

Resource XML.

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

    <Button Style="{StaticResource FadeOutButton}"
                   Name="Test"
                   Opacity="0.4">
                        <Image Stretch="None" Source="{StaticResource LoginImage}" FocusVisualStyle="{x:Null}" />
    </Button>
Advertisements
This entry was posted in .NET, Programming. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s