Click here to Skip to main content
14,637,033 members
Articles » Desktop Development » Button Controls » General
Posted 1 Jun 2015


23 bookmarked

Pulse Button (WPF)

Rate this:
4.81 (17 votes)
Please Sign up or sign in to vote.
4.81 (17 votes)
1 Jun 2015CPOL
Custom button as rectangle or ellipse that emits pulses


This article demostrates how to make a button that emits pulses in .NET 4.5 WPF (C#).
Also available as NuGet package.

Image 1


I made a similar control in .NET 2.0 in 2009 using WinForms and for some time, I wanted to make the same in WPF.
After cracking the initial challenge of structuring the control, everything went smoothly and I managed to add some additional features.

The Button Layout

The basic button layout, shown below:

Image 2


The control is built using a gradient ellipsis as basis with a semitransparent stroke as border.
The reflex is created as a second ellipsis on top of the button where its fill area is indicated with the large bounding box around the semitransparent white area.
The text is just a content presenter on top.

The pulses are animated ellipsis placed under the button.

Here is the markup (XAML) to produce the control:

<Grid x:Name="PART_body" Background="{TemplateBinding Background}">
    <!-- Pulse Container -->
    <Grid x:Name="PART_pulse_container" />
    <!-- Button -->
    <Ellipse x:Name="PART_button" Stroke="#60000000" StrokeThickness="2"
             Fill="{TemplateBinding ButtonBrush}"/>
    <!-- Focus visual -->
    <Ellipse x:Name="PART_focus_visual" IsHitTestVisible="False"
               Stroke="{TemplateBinding ButtonHighlightBrush}"
               StrokeDashArray="1 2"
               Fill="Transparent" Margin="2"
               Visibility="{TemplateBinding IsFocused,
                           Converter={StaticResource BoolToVisibilityConverter}}" />
    <!-- Reflex -->
    <Ellipse x:Name="PART_reflex" IsHitTestVisible="False"
             Visibility="{TemplateBinding IsReflective,
                         Converter={StaticResource BoolToVisibilityConverter}}">
            <RadialGradientBrush RadiusX="2.6" RadiusY="2.05" Center="0.5,-1.5"
                    <GradientStop Color="White" Offset="0"/>
                    <GradientStop Color="#60FFFFFF" Offset="0.4"/>
                    <GradientStop Color="#30FFFFFF" Offset="0.995"/>
                    <GradientStop Color="#00FFFFFF" Offset="1"/>
    <!-- Content presenter -->
    <ContentPresenter IsHitTestVisible="False"
                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />

The Button States

The button states are shown below (except pulsing and highlight with focus):

Image 4

The states are mainly set using ControlTemplate triggers. The markup (XAML) for handling the triggers is shown below:

<!-- ControlTemplate Triggers -->
    <Trigger Property="IsMouseOver" Value="True" SourceName="PART_button">
        <Setter Property="Fill" TargetName="PART_button"
                Value="{Binding Path=ButtonHighlightBrush,
                RelativeSource={RelativeSource AncestorType={x:Type local:PulseButton}}}" />
        <Setter Property="Stroke" TargetName="PART_focus_visual" Value="Black" />
    <Trigger Property="IsPressed" Value="True">
        <Setter Property="Fill" TargetName="PART_button"
                Value="{Binding Path=ButtonPressedBrush,
                RelativeSource={RelativeSource AncestorType={x:Type local:PulseButton}}}" />
    <Trigger Property="IsEnabled" Value="False">
        <Setter Property="Fill" TargetName="PART_button"
                Value="{Binding Path=ButtonDisabledBrush,
                RelativeSource={RelativeSource AncestorType={x:Type local:PulseButton}}}" />
        <Setter Property="Foreground" Value="DimGray" />
        <Setter Property="IsPulsing" Value="False" />
        <Setter Property="Visibility" TargetName="PART_reflex" Value="Hidden" />

The Code

The button consists of a single button class with a corresponding Style. The properties and methods for the PulseButton class are shown below:

Image 5

The corresponding Style is shown below:

<!-- PulseButton Style -->
<Style TargetType="{x:Type local:PulseButton}">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Foreground" Value="Black"/>
    <Setter Property="ClipToBounds" Value="False"/>
    <Setter Property="HorizontalContentAlignment" Value="Center" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="IsReflective" Value="True"></Setter>
    <Setter Property="Template" Value="{StaticResource RectangleTemplate}" />
    <Setter Property="FocusVisualStyle" Value="{x:Null}" />
        <Trigger Property="IsEllipsis" Value="True">
            <Setter Property="Template" Value="{StaticResource EllipseTemplate}" />

The style has a trigger that will reference different templates depending on the property IsEllipsis.
Setting the IsEllipsis to true will let the control render an ellipsis instead of a rectangle.

The style is referenced in the static constructor of the PulseButton control:

static PulseButton()
               new FrameworkPropertyMetadata(typeof(PulseButton)));

It is possible to reference the style directly in the constructor but the code above lets you change the style using the BasedOn property.

Setting Up the Pulses

The pulses are shape(s) with animations of the scale and the opacity.
For each of the properties that affect the pulses, the method PulsesChanged is called.
The method will recalculate the pulses and set up the animation, see the method below:

/// <summary>
/// Pulses changed.
/// </summary>
/// <param name="d">The d.</param>
/// <param name="e">The <see cref="DependencyPropertyChangedEventArgs"/>
/// instance containing the event data.</param>
private static void PulsesChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
  var pb = (PulseButton)d;
  if (pb == null || pb.partPulseContainer == null || !pb.IsPulsing) return;
  // Clear all pulses
  var items = pb.Pulses;
  // Add pulses
  for (var i = 0; i < items; i++)

    var shape = pb.IsEllipsis ?
      (Shape)new Ellipse
                StrokeThickness = pb.PulseWidth,
                Stroke = pb.PulseColor,
                RenderTransformOrigin = new Point(0.5, 0.5)
              } :
      new Rectangle
        RadiusX = pb.RadiusX,
        RadiusY = pb.RadiusY,
        StrokeThickness = pb.PulseWidth,
        Stroke = pb.PulseColor,
        RenderTransformOrigin = new Point(0.5, 0.5)
  // Set animations

The animations of each individual pulse is done in the method SetStoryBoard:

/// <summary>
/// Sets the story board for the pulses
/// </summary>
/// <param name="pb">The pb.</param>
private void SetStoryBoard(PulseButton pb)
  double delay = 0;

  // Correct PulseScale according to control dimensions
  double correctedFactorX = pb.PulseScale, correctedFactorY = pb.PulseScale;
  if (pb.IsMeasureValid)
    if (pb.ActualHeight < pb.ActualWidth)
      correctedFactorY = (pb.PulseScale - 1) * ((pb.ActualWidth - pb.ActualHeight) /
                         (1 + pb.ActualHeight)) + pb.PulseScale;
      correctedFactorX = (pb.PulseScale - 1) * ((pb.ActualHeight - pb.ActualWidth) /
                         (1 + pb.ActualWidth)) + pb.PulseScale;
  // Add pulses
  foreach (Shape shape in pb.partPulseContainer.Children)
    shape.RenderTransform = new ScaleTransform();
    // X-axis animation
    var animation = new DoubleAnimation(1, correctedFactorX, pb.PulseSpeed)
                      RepeatBehavior = RepeatBehavior.Forever,
                      AutoReverse = false,
                      BeginTime = TimeSpan.FromMilliseconds(delay),
                      EasingFunction = pb.PulseEasing
    // Y-axis animation
    var animation2 = new DoubleAnimation(1, correctedFactorY, pb.PulseSpeed)
                       RepeatBehavior = RepeatBehavior.Forever,
                       AutoReverse = false,
                       BeginTime = TimeSpan.FromMilliseconds(delay),
                       EasingFunction = pb.PulseEasing
    // Opacity animation
    var animation3 = new DoubleAnimation(1, 0, pb.PulseSpeed)
      RepeatBehavior = RepeatBehavior.Forever,
      AutoReverse = false,
      //EasingFunction = new QuarticEase { EasingMode = EasingMode.EaseIn },
      BeginTime = TimeSpan.FromMilliseconds(delay)
    // Set delay between pulses
    delay += pb.PulseSpeed.TimeSpan.TotalMilliseconds / pb.Pulses;
    // Create storyboard
    var storyboard = new Storyboard();
    Storyboard.SetTarget(animation, shape);
    Storyboard.SetTarget(animation2, shape);
    Storyboard.SetTarget(animation3, shape);
    if (pb.IsEllipsis)
                 new PropertyPath("(Ellipse.RenderTransform).(ScaleTransform.ScaleX)"));
                 new PropertyPath("(Ellipse.RenderTransform).(ScaleTransform.ScaleY)"));
                 new PropertyPath("(Ellipse.Opacity)"));
                 new PropertyPath("(Rectangle.RenderTransform).(ScaleTransform.ScaleX)"));
                 new PropertyPath("(Rectangle.RenderTransform).(ScaleTransform.ScaleY)"));
                 new PropertyPath("(Rectangle.Opacity)"));
    // Start storyboard

The correctedFactor is needed to let the pulses spread out from the control evenly.


Here are some samples on how to use the control.

<!-- START button -->
<controls:PulseButton Margin="30"
                      ButtonBrush="{StaticResource RedButtonBrush}"
                      ButtonHighlightBrush="{StaticResource ButtonHighlightBrush}"
                      ButtonPressedBrush="{StaticResource RedButtonPressedBrush}"

<!-- Default button -->
<controls:PulseButton IsEllipsis="False" Margin="30,30,53,30"
                      Content="Default" />

Remember to add a reference to the control in the App.xaml like this:

<Application x:Class="PulseControlTest.App"



                <ResourceDictionary Source="/PulseButton;component/Themes/Generic.xaml" />

Additional Feature

It is possible to add an EasingFunction to the control. For possible easing functions, see here.

The example below shows how to add a QuadraticEase to the PulseEasing property:

<!-- Easing in -->
<controls:PulseButton IsEllipsis="True" Margin="30"
                      Content="Easing in"
                      PulseEasing="{StaticResource EasingIn}"

Where EasingIn is placed in resources of the window or application:

<!-- Easing functions -->
<QuadraticEase x:Key="EasingIn" EasingMode="EaseIn" />

The example looks like this, where the pulses accelerate towards the edges.

Image 6


  • 1.0.3 Bug fix
  • 1.0.2 The style is changed, IsHitTestVisible set to false on Grid
  • 1.0.1 The property IsHitTestVisible set to false on pulses (Nuget also updated)
  • 1.0.0 The initial version


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Niel M.Thomas
Denmark Denmark
Name: Niel Morgan Thomas
Born: 1970 in Denmark
Dataengineer from Odense Technical University.
More than 20 years in IT-business.
Current employment:
Working with application development in a major Danish company that produce medical equipment.

Comments and Discussions

Generalvery nice Pin
BillW3320-Jul-15 11:19
professionalBillW3320-Jul-15 11:19 
Questionreponse on mouse click Pin
abcque9-Jul-15 3:06
Memberabcque9-Jul-15 3:06 
AnswerRe: reponse on mouse click Pin
Niel M.Thomas9-Jul-15 7:37
professionalNiel M.Thomas9-Jul-15 7:37 
GeneralMy vote of 5 Pin
Simon Gulliver9-Jun-15 1:14
professionalSimon Gulliver9-Jun-15 1:14 
QuestionPulses on click Pin
Flem100DK7-Jun-15 0:52
MemberFlem100DK7-Jun-15 0:52 
AnswerRe: Pulses on click Pin
Niel M.Thomas7-Jun-15 9:50
professionalNiel M.Thomas7-Jun-15 9:50 
GeneralRe: Pulses on click Pin
Flem100DK7-Jun-15 11:17
MemberFlem100DK7-Jun-15 11:17 
GeneralRe: Pulses on click Pin
Niel M.Thomas7-Jun-15 20:25
professionalNiel M.Thomas7-Jun-15 20:25 
Thanks, the Grid has it's IsHitTestVisible set to true by default.
I have updated the code & package.
With Regards


modified 8-Jun-15 2:41am.

QuestionHow about windows store version? Pin
ReverseBlade5-Jun-15 3:18
MemberReverseBlade5-Jun-15 3:18 
AnswerRe: How about windows store version? Pin
Niel M.Thomas7-Jun-15 9:52
professionalNiel M.Thomas7-Jun-15 9:52 
GeneralMy vote of 5 Pin
Flem100DK2-Jun-15 22:32
MemberFlem100DK2-Jun-15 22:32 
GeneralUseful to focus the users attention on the next step in a procedure or for alerts. Pin
mwdoty2-Jun-15 9:31
Membermwdoty2-Jun-15 9:31 
QuestionWhat business application would this button be used for? Pin
Slacker0071-Jun-15 14:53
professionalSlacker0071-Jun-15 14:53 
AnswerRe: What business application would this button be used for? Pin
Niel M.Thomas1-Jun-15 19:10
professionalNiel M.Thomas1-Jun-15 19:10 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.