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
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>
Do more with
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
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;
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;
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
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>
Ok I got your point.
You can define the Trigger.EnterActions and Trigger.ExitActions for this purpose.
Here is you code modified
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>
Premium Content
You need an Expert Office subscription to comment.Start Free Trial