How to make blinking rectangle stroke in WPF

Question

Below my rectangle in WPF:

<Rectangle Margin="5,0" HorizontalAlignment="Left"  Width="380" Height="25" Fill="LightYellow" Stroke="Orange" StrokeThickness="2" RadiusX="8" RadiusY="8"/>

I would like to start bliking for some seconds (and then stop) the rectangle stroke property when a property "StartBlinking" in view model changes from false to true.

I would like to implement storyboard in xaml not in c# code.

How can I do this?

I have tried this but not working:

<Rectangle Margin="5,0" HorizontalAlignment="Left"  Width="380" Height="25" Fill="LightYellow" Stroke="Orange" StrokeThickness="2" RadiusX="8" RadiusY="8">

        <Rectangle.Style>
            <Style TargetType="{x:Type Rectangle}">
                <Style.Resources>
                    <Storyboard x:Key="flashAnimation" >
                        <DoubleAnimation Storyboard.TargetProperty="Stroke" From="1" To="0" AutoReverse="True" Duration="0:0:0.5" RepeatBehavior="Forever" />
                    </Storyboard>
                </Style.Resources>
            </Style>
        </Rectangle.Style>    
</Rectangle>

I am using C# and .NET 3.5 in Visual Studio 2008.

mm8 · Answer 1 · 2017-07-21T12:20:46.540

1

You could animate the Opacity property of the Stroke using a DataTrigger and a Storyboard:

    <Rectangle Margin="5,0" HorizontalAlignment="Left"  Width="380" Height="25" Fill="LightYellow" 
                   Stroke="Orange" StrokeThickness="2" RadiusX="8" RadiusY="8">
    <Rectangle.Style>
        <Style TargetType="Rectangle">
            <Style.Triggers>
                <DataTrigger Binding="{Binding StartBlinking}" Value="True">
                    <DataTrigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Stroke.(SolidColorBrush.Opacity)" 
                                                         To="0" AutoReverse="True" Duration="0:0:0.5" RepeatBehavior="6x" />
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                    <DataTrigger.ExitActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Stroke.(SolidColorBrush.Opacity)" 
                                                         To="1" Duration="0:0:0.5" />
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.ExitActions>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Rectangle.Style>
</Rectangle>

edited Jul 21 '17 at 12:20

answered Jul 21 '17 at 11:51

mm8

163,881
10
57
88

I will try it thanks. Also I have found this: https://stackoverflow.com/questions/36457915/how-to-put-a-gradient-on-a-rectangle-stroke-and-animate-it but seems EasingPointKeyFrame is not supported in .NET 3.5, how can I adapt this to .NET 3.5? – Willy Jul 21 '17 at 11:55
Why would you need one to make a Rectangle blink...? – mm8 Jul 21 '17 at 11:56
I have tried your solution. When I set StartBlinking property to true from view model it starts to blink but two things: 1) It is blinking the entire rectangle body, not the stroke, I would like only the stroke to blink if possible. 2) Once start blinking it never stops. – Willy Jul 21 '17 at 12:09
It stops when you set the StartBlinking property to false provided that you implement the INotifyPropertyChanged interface and raise the PropertyChanged event. – mm8 Jul 21 '17 at 12:11
ah ok, sorry, and there is the possibilty it stops automatically after x seconds once it has started? without the need to set the property to false. – Willy Jul 21 '17 at 12:13
Setting RepeatBehavior="6x" stops it automatically after 6 times. – Willy Jul 21 '17 at 12:19
And changing the Storyboard.Target property to "Stroke.(SolidColorBrush.Opacity)" animates the Stroke. I edited my answer. – mm8 Jul 21 '17 at 12:21
Great! but now I get an exception saying: Stroke property does not point to a DependencyObject in path 'Stroke.(0)' – Willy Jul 21 '17 at 12:35
Did you try my sample markup as-is? Try with the following path: Storyboard.TargetProperty="(Rectangle.Stroke).(SolidColorBrush.Opacity)" – mm8 Jul 21 '17 at 12:39
Yes I have copied exactly the same piece of code you posted. Changing to Storyboard.TargetProperty="(Rectangle.Stroke).(SolidColorBru‌sh.Opacity)" the following error appears: "Stroke property does not point to a DependencyObject in path '(0).(1)' " – Willy Jul 21 '17 at 12:50
It certainly works for me. By the way, .NET 3.5 is not officially supported any more. You should upgrade. I guess "(Shape.Stroke).(SolidColorBrush.Opacity)" gives the same error? – mm8 Jul 21 '17 at 12:52
Well, then there are some features that are not available for you as well. This seems to be one of them apparently if you can't get it to work based on my sample that works just fine for me. – mm8 Jul 21 '17 at 12:58
Sorry, i have checked (Shape.Stroke).(SolidColorBrush.Opacity) and this does not throws any error but stroke is not blinking – Willy Jul 21 '17 at 13:40
Also I have tried to do something like this, adapted to the stroke property but without success: https://social.msdn.microsoft.com/Forums/vstudio/en-US/73dd1434-b0ec-44bb-83cd-039292274f20/error-fill-property-does-not-point-to-a-dependencyobject-in-path-01?forum=wpf – Willy Jul 21 '17 at 13:46

How to make blinking rectangle stroke in WPF

1 Answers1