Outer Glow for a WPF Button

a_anis3000
a_anis3000 used Ask the Experts™
on
The following XAML code is expected to behave as the following

1)Its surface shine and the button glow outward when hovered by the mouse pointer
2)When clicked becomes darker and less shiny while retaining the outter glow

The problem lies in the third behavior, Once the mouse pointer is above the button the outter glow should only fade out when the pointer leaves, but it does when the button is clicked too
<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"/>
                                <Condition Property="Button.IsPressed" Value="False"/>
                            </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"/>
                            <Setter TargetName="outterGlow" Property="Opacity" Value="1"/>
                        </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

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
that is because of your multiconditions. when you press button one of the condition

<Condition Property="Button.IsPressed" Value="False"/> becomes FALSE so the effect is the exit actions.
just comment out that condition, you will get what you want

                                    <MultiTrigger.Conditions>
                                        <Condition Property="Button.IsMouseOver" Value="True"/>
                                        <!--<Condition Property="Button.IsPressed" Value="False"/>-->
                                    </MultiTrigger.Conditions>

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial