Pulsy Button

After much umming and ahhing, and developing several versions of BrokeyButton I have the first cut of the PulsyButton.

What is PulsyButton? Well, it’s a button – that pulses. By pulsing I mean that it ‘pulses’ between the Background colour and a ‘PulseColour’ (that you set!).

Pulsy Button

Easy usage:
<PulsyButton Content="Hello" BackgroundColor="LightGray" PulseColor="Red" IsPulsing="True"/>

Obviously if IsPulsing is set to false then the button won’t pulse.
As it’s just based off the ‘Button’ base class, you can literally insert it wherever you have a Button, and all your styles etc will work fine.

I have plans to add more properties, and will over time:
* PulseTime — A TimeSpan for the pulse.
* PauseTime — A TimeSpan to pause the pulse for, i.e. pulse-paaaaauuuuusssseeeee-pulse etc

Also plans to fix some problems:
* Use StoryBoard and set the Background property directly
* Get rid of BackgroundColor property, so only Background is needed

Erm, can’t think of others at the moment.


Bit more detail -> What have I done?

Well, I had a lot of trouble getting a StoryBoard to work programmatically, I don’t know why, and I will perservere. But in the mean time, I’ve resorted to just a simple ColorAnimation.

How have I used a ColorAnimation with a Background brush?

Well, first I created a DependencyProperty:

public static readonly DependencyProperty BackgroundColorProperty
= DependencyProperty.Register( "BackgroundColor", typeof( Color ), typeof( PulsyButton ),
new UIPropertyMetadata( BackgroundColorChanged ) );

private static void BackgroundColorChanged( DependencyObject d, DependencyPropertyChangedEventArgs e )
{
PulsyButton pb = (PulsyButton) d;
pb.Background = new SolidColorBrush( (Color) e.NewValue );
}

This was my ahem workaround to the setting of the Background property directly, as the ColorAnimation will only animate Color properties (i.e. target the SolidColorBrush.Color property for the brush). By the by, it was the targeting of that property that caused me much hassle.

Anyhews, once we’re there, we should also have a PulseColor property (yes I know colour should have a ‘u’ in it, but I’ve gone all americanized :))

public static readonly DependencyProperty PulseColorProperty
= DependencyProperty.Register( "PulseColor", typeof( Color ), typeof( PulsyButton ),
new UIPropertyMetadata( PulseColorChanged ) );

public Color PulseColor { get { return (Color) GetValue( PulseColorProperty ); } set { SetValue( PulseColorProperty, value ); } }

private static void PulseColorChanged( DependencyObject d, DependencyPropertyChangedEventArgs e )
{
PulsyButton pb = (PulsyButton) d;
pb._pulseAnimation.To = (Color) e.NewValue;
}

Here I’ve included the PulseColor property, rest assured there is a BackgroundColor property as well. So, now we have the two colours to animate between, Background -> Pulse -> Background… We just need to create the animation.

private readonly ColorAnimation _pulseAnimation = new ColorAnimation();

There’s no need to recreate it, so it’s a readonly member. But when do I set this bad boy up? Not the constructor – nooooo, the colour properties won’t have been set up at that point, so I’ve gone for a ‘Loaded’ event consumer.

public PulsyButton()
{
Loaded += PulsyButton_Loaded;
}

private void PulsyButton_Loaded( object sender, RoutedEventArgs e )
{
_pulseAnimation.From = BackgroundColor;
_pulseAnimation.To = PulseColor;
_pulseAnimation.Duration = new Duration( TimeSpan.FromSeconds( 1 ) );
_pulseAnimation.AutoReverse = true;
_pulseAnimation.RepeatBehavior = RepeatBehavior.Forever;


this.BeginAnimation( BackgroundColorProperty, _pulseAnimation );
}

The animation will now begin, and the pulsy fun is nearly there!
But wait… what about turning pulse on/off?

All that is done in the IsPulsingChanged property:

private static void IsPulsingChanged( DependencyObject d, DependencyPropertyChangedEventArgs e )
{
bool isPulsing = (bool) e.NewValue;
PulsyButton pb = (PulsyButton) d;
if( !isPulsing )
{
pb._pulseAnimation.RepeatBehavior = new RepeatBehavior( 0 );
pb.BeginAnimation( BackgroundColorProperty, pb._pulseAnimation );
}
else
{
pb._pulseAnimation.RepeatBehavior = RepeatBehavior.Forever;
pb.BeginAnimation( BackgroundColorProperty, pb._pulseAnimation );
}
}

Now, I’m not 100% sure this is the correct way to do this, in fact I’m certain it’s not. However, it does work, which at the moment is what matters.

So there you have it, a button that pulses.

——————=====================———————–

Can’t attach the code to the post, so gonna have to past it here, sorry!!

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Animation;

public class PulsyButton : Button
{
private readonly ColorAnimation _pulseAnimation = new ColorAnimation();

public readonly DependencyProperty IsPulsingProperty
= DependencyProperty.Register( “IsPulsing”, typeof( bool ), typeof( PulsyButton ),
new UIPropertyMetadata( IsPulsingChanged ) );

public bool IsPulsing
{
get { return (bool) GetValue( IsPulsingProperty ); }
set { SetValue( IsPulsingProperty, value ); }
}

private static void IsPulsingChanged( DependencyObject d, DependencyPropertyChangedEventArgs e )
{
bool isPulsing = (bool) e.NewValue;
PulsyButton pb = (PulsyButton) d;
if( !isPulsing )
{
pb._pulseAnimation.RepeatBehavior = new RepeatBehavior( 0 );
pb.BeginAnimation( BackgroundColorProperty, pb._pulseAnimation );
}
else
{
pb._pulseAnimation.RepeatBehavior = RepeatBehavior.Forever;
pb.BeginAnimation( BackgroundColorProperty, pb._pulseAnimation );
}
}

public static readonly DependencyProperty PulseColorProperty
= DependencyProperty.Register( “PulseColor”, typeof( Color ), typeof( PulsyButton ),
new UIPropertyMetadata( PulseColorChanged ) );

public Color PulseColor { get { return (Color) GetValue( PulseColorProperty ); } set { SetValue( PulseColorProperty, value ); } }

private static void PulseColorChanged( DependencyObject d, DependencyPropertyChangedEventArgs e )
{
PulsyButton pb = (PulsyButton) d;
pb._pulseAnimation.To = (Color) e.NewValue;
}

public Color BackgroundColor
{
get { return (Color) GetValue( BackgroundColorProperty ); }
set { SetValue( BackgroundColorProperty, value ); }
}

public static readonly DependencyProperty BackgroundColorProperty
= DependencyProperty.Register( “BackgroundColor”, typeof ( Color ), typeof ( PulsyButton ),
new UIPropertyMetadata( BackgroundColorChanged ) );

private static void BackgroundColorChanged( DependencyObject d, DependencyPropertyChangedEventArgs e )
{
PulsyButton pb = (PulsyButton) d;
pb.Background = new SolidColorBrush( (Color) e.NewValue );
}

public PulsyButton()
{
Loaded += PulsyButton_Loaded;
}

private void PulsyButton_Loaded( object sender, RoutedEventArgs e )
{
_pulseAnimation.From = BackgroundColor;
_pulseAnimation.To = PulseColor;
_pulseAnimation.Duration = new Duration( TimeSpan.FromSeconds( 1 ) );
_pulseAnimation.AutoReverse = true;
_pulseAnimation.RepeatBehavior = RepeatBehavior.Forever;

this.BeginAnimation( BackgroundColorProperty, _pulseAnimation );
}
}

Invoking UI Changes in WPF

Again another reminder, in WinForms I would have done:

private delegate void UpdateUiTextDelegate(Control control, string text);
private void UpdateUiText(Control control, string text)
{
if(InvokeRequired)
{
Invoke(new UpdateUiTextDelegate(UpdateUiText), new object[] {control, text});
return;
}
control.Text = text;
}

Using the same delegate we need to use the Dispatcher.Invoke method – this is (as far as I’m aware at the moment) the sort-of equivalent of the Invoke method on a Form.


private void UpdateUiText(Control control, string text)
{
if(!Dispatcher.CheckAccess())
{
Dispatcher.Invoke(DispatcherPriority.Send, new UpdateUiTextDelegate(UpdateUiText), control, text);
return;
}
control.Text = text;
}

To be honest, I think I’ve read somewhere that the Dispatcher isn’t equivalent – but it does the job for now… I need to read into it more!

Enabling / Disabling buttons in WPF

I’m really only putting this in to remind myself — having come from a WinForms background, I’m used to:

_btnOK.Enabled = false;

but in WPF this is:

_btnOK.IsEnabled = false;

For some reason I (without fail) forget this!

WPF – working with designers – will it work?

One of the main advantages of WPF is that you can write all the backend code and then shunt the design work to a professional designer – you know – one of those guys who thinks that Cyan and Magenta just don’t go together.

I’ve been knocking up a couple of WPF apps in the past month or so and have some very basic Windows pieced together. The app basically works, and now I’m looking at passing the XAML to the designer to get her to make it look good. It’s kind of exciting – I’m really interested to see what she’ll come up with – given free reign and a package hopefully allowing her to do what she wants.

She’ll be predominantly using Expression Blend (and presumably Photoshop) to do the design work. I guess my only reservation is that designing an application where you can use timelines etc is a different kettle of fish to a website, and I hope that we can work together to put some of the cooler WPF stuff into the app.

The other concern is how it will work – should I just give her a document detailing the data that needs to be represented and let her make the window up as she likes, or should I knock up a basic window and then she can just rip it apart etc (again as she likes)…??

I’ll try to blog more when I know how the process is going to go and keep up to date on how it is actually going.

Here’s going forward optimistically!

WPF Resources from other DLL’s

I spent a little bit of time trying to figure this out, to be honest – it’s available in quite a few locations on google, but I thought I’d add it here as well. The basic problem is, you have your template / theme etc for your control in a separate project;

MyThemes : DateTimeThemes/Theme1.xaml etc

and you want to use this as a resource for your control, how?

You add into your Resources element (be it in Window.Resources or UserControl.Resources), like so:

<ResourceDictionary Source="/MyThemes;component/Themes/Theme1.xaml" />

What’s important here is that the word ‘component’ is as spelt, you don’t replace it with anything (like ‘MyComponent’ for example), just leave it as is.

/MyThemes

is the name of the dll, which isn’t necessarily the name of the project – (though that would only change if you’ve changed those properties).

WPF Image Rendering on Headers

I’ve been having a little bit of trouble lately with WPF, in particular the rendering of an image on the header of the TabItem or GroupBox headers (for example), I have the following code:


<GroupBox>
<GroupBox.Header>
<Image Source=”./Images/MyImage.png”/>
</GroupBox.Header>
</GroupBox>

Which renders fine in Visual Studio, but the minute I run the app – F5ing – The image isn’t displayed.

It took me a while to figure out – even though the image is in the right location, it’s not actually part of the solution, i.e. I hadn’t added it to the Images folder of the solution. When added there (so it was visible in the solution explorer), happy days!