Overriding actions in Button.MouseEnter with the ones in Button.IsPressed event

a_anis3000
a_anis3000 used Ask the Experts™
on
The style in the XAML code below renders a button into a 3D ellipse glass button that glows when hovered by the mouse pointer and goes darker and become less shiny when clicked. The problem is by definition, if the button is being clicked the mouse is also over the button, hence the button would glow and go darker in the same time when pressed. I was wondering if there is a way to prevent the actions associated with the Button.MouseEnter event from taking place while the mouse is depressed, or if not a work around for this issue.

Thanks in advance
a_anis3000
<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="glow" Fill="Yellow"/>
                        <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="0.7"/> 
                                </LinearGradientBrush>
                            </Ellipse.Fill>
                        </Ellipse>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="Button.IsPressed" Value="true">
                            <Setter TargetName="shine" Property="Opacity" Value="0.85"/>
                            <Setter TargetName="shadow" Property="Opacity" Value="0.85"/>                            
                            <Setter TargetName="hoverShine" Property="Opacity" Value="0.40"/>
                        </Trigger>
                        <EventTrigger RoutedEvent="Button.MouseEnter">
                            <EventTrigger.Actions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="hoverShine"
                                        Storyboard.TargetProperty="Opacity"
                                        To="0.80"
                                        Duration="0:0:0.1"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger.Actions>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="Button.MouseLeave">
                            <EventTrigger.Actions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="hoverShine"
                                        Storyboard.TargetProperty="Opacity"
                                        To="0"
                                        Duration="0:0:0.25"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger.Actions>
                        </EventTrigger>
                       
                    </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®

Commented:
You have to use a Multitrigger.

Instead of the EventTrigger for MouseEnter, you can use the Trigger "IsMouseOver".

So you need to have two Multitriggers
1st one with following properties
           IsMouseOver=true
           Button.IsPressed = true;

2nd one with following properties
           IsMouseOver = true;
           Button.IsPressed = false;

Author

Commented:
Thanks. That solved the issue (see modified XAML code below), but there is one downside to this approach is that I lose precise control over the glow animation. In Eventtrigger you can control the time over which the animation occur, for example when the mouse cursor leaves the button I can set the glow to fade of over a period of 0.25 seconds using the Duration in the Eventtrigger resulting in a fade out effect, which is unfortunately not available in Multitrigger, so instead of the glow fading out upon mouse cursor leaving it would dissappear immediatly. I was wondering if there is a work around for this downside or is that the best compromise I can get?

Thanks again in advance

<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="glow" Fill="Yellow"/>
                        <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="0.80"/> 
                                </LinearGradientBrush>
                            </Ellipse.Fill>
                        </Ellipse>
                    </Grid>
                    <ControlTemplate.Triggers>                        
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="Button.IsMouseOver" Value="True"/>
                                <Condition Property="Button.IsPressed" Value="False"/>
                            </MultiTrigger.Conditions>
                            <Setter TargetName="hoverShine" Property="Opacity" Value="0.60"/>
                        </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>
                    </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

Commented:
Ok I got your point.

You can define the Trigger.EnterActions and Trigger.ExitActions for this purpose.

Here is you code modified

                       
<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="glow" Fill="Yellow"/>
                        <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="0.7"/> 
                                </LinearGradientBrush>
                            </Ellipse.Fill>
                        </Ellipse>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter TargetName="shine" Property="Opacity" Value="0.85"/>
                            <Setter TargetName="shadow" Property="Opacity" Value="0.85"/>                            
                            <Setter TargetName="hoverShine" Property="Opacity" Value="0.40"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Trigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="hoverShine"
                                        Storyboard.TargetProperty="Opacity"
                                        To="0.80"
                                        Duration="0:0:0.1"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="hoverShine"
                                        Storyboard.TargetProperty="Opacity"
                                        To="0"
                                        Duration="0:0:0.25"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.ExitActions>
                        </Trigger>                       
                    </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

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