Question

I have a button that has a transparent background and a thick white border. When the button detects a mouse enter I see that the background went from the set transparent background to it’s default focused color so for that I just set the opacity to 0.2 so that it shows some feed back that it has a focus.

Now here is my dilemma. When I leave the button’s bounds there is a small animation that goes from my .2 opacity to 1 before changing the background to the original transparent. I would like to know how to replace this with either a smoother animation so that I don’t see the opaque background before it changing to transparent or just have a way to bypass the animation completely and just have it set my values. I see the similar thing happen when the button is focused. It will animate between 0.2 opacity and 1.0 with the default background color. Any ideas would be greatly appreciated.

<Button BorderBrush="White" BorderThickness="1" Width="45" Height="45" >
    <Button.Style>
        <Style TargetType="{x:Type Button}">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Opacity" Value="0.2" />
                </Trigger>
                <Trigger Property="IsMouseOver" Value="False">
                    <Setter Property="Background" Value="Transparent" />
                    <Setter Property="Opacity" Value="1.0" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

Answer 1

Here is a XAML only solution, I think this does what you want…

<Button BorderBrush="White" BorderThickness="1" Width="45" Height="45" Content="1234" >
        <Button.Style>
            <Style TargetType="{x:Type Button}">
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="False">
                        <Setter Property="Background" Value="Transparent" />
                        <Setter Property="Opacity" Value="1.0" />
                    </Trigger>
                    <EventTrigger RoutedEvent="MouseLeave">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0.2" To="1"></DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="MouseEnter">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0.2" To="0.2"></DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Style.Triggers>
            </Style>
        </Button.Style>
    </Button>