XAML Wonderland

Synopsis:  The WPF/Silverlight TextBox control lacks the TextTrimming property. Use a control template to add TextTrimming to TextBox.

Want more Silverlight tips and tricks? Watch my Silverlight 5 Essential Training course

We’ve all encountered the textbox that is too narrow to hold the text contents.  Here’s an example from Visual Studio 2010

Figure 01: Visual Studio Dialog

The default behavior of the textbox is to truncate the text.  There is no visual feedback to the user that there is more text available, other than the textual context.  In other words, it is up to the user, to perceive that there is additional text that is not visible in the control

Text Trimming

One common solution, in UI circles, is to add ellipses (…) to the end of content shown in the text control.  In WPF and Silverlight 4 the TextBlock control has a TextTrimming property which handles this chore for you.

<TextBlock TextTrimming='CharacterEllipsis'
           Text='To Do:  Learn Win8 Metro'
           Width='98' />

Let’s look at a few examples.

Figure 02: Text controls with adequate room

Figure 03: Text controls with limited width

In Figure 02, the TextBox (A) and TextBlock  have plenty of room for the text.  In Figure 03, the text controls are too narrow.   As you can see the TextBlock (E) is showing the ellipses.

Fixing the TextBox control

The TextBox does not have the TextTrimming property.  In many situations, that is not a problem because you can use the TextWrapping property.   When a TextBox is limited to a narrow width, you can increase the control height, set  the VerticalScrollBarVisibility to Auto and enable TextWrapping. 

But there will be times when you are stuck with limited width and height for your TextBox.  In those scenarios, it would be nice to have TextTrimming available.

The solution below uses as control template.  When the TextBox has the focus, it’s a normal TextBox.  When it doesn’t have focus it is rendered as at TextBlock with TextTrimming enable.  The template also uses a Border around the TextBlock.  This keeps it looking like a TextBox when. I’ve also set the Background of the Border to a light gray color, to make it easier to see in the screen shots. 

 <Grid.Resources>
      <Style TargetType="TextBox"
             x:Key='TrimmingStyle'>
        <Style.Triggers>
          <DataTrigger Binding="{Binding IsKeyboardFocused, RelativeSource={RelativeSource Self}}"
                       Value="false">
            <Setter Property="Template">
              <Setter.Value>
                <ControlTemplate TargetType="TextBox">
                  <Border BorderThickness='1'
                          Background='#ffefefef'
                          BorderBrush='LightBlue'>
                    <TextBlock Text="{TemplateBinding Text}"
                               TextTrimming="CharacterEllipsis"
                               Margin='4,1' />
                  </Border>
                </ControlTemplate>
              </Setter.Value>
            </Setter>
          </DataTrigger>
        </Style.Triggers>
      </Style>

    </Grid.Resources>

...
 <TextBox Style='{StaticResource TrimmingStyle}'
           Width='297'
           Text='Pixel Shaders are one of the more powerful graphic tools ' />
<TextBox Style='{StaticResource TrimmingStyle}' 
          Width='297' 
          Text='Shader development is a very different from working in XAML' />
 

Screenshots

Figure 04:  Focus in the top TextBox

Figure 05:  Focus in the bottom TextBox.

Want more Silverlight tips and tricks? 
Watch my Silverlight 5 Essential Training course.