Spinner

Spinner

A Spinner control is a control that represents a decimal value (like double, only with higher resolution). The control is composed of an edit box and two buttons, for increment and decrement. Let’s try the thing with the 1000 words:

Spinner Properties Every ribbon control has properties that defines the way it looks and behaves. Here is a quick review of spinner properties, divided into logical groups:

Spinner Value Related Properties (with internal details)

• DecimalValue – The actual decimal value of the spinner. Property Identifier: UI_PKEY_DecimalValue

• Increment – The size of the step when pressing on increment / decrement buttons. Property Identifier: UI_PKEY_Increment

• MaxValue – Maximum value that can be set using the spinner control. Property Identifier: UI_PKEY_MaxValue

• MinValue – Minimum value that can be set using the spinner control. Property Identifier: UI_PKEY_MinValue

Spinner Appearance Related Properties

• DecimalPlaces – The number of digits to show after the point. Property Identifier: UI_PKEY_DecimalPlaces

• FormatString – The units of the value. In the previous image, it is “m”, for meters. Property Identifier: UI_PKEY_FormatString

• RepresentativeString – A string that represents the common value for the spinner. This is used to calculate the width of the spinner, so you should set here the longest string you forecast. Note that it doesn’t have to be an actual value, it can be also: “XXXXXXXX”. Property Identifier: UI_PKEY_RepresentativeString

Common Appearance Properties

• Keytip – The keyboard accelerator for this command in the ribbon framework (view it by pressing ALT in a ribbon application). Property Identifier: UI_PKEY_Keytip

• Label – The label for this command. Usually appears next to the attached control. Property Identifier: UI_PKEY_Label

• TooltipTitle – The title of the tooltip for this command. Property Identifier: UI_PKEY_TooltipTitle

• TooltipDescription – The description of the tooltip for this command. Property Identifier: UI_PKEY_TooltipDescription

• Enabled – Flag that indicates whether this control is enabled or not. Property Identifier: UI_PKEY_Enabled

Image Properties

• LargeImage – The large image for this command. Property Identifier: UI_PKEY_LargeImage

• SmallImage – The small image for this command. Property Identifier: UI_PKEY_SmallImage

• LargeHighContrastImage – The large high contrast image for this command. Property Identifier: UI_PKEY_LargeHighContrastImage

• SmallHighContrastImage – The small high contrast image for this command. Property Identifier: UI_PKEY_SmallHighContrastImage

Using Spinner – Ribbon Markup As always, a command should be defined:

<Command Name="cmdSpinner"
         Id="1018"
         LabelTitle="My Spinner">
</Command>

The views section is also simple:

<Application.Views>
  <Ribbon>
    <Ribbon.Tabs>
      <Tab>
        <Group>
          <Spinner CommandName="cmdSpinner" />
        </Group>
      </Tab>
    </Ribbon.Tabs>
  </Ribbon>
</Application.Views>

Using Spinner – Code Behind To help us manipulate the spinner I’ve created a helper class that encapsulates all the work regarding the ribbon framework. To use it, create a RibbonSpinner instance, passing to the constructor the RibbonStrip instance and command ID of the spinner:

partial class RibbonItems
{
    public void Init()
    {

        ButtonDropA.Click += new EventHandler<EventArgs>(_buttonDropA_Click);
        Spinner.RepresentativeString = "2.50 m";
    }

    void _buttonDropA_Click(object sender, EventArgs e)
    {
        InitSpinner();
    }
}

Now you can manipulate the spinner properties easily, by setting them on the _spinner instance, for example:

    private void InitSpinner()
    {
        Spinner.DecimalPlaces = 2;
        Spinner.DecimalValue = 1.8M;
        Spinner.TooltipTitle = "Height";
        Spinner.TooltipDescription = "Enter height in meters.";
        Spinner.MaxValue = 2.5M;
        Spinner.MinValue = 0;
        Spinner.Increment = 0.01M;
        Spinner.FormatString = " m";
        Spinner.Label = "Height:";
    }

Where can we get it? You can find a working sample that demonstrates using a spinner control under sample “05-Spinner”.