Introduction to custom designers

Yogev Cohen is writing a series about creating your own custom designers, which is useful if your create control libraries or you are just intrigued about how this things work.

1. Create your own Designer or Introduction To Custom Designers – Part 1- Designer
2. Create your own Designer or Introduction To Custom Designers – Part 2- UI, Glyphs

And he had promise me to post about custom designer for WPF controls in the future!!

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>