Smart Text Box

It is a TextBox, so TextBox.Text, binding, validation and the keyboard all work as usual; it adds four things.

• A watermark. WatermarkContent – "Search orders", "Customer reference" – is shown in grey while the box is empty and does not have the focus.
• A clear button. A small "X" at the right-hand end empties the box with one click. It is shown while there is text to clear (IsClearTextVisualRenderingFeatureEnabled, IsClearTextVisualAlwaysVisible), and can show any content (ClearTextVisualContent).
• An alert flag. With IsAlertClueImageRenderingEnabled on, a small picture sits over the box's top right corner: AlertClueImageSourceOnError while the box is empty, AlertClueImageSource once something has been entered – a red flag that turns to a green tick on a required field.
• An input filter. DataEntryMode can limit the box to the digits 0 to 9, or refuse whatever a regular expression of your own matches (DisallowedInputRegularExpression). The filter applies to typing and to pasting; a paste holding anything that would be refused is refused whole.

The colours of the watermark, the clear button and the border come from the theme; while a Binarymission skin is applied through BinarySkinManager it supplies them, and a brush set on the box itself still wins.

A required reference field and a quantity field. The assembly is Binarymission.WPF.Controls.SmartTextBox.

<Window x:Class="Orders.NewOrderWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:smart="clr-namespace:Binarymission.WPF.Controls.InputControls;assembly=Binarymission.WPF.Controls.SmartTextBox"
        Title="New order" Width="420" Height="200">

    <Window.Resources>
        <BitmapImage x:Key="RequiredFlag" UriSource="/Images/Required.png" />
        <BitmapImage x:Key="DoneTick" UriSource="/Images/Done.png" />
    </Window.Resources>

    <StackPanel Margin="16">
        <smart:SmartTextBox Width="240" Height="26" HorizontalAlignment="Left"
                            WatermarkContent="Customer reference"
                            Text="{Binding CustomerReference, UpdateSourceTrigger=PropertyChanged}"
                            DataEntryMode="None"
                            DisallowedInputRegularExpression="[^A-Za-z0-9-]"
                            IsAlertClueImageRenderingEnabled="True"
                            AlertClueImageSourceOnError="{StaticResource RequiredFlag}"
                            AlertClueImageSource="{StaticResource DoneTick}"
                            AlertFlagToolTipContent="A customer reference is required." />

        <smart:SmartTextBox Width="100" Height="26" Margin="0,12,0,0" HorizontalAlignment="Left"
                            WatermarkContent="Quantity"
                            DataEntryMode="NumericOnly" />
    </StackPanel>
</Window>