asked on

Shining WPF button on mouse hover

In the following XAML code below the mouse button shines and glow on mouse hover, and goes back to normal when point is moved away. The problem is for some reason clicking the button causes it to permanently retain its shine even after mouse pointer is moved away

<Page   Background="#FF836402"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Page.Resources>
    <Style x:Key="aquaButton" TargetType="Button">
        <Setter Property="FontWeight" Value="UltraBold"/>
        <Setter Property="Foreground" Value="#B3000000"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <Ellipse x:Name="backgroundGlow" Fill="Yellow"/>
                        <Ellipse x:Name="outterGlow" Fill="Yellow" Opacity="0">
                            <Ellipse.BitmapEffect>
                                <OuterGlowBitmapEffect GlowColor="Aqua" GlowSize="10"/>
                            </Ellipse.BitmapEffect>
                        </Ellipse>
                        <Ellipse x:Name="mainButton" Fill="Blue" Opacity="0.85"/>
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Panel.ZIndex="1"/>
                        <Ellipse x:Name="shine" Opacity="1">
                            <Ellipse.Fill>
                                <LinearGradientBrush StartPoint="0,-0.1" EndPoint="0,1">
                                    <GradientStop Color="White" Offset="0"/>
                                    <GradientStop Color="White" Offset="0.1"/>
                                    <GradientStop Color="Transparent" Offset="0.5"/>                                   
                                </LinearGradientBrush>
                            </Ellipse.Fill>
                        </Ellipse>
                        <Ellipse x:Name="shadow" Opacity="0.50">
                            <Ellipse.Fill>
                                <LinearGradientBrush StartPoint="0,1" EndPoint="0,0">
                                    <GradientStop Color="#FF000337" Offset="0"/>
                                    <GradientStop Color="#FF000337" Offset="0.2"/>
                                    <GradientStop Color="Transparent" Offset="1"/>
                                </LinearGradientBrush>                                
                            </Ellipse.Fill>                            
                        </Ellipse>
                        <Ellipse x:Name="buttonBorder"  Stroke="#FF706CEA" StrokeThickness="2"/>
                        <Ellipse x:Name="buttonOutline" Stroke="DarkBlue" StrokeThickness="1"/>
                        <Ellipse x:Name="hoverShine" Opacity="0">
                            <Ellipse.Fill>
                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                    <GradientStop Color="White" Offset="0"/>
                                    <GradientStop Color="White" Offset="0.1"/>
                                    <GradientStop Color="Transparent" Offset="1"/> 
                                </LinearGradientBrush>
                            </Ellipse.Fill>
                        </Ellipse>
                    </Grid>
                    <ControlTemplate.Triggers>                        
                        <MultiTrigger>                            
                            <MultiTrigger.Conditions>
                                <Condition Property="Button.IsMouseOver" Value="True"/>                                
                            </MultiTrigger.Conditions>
                            <MultiTrigger.EnterActions>
                              <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="hoverShine"
                                    Storyboard.TargetProperty="Opacity"
                                    To="0.40"
                                    Duration="0:0:0.1"/>
                                    <DoubleAnimation Storyboard.TargetName="outterGlow"
                                     Storyboard.TargetProperty="Opacity"
                                     To="1"
                                     Duration="0:0:0.1"/>
                                </Storyboard>
                              </BeginStoryboard>
                            </MultiTrigger.EnterActions>
                            <MultiTrigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="hoverShine"
                                        Storyboard.TargetProperty="Opacity"
                                        To="0"
                                        Duration="0:0:0.25"/>
                                        <DoubleAnimation Storyboard.TargetName="outterGlow"
                                        Storyboard.TargetProperty="Opacity"
                                        To="0"
                                        Duration="0:0:0.25"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </MultiTrigger.ExitActions>
                        </MultiTrigger>                 
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="Button.IsMouseOver" Value="True"/>
                                <Condition Property="Button.IsPressed" Value="True"/>
                            </MultiTrigger.Conditions>
                            <Setter TargetName="shine" Property="Opacity" Value="0.85"/>
                            <Setter TargetName="shadow" Property="Opacity" Value="0.85"/>
                            <MultiTrigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="hoverShine"
                                         Storyboard.TargetProperty="Opacity"                                         
                                         To="0"
                                         Duration="0:0:0.1"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </MultiTrigger.EnterActions>
                            <MultiTrigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="hoverShine"
                                        Storyboard.TargetProperty="Opacity"
                                        To="0.40"
                                        Duration="0:0:0.25"/>                                        
                                    </Storyboard>
                                </BeginStoryboard>
                            </MultiTrigger.ExitActions>
                        </MultiTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
  </Page.Resources>
  <Grid>  
    <Button Style="{StaticResource aquaButton}" Height="150" Width="200">Button</Button>
  </Grid>
</Page>

Open in new window

ASKER CERTIFIED SOLUTION

Aaron Jabamani

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

a_anis3000

ASKER

Thats odd, I tried the code in other XAML editor and in a WPF application (Visual C# 2008) in Windows Vista too, yet I have the problem I described. Are you sure that you tried clicking the button? The button shines and fade upon mouse pointer entering and leaving respectively perfectly fine so long as the button is not clicked, but once it is the shine becomes permanent until the WPF application is relaunched.

Aaron Jabamani

Since you asked, again i ran the application and below i have given 2 use cases.

use case 1:
1.Move cursor over your button, it shines
2. Move out the cursor from your button, shines fades away.

use case 2:
1.Move cursor over your button, it shines
2. now click the button
3. Move out the cursor from your button, shines fades away.

For me the shines never stay back when i click the button.

The only defect i see is, the border appears when i switch to another application.

Steps to reproduce
1. Run the application
2.Move cursor over your button, it shines
3.now click the button
4. Move out the cursor from your button
5. Pres Alt + Tab to go to any other application
6. Come back to our silverlight page
7. You see a border around the button, which is looking odd.

a_anis3000

ASKER

That's even more odd. In case the issue is from my system I tried running the code in another computer (my laptop) running Windows Vista, however same behavior and same issue. Yet for some bizarre reasons it behaves as intended in your system while it doesn't in mine

As for the border artifact, that is something I haven't noticed, I tried reproducing it by alt tabbing and indeed a a black dotted square border briefly appears around the button. But I will worry about that later once I figure out the permanent shine issue.