Excel cell behavior for WPF TextBox

Excel cells have a very special and useful behavior that they become editable as soon as it gets selected but it doesn’t changes its visual appearance i.e. caret doesn’t becomes visible. User can start typing into it or use Enter or Arrow keys to move around, caret becomes visible as soon as user starts typing into it.

In one of my applications client wanted to have the same behavior for the editable controls in ListView, DataGrid etc.; implementing this behavior was not easy as there can be different types of controls like NumericUpDown, TextBox, DatePicker etc. present in a particular ListView row or DataGridCell. Fortunately WPF provides a magical feature called Attached properties which becomes really useful in such scenarios. So I created a behavior called ExcelCellBehavior for TextBox, this behavior makes a TextBox behave similar to an Excel cell.

Here is the list of features which we want to achieve through this behavior -

  1. TextBox becomes editable as soon as it gets focus. Although its editable, visually it remains un-editable i.e. caret is not visible.
  2. Although focus is with TextBox user should be able use Enter or Arrow keys to move around.
  3. Old text is deleted when user starts typing new value.
  4. TextBox reverts to Excel cell mode if user presses Esc key(while in edit mode).

Challenges in achieving above behavior -

  1. Hiding the caret even when TextBox is having focus and is editable.
    • This can be achieved by changing the CaretBrush to Transparent, so caret is present but transparent.
  2. Allowing user to use Enter and Arrow keys.
    • This one is rather easy, we just need to handle these keys and ignore them.
  3. Implementing the 3’rd requirement is toughest, to achieve this we need to select all the text in TextBox when it gets focus but keep it unselected visually. To make the selection invisible we need to change the highlighted text color of TextBox, but till .NET 3.5 it was not possible to change it.
    • From .NET4.0 onwards it’s possible to change the BackGround of selected text using SelectionBrush.
  4. Another challenge we have is to revert between Excel Mode and normal mode i.e. editable with visible caret and normal selection background.
    • To achieve this we need to save the initial state of TextBox and use it when required.

Code for this behavior is attached in the post and it can easily be used like this -

<TextBox
    WpfBehaviors:ExcelCellBehavior.Active="True">
</TextBox>

Using ExcelCellBehavior with DatePicker:  This behavior can be used with DatePicker controls like this -

<DatePicker
    HorizontalAlignment="Stretch"
    HorizontalContentAlignment="Stretch"
    VerticalContentAlignment="Center"
    SelectedDateFormat="Short">
    <DatePicker.Resources>
        <Style TargetType="{x:Type DatePickerTextBox}">
            <Setter Property="WpfBehaviors:ExcelCellBehavior.Active=" Value="true" />
        </Style>
    </DatePicker.Resources>
</DatePicker>

 

 

No Comments

Add a Comment

As it will appear on the website

Not displayed

Your website