Blink an image from ViewModel - wpf

Question

I want to give some feedback to users when they click on a button, which starts a request that can be long.
I'm using WPF with mvvm and I'd like to start blink the clicked image.
This is the XAML code:
<Button Style="{DynamicResource BtnToolBar}" Command="{Binding refreshAll}">
<Image x:Name="imgUpd" Style="{DynamicResource ImageStyleUpd}" ToolTip="{StaticResource UpdateData}"/>
</Button>
I'd like something like:
isBlinking="{Binding isBlinking}"
Does it exist? How can I make a blinking image from the ViewModel? Is it possible?
EDIT: I have written this with the solution I have found.

Answer 1

You can use viewmodel to start blinking. To do what you want, you need to:
Add new DataTrigger to your ImageStyleUpd style
Bind it to your isBlinking property with "True" value
In the trigger you can animate your image however you want (for example, change Opacity of the image)
Example
<Style x:Key="ImageStyleUpd" TargetType="{x:Type Image}">
<Style.Triggers>
<DataTrigger Binding="{Binding IsBlinking}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard x:Name="blinking">
<Storyboard RepeatBehavior="Forever">
<DoubleAnimation Storyboard.TargetProperty="Opacity" AutoReverse="True"
To="0.5" Duration="0:0:0.5">
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<StopStoryboard BeginStoryboardName="blinking"/>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
Hope, it helps.

Answer 2

Blinking is typically an animation in the view, which can be started/stopped by IsBlinking property in viewmodel. You can achieve blinking effect by varying DropShadowEffect (smooth blinking) or by a simple switching of two brushes:
<DataTrigger Binding="{Binding IsBlinking}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard x:Name="blinking">
<Storyboard RepeatBehavior="Forever">
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="item"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame Value="Red" KeyTime="0:0:0"/>
<DiscreteObjectKeyFrame Value="White" KeyTime="0:0:0.3"/>
<DiscreteObjectKeyFrame KeyTime="0:0:0.5"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<StopStoryboard BeginStoryboardName="blinking"/>
</DataTrigger.ExitActions>
</DataTrigger>
item - is some visual which Background (or Foreground/Fill, etc.) you want to animate.
<!-- to example path, use Storyboard.TargetProperty="Fill" -->
<Path x:Name="item" Fill="SomeDefaultNonBlinkingBrush" ... />

Answer 3

I like to do this kind of stuff in a behavior, it is reusable and you can set this property on any UIElement.
public static class FlickrBehavior
{
#region IsFlickering
public static bool GetIsFlickering(UIElement element)
{
return (bool)element.GetValue(IsFlickeringProperty);
}
public static void SetIsFlickering(UIElement element, bool value)
{
element.SetValue(IsFlickeringProperty, value);
}
public static readonly DependencyProperty IsFlickeringProperty =
DependencyProperty.RegisterAttached("IsFlickering", typeof(bool), typeof(FlickrBehavior), new UIPropertyMetadata(false, OnIsFlickeringChanged));
static void OnIsFlickeringChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
if ((bool)e.NewValue)
StartAnimation(d as UIElement);
else
StopAnimation(d as UIElement);
}
private static void StartAnimation(UIElement element)
{
DoubleAnimation da = new DoubleAnimation();
da.From = 1;
da.To = 0;
da.Duration = new Duration(TimeSpan.FromSeconds(2));
da.AutoReverse = true;
da.RepeatBehavior = RepeatBehavior.Forever;
element.BeginAnimation(UIElement.OpacityProperty, da);
}
private static void StopAnimation(UIElement element)
{
element.BeginAnimation(UIElement.OpacityProperty, null);
}
#endregion
}

Answer 4

Similar to #Novitchi's answer, I would also like to create a behaviour with an attached property. But I will attach the behaviour to the mouse click:
So you can create your behaviour as below:
public static class BlinkingBehaviour
{
public static bool GetIsBlinkingWhenClick(UIElement element)
{
return (bool)element.GetValue(IsBlinkingWhenClickProperty);
}
public static void SetIsBlinkingWhenClick(UIElement element, bool value)
{
element.SetValue(IsBlinkingWhenClickProperty, value);
}
public static readonly DependencyProperty IsBlinkingWhenClickProperty =
DependencyProperty.RegisterAttached(
"IsBlinkingWhenClick",
typeof(bool),
typeof(BlinkingBehaviour),
new FrameworkPropertyMetadata(false, OnIsBlinkingWhenClickChanged));
static void OnIsBlinkingWhenClickChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
if ((bool)e.NewValue)
{
(d as UIElement).PreviewMouseLeftButtonDown -= BlinkingWhenClickBehavior_PreviewMouseLeftButtonDown;
(d as UIElement).PreviewMouseLeftButtonDown += BlinkingWhenClickBehavior_PreviewMouseLeftButtonDown;
}
else
{
(d as UIElement).PreviewMouseLeftButtonDown -= BlinkingWhenClickBehavior_PreviewMouseLeftButtonDown;
}
}
static void BlinkingWhenClickBehavior_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
DoubleAnimation blink = new DoubleAnimation() {
To = 1,
From = 0,
Duration = TimeSpan.FromMilliseconds(200) };
(sender as UIElement).BeginAnimation(UIElement.OpacityProperty, blink);
}
}
Then in your XAML, you can attach it to your image:
<Window x:Class="YourNameSpace.YourWindowClass"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:YourNameSpace"
<Button ...>
<Image local:BlinkingBehaviour.IsBlinkingWhenClick="True" .../>
</Button>
</Window>