WPF SpinnerButton
As a part of Visual Studio
2010, Windows Presentation Foundation (WPF) does not have a Spin Button. A Spin
Button is a control that has a value and by clicking up and down arrows, the
value changes to the previous and next values.
The ButtonSpinner control comes with the WPF Toolkit
Extended provides an alternative to a spin button. The WPF SpinnerButton
control allows us to add a spinning feature to any element. This article
demonstrates how to use the ButtonSpinner control in a WPF application using C# and XAML.
Adding Reference to WPF Toolkit
Extended Assembly
The ButtonSpinner control
is a part of the WPF Toolkit Extended and does not come with Visual Studio
2010. To use the ButtonSpinner control in your application, you must add
reference to the WPFToolkit.Extended.dll assembly. You can download Extended
WPF Tookit from the CodePlex or you can use the WPFToolkit.Extended.dll
available with this download. All you need is the DLL. See Downloads section of
this article. You can find more details in my blog Adding
Reference to WPF Toolkit Extended.
Creating a ButtonSpinner
The ButtonSpinner
control allows you to add a spinner button to any WPF element. A typical
spinner button looks like Figure 1. The content area is used to display some
content. The up and down arrow is used to move up and down.
Listing 1 creates a
simple ButtonSpinner control. The Content property is used to display a value
in the control.
<wpfx:ButtonSpinner Name="SpinButton" Margin="149,10,247,0" Height="30"
Content="10" />
Listing 1
The output of Listing 1 looks
like Figure 1.
Figure 1
Spin Event
The Spin event is fired when the up and down arrows are
clicked. Listing 2 creates a ButtonSpinner.
<wpfx:ButtonSpinner Name="SpinButton" Margin="149,10,247,0" Height="30"
Spin="SpinButton_Spin"
Content="10"
FontFamily="Georgia" FontSize="16" FontWeight="Bold"
Foreground="Green" Background="Orange"
/>
Listing 2
Listing 2 creates Figure 5.
Figure 2
The Spin event is used to changing the value of the content
part of the ButtonSpinner control. This content can be anything, a number, text
or whatever else you want. Only thing you need to take care is, on the Spin
event handler, set the value.
The code listed in Listing 3 reads the content of the
control and converts it to an integer. The Direction property of the
ButtonSpinner control decides if up or down arrow is clicked.
private void
SpinButton_Spin(object sender, SpinEventArgs e)
{
ButtonSpinner spinner = (ButtonSpinner)sender;
string currentSpinValue = (string)spinner.Content;
int currentValue = String.IsNullOrEmpty(currentSpinValue)
? 0 : Convert.ToInt32(currentSpinValue);
if (e.Direction == SpinDirection.Increase)
currentValue++;
else
currentValue--;
spinner.Content = currentValue.ToString();
}
Listing 3
Summary
In this article, I discussed how we can use a ButtonSpinner
control in a WPF
application using C# and XAML.