How to trigger wpf animation only if the mouse hangs for a long time?
I am new to WPF animation.
I have a wpf app with 4 buttons. 4 buttons have animations in which the opacity of the button changes from 0.0 to 1.0, which is triggered when the mouse hovers over that button.
The problem I'm running into is that even if the mouse slides over other buttons for a split second, the animations for those buttons are triggered.
Is there a way that I can only trigger the animation if the mouse stays on the button for at least one second?
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="22.5*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="22.5*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="22.5*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="22.5*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Button x:Name="Button1" Grid.Column="1" Content="Button 1">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation From="0.0" To="1.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Button1" Duration="0:0:1"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
<Button x:Name="Button2" Grid.Column="3" Content="Button2">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation From="0.0" To="1.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Button2" Duration="0:0:1"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
<Button x:Name="Button3" Grid.Column="5" Content="Button 3">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation From="0.0" To="1.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Button3" Duration="0:0:1"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
<Button x:Name="Button4" Grid.Column="7" Content="Button 4">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation From="0.0" To="1.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Button4" Duration="0:0:1"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</Grid>
Thanks in Advance
+3
source to share
2 answers
I don't think this is something you can do in XAML. In code, it looks like this:
XAML
<Button Width="50" Height="50" Name="MyButton"> </Button>
CODE
public partial class MainWindow : Window
{
private DispatcherTimer timer;
private DoubleAnimation animation;
private Storyboard sb;
public MainWindow()
{
InitializeComponent();
timer = new DispatcherTimer();
timer.Interval = TimeSpan.FromSeconds(1);
timer.Tick += timer_Tick;
MyButton.MouseEnter += (sender, e) =>
{
timer.Start();
};
MyButton.MouseLeave += (sender, e) =>
{
timer.Stop();
};
animation = new DoubleAnimation();
animation.From = 1;
animation.To = 0;
animation.Duration = new Duration(TimeSpan.FromMilliseconds(1000));
Storyboard.SetTarget(animation, MyButton);
Storyboard.SetTargetProperty( animation, new PropertyPath(OpacityProperty));
sb = new Storyboard();
sb.Children.Add(animation);
}
private void timer_Tick(object sender, EventArgs e)
{
timer.Stop();
sb.Begin();
}
}
+2
source to share
Use the property BeginTime
and set it accordingly.
<EventTrigger RoutedEvent="ButtonBase.MouseEnter">
<BeginStoryboard x:Name="Sb">
<Storyboard>
<DoubleAnimation
From="0"
To="1"
BeginTime="00:00:5"
Duration="00:00:5"
Storyboard.TargetProperty="Opacity"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="ButtonBase.MouseLeave">
<StopStoryboard BeginStoryboardName="Sb"/>
</EventTrigger>
+1
source to share