Link to home
Start Free TrialLog in
Avatar of a_anis3000
a_anis3000Flag for Egypt

asked on

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

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

Avatar of CuteBug
CuteBug
Flag of India image

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;
Avatar of a_anis3000

ASKER

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

ASKER CERTIFIED SOLUTION
Avatar of CuteBug
CuteBug
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial