Numeric TextBox Control Similar to MS Expression Blend

I wanted to create a control like the Numeric Value Editor found in Microsoft Expression Blend which allows you to change the value by dragging the mouse. You can download the source code here (note: change the .doc extension to .zip before extracting the source)

I found that is quite easy, first you need to create a custom control that contains all the increment parameters, described below, the actual value and code to handle the mouse events.

The control exposes the following properties:

1. Value – The actual value.
2. SmallChange – Small change increments done by dragging the mouse and pressing the CTRL key.
3. DefaultChange - Default change increments done by just dragging the mouse.
4. LargeChange – Large change increments done by dragging the mouse and pressing the Shift key.
5. Minimum - Lower bound of the value.
6. Maximum - Upper bound of the value.
7. MaxPrecision - Number of digits after the decimal point.

For the control appearance you need to create a Template Style. Below there is an example of a template that contains a TextBox, a Rectangle for the dragging area and a property triggers to change the cursor to notify the user that dragging is available.

<Style x:Key="NumricEditorStyle" TargetType="{x:Type ValueEditorSample:ValueEditor}">   <Setter Property="Template">   <Setter.Value>   <ControlTemplate TargetType="{x:Type ValueEditorSample:ValueEditor}">   <Grid>   <Grid.ColumnDefinitions>   <ColumnDefinition Width="0.5*"/>   <ColumnDefinition />   </Grid.ColumnDefinitions> <TextBox x:Name="PART_EDITOR" Text="{Binding Path=Value, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Grid.ColumnSpan="2"/>   <Rectangle x:Name="PART_DRAGGER" Stroke="Transparent" Fill="Transparent" />   </Grid>   <ControlTemplate.Triggers>   <Trigger Property="IsMouseOver" Value="True" SourceName="PART_DRAGGER">   <Setter Property="Cursor" Value="SizeAll"/>   </Trigger>   <Trigger Property="IsDragging" Value="True">   <Setter Property="Cursor" Value="SizeAll"/>   </Trigger>   </ControlTemplate.Triggers>   </ControlTemplate>   </Setter.Value>   </Setter>  </Style>