One of the long-standing jokes at the office is about using the much hated <Blink> tag in XAML user interfaces. (The other one being about mapping the UI onto the inside of a sphere..)
Disclaimer: This is NOT in ANY WAY suggested for any use WHATSOEVER. We have already seen way too many blinking webpages, thank you very much. And the code is "proof-of-concept" quality..
So basically, I wanted to do a a component that I can use in XAML, making it's content blink. And just for the fun of it, I wanted the on and off durations tunable, and the same goes for the durations of the fade in and fade out between those two extremes.
So here goes nothing...
First a little test case:
<Window x:Class="Blink.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:src="clr-namespace:BlinkTest" Title="Blink" Height="300" Width="450">
<StackPanel Orientation="Vertical">
<!-- Use default blinking settings -->
<src:Blink>
<TextBlock Padding="20" Margin="20" Background="Pink">Hello World</TextBlock>
</src:Blink>
<!-- Explicitely specify blinking settings -->
<src:Blink OnDuration="1" OffDuration="1" FadeInDuration="0" FadeOutDuration="0">
<StackPanel Orientation="Horizontal" Margin="50">
<Label>Some nice text about the button</Label>
<Button>Click Me!</Button>
</StackPanel>
</src:Blink>
</StackPanel>
</Window>
And then the code for the Blink class
The using statements
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Markup;
using System.Windows.Media;
using System.Windows.Media.Animation;
We are inheriting System.Windows.Controls.Control so we have to do some cruft related to layout
protected override int VisualChildrenCount {
get { return Child != null ? 1 : 0; }
}
protected override Visual GetVisualChild(int index) {
if (index > 0 || Child == null) throw new ArgumentException("index");
return Child;
}
protected override Size MeasureOverride(Size constraint) {
Size sizeDesired = new Size(0, 0);
if (Child != null) {
Child.Measure(constraint);
}
sizeDesired.Width += Child.DesiredSize.Width;
sizeDesired.Height += Child.DesiredSize.Height;
return sizeDesired;
}
protected override Size ArrangeOverride(Size arrangeBounds) {
if (Child != null) {
Rect rect = new Rect(
new Point((arrangeBounds.Width - Child.DesiredSize.Width) / 2,
(arrangeBounds.Height - Child.DesiredSize.Height) / 2),
Child.DesiredSize);
Child.Arrange(rect);
}
return arrangeBounds;
}
And for the animation to work we need a number of dependency properties for the durations
Now, all that is left is just the blinking animation. An obvious choice for
// Using a DependencyProperty as the backing store for OffDuration. This enables animation, styling, binding, etc...
public static readonly DependencyProperty OffDurationProperty;
// Using a DependencyProperty as the backing store for OnDuration. This enables animation, styling, binding, etc...
public static readonly DependencyProperty OnDurationProperty;
// Using a DependencyProperty as the backing store for RiseDuration. This enables animation, styling, binding, etc...
public static readonly DependencyProperty FadeInDurationProperty;
// Using a DependencyProperty as the backing store for DeclineDuration. This enables animation, styling, binding, etc...
public static readonly DependencyProperty FadeOutDurationProperty;
public double OnDuration {
get { return (double)GetValue(OnDurationProperty); }
set { SetValue(OnDurationProperty, value); }
}
public double OffDuration {
get { return (double)GetValue(OffDurationProperty); }
set { SetValue(OffDurationProperty, value); }
}
public double FadeInDuration {
get { return (double)GetValue(FadeInDurationProperty); }
set { SetValue(FadeInDurationProperty, value); }
}
public double FadeOutDuration {
get { return (double)GetValue(FadeOutDurationProperty); }
set { SetValue(FadeOutDurationProperty, value); }
}
static Blink() {
// register dependency properties
OffDurationProperty = DependencyProperty.Register("OffDuration", typeof(double), typeof(Blink), new UIPropertyMetadata(1.0));
OnDurationProperty = DependencyProperty.Register("OnDuration", typeof(double), typeof(Blink), new UIPropertyMetadata(1.0));
FadeInDurationProperty = DependencyProperty.Register("FadeInDuration", typeof(double), typeof(Blink), new UIPropertyMetadata(0.2));
FadeOutDurationProperty = DependencyProperty.Register("FadeOutDuration", typeof(double), typeof(Blink), new UIPropertyMetadata(0.5));
}
thing to animate is
UIElement.OpacityProperty. So that's what I'm using, and to avoid a lot of fuzz with StoryBoards and stuff I set up the animation with the help of a
DoubleAnimationUsingKeyFrames.
// setup the animation
DoubleAnimationUsingKeyFrames animation = new DoubleAnimationUsingKeyFrames();
animation.RepeatBehavior = RepeatBehavior.Forever;
double currentSeconds = 0; // keep track of cumulated time
LinearDoubleKeyFrame start = new LinearDoubleKeyFrame(0,
KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0)));
animation.KeyFrames.Add(start);
currentSeconds += FadeInDuration;
LinearDoubleKeyFrame fadeInFrame = new LinearDoubleKeyFrame(1,
KeyTime.FromTimeSpan(TimeSpan.FromSeconds(currentSeconds)));
animation.KeyFrames.Add(fadeInFrame);
currentSeconds += OnDuration;
LinearDoubleKeyFrame onFrame = new LinearDoubleKeyFrame(1,
KeyTime.FromTimeSpan(TimeSpan.FromSeconds(currentSeconds)));
animation.KeyFrames.Add(onFrame);
currentSeconds += FadeOutDuration;
LinearDoubleKeyFrame fadeOutFrame = new LinearDoubleKeyFrame(0,
KeyTime.FromTimeSpan(TimeSpan.FromSeconds(currentSeconds)));
animation.KeyFrames.Add(fadeOutFrame);
currentSeconds += OffDuration;
LinearDoubleKeyFrame offFrame = new LinearDoubleKeyFrame(0,
KeyTime.FromTimeSpan(TimeSpan.FromSeconds(currentSeconds)));
animation.KeyFrames.Add(offFrame);
Child.BeginAnimation(UIElement.OpacityProperty, animation);
And here is the whole Blink.cs in its entirety once again:
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Markup;
using System.Windows.Media;
using System.Windows.Media.Animation;
namespace BlinkTest {
[ContentProperty("Child")]
public class Blink : Control {
UIElement m_child;
public UIElement Child {
get { return m_child; }
set {
if (m_child != null) {
RemoveVisualChild(m_child);
RemoveLogicalChild(m_child);
}
if ((m_child = value) != null) {
AddVisualChild(m_child);
AddLogicalChild(m_child);
// setup the animation
DoubleAnimationUsingKeyFrames animation = new DoubleAnimationUsingKeyFrames();
animation.RepeatBehavior = RepeatBehavior.Forever;
double currentSeconds = 0; // keep track of cumulated time
LinearDoubleKeyFrame start = new LinearDoubleKeyFrame(0,
KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0)));
animation.KeyFrames.Add(start);
currentSeconds += FadeInDuration;
LinearDoubleKeyFrame fadeInFrame = new LinearDoubleKeyFrame(1,
KeyTime.FromTimeSpan(TimeSpan.FromSeconds(currentSeconds)));
animation.KeyFrames.Add(fadeInFrame);
currentSeconds += OnDuration;
LinearDoubleKeyFrame onFrame = new LinearDoubleKeyFrame(1,
KeyTime.FromTimeSpan(TimeSpan.FromSeconds(currentSeconds)));
animation.KeyFrames.Add(onFrame);
currentSeconds += FadeOutDuration;
LinearDoubleKeyFrame fadeOutFrame = new LinearDoubleKeyFrame(0,
KeyTime.FromTimeSpan(TimeSpan.FromSeconds(currentSeconds)));
animation.KeyFrames.Add(fadeOutFrame);
currentSeconds += OffDuration;
LinearDoubleKeyFrame offFrame = new LinearDoubleKeyFrame(0,
KeyTime.FromTimeSpan(TimeSpan.FromSeconds(currentSeconds)));
animation.KeyFrames.Add(offFrame);
Child.BeginAnimation(UIElement.OpacityProperty, animation);
}
}
}
protected override int VisualChildrenCount {
get { return Child != null ? 1 : 0; }
}
protected override Visual GetVisualChild(int index) {
if (index > 0 || Child == null) throw new ArgumentException("index");
return Child;
}
protected override Size MeasureOverride(Size constraint) {
Size sizeDesired = new Size(0, 0);
if (Child != null) {
Child.Measure(constraint);
}
sizeDesired.Width += Child.DesiredSize.Width;
sizeDesired.Height += Child.DesiredSize.Height;
return sizeDesired;
}
protected override Size ArrangeOverride(Size arrangeBounds) {
if (Child != null) {
Rect rect = new Rect(
new Point((arrangeBounds.Width - Child.DesiredSize.Width) / 2,
(arrangeBounds.Height - Child.DesiredSize.Height) / 2),
Child.DesiredSize);
Child.Arrange(rect);
}
return arrangeBounds;
}
// Using a DependencyProperty as the backing store for OffDuration. This enables animation, styling, binding, etc...
public static readonly DependencyProperty OffDurationProperty;
// Using a DependencyProperty as the backing store for OnDuration. This enables animation, styling, binding, etc...
public static readonly DependencyProperty OnDurationProperty;
// Using a DependencyProperty as the backing store for RiseDuration. This enables animation, styling, binding, etc...
public static readonly DependencyProperty FadeInDurationProperty;
// Using a DependencyProperty as the backing store for DeclineDuration. This enables animation, styling, binding, etc...
public static readonly DependencyProperty FadeOutDurationProperty;
public double OnDuration {
get { return (double)GetValue(OnDurationProperty); }
set { SetValue(OnDurationProperty, value); }
}
public double OffDuration {
get { return (double)GetValue(OffDurationProperty); }
set { SetValue(OffDurationProperty, value); }
}
public double FadeInDuration {
get { return (double)GetValue(FadeInDurationProperty); }
set { SetValue(FadeInDurationProperty, value); }
}
public double FadeOutDuration {
get { return (double)GetValue(FadeOutDurationProperty); }
set { SetValue(FadeOutDurationProperty, value); }
}
static Blink() {
// register dependency properties
OffDurationProperty = DependencyProperty.Register("OffDuration", typeof(double), typeof(Blink), new UIPropertyMetadata(1.0));
OnDurationProperty = DependencyProperty.Register("OnDuration", typeof(double), typeof(Blink), new UIPropertyMetadata(1.0));
FadeInDurationProperty = DependencyProperty.Register("FadeInDuration", typeof(double), typeof(Blink), new UIPropertyMetadata(0.2));
FadeOutDurationProperty = DependencyProperty.Register("FadeOutDuration", typeof(double), typeof(Blink), new UIPropertyMetadata(0.5));
}
}
}
The code was developed on Vista using the RC1 bits of the .NET 3.0 SDK
Technorati tags:
WPF,
XAML
_1098.png){kind=small}
