Блог Сергея Пугачёва

Ещё одна возможность, доступная ранее только в WPF, теперь появилась и в Silverlight 4. Я имею в виду обрезание текста или Text Trimming.

Часто бывает, что у нас есть ограниченная область для текста, без возможности прокрутки. Если текст в данную область не помещается, то он обрезается, но выглядит это не очень красиво, так как текст может обрезаться, например, посередине буквы.

Вместо этого хочется, чтобы отображалась только та часть текста, которая помещается на экране и многоточие «…», говорящее о том, что не весь текст отображён. Раньше достичь такого поведения было трудно, требовалось делать много работы вручную. Теперь же у элемента управления TextBlock есть свойство TextTrimming, которое надо установить в значение «WordEllipsis»:

<TextBlock Text="Длинный текст о чём-то важном"
  Width="160" TextTrimming="WordEllipsis">
</TextBlock>

* This source code was highlighted with Source Code Highlighter.

Выглядеть текст будет следующим образом:

И даже, если мы увеличим размер шрифта, всё будет работать корректно:

Теперь представьте, что Вы работаете с DataGrid. Вот так выглядит типичный DataGrid c длинными текстовыми данными без TextTrimming:

А теперь добавим TextTrimming:

Приведу описание колонок для данного DataGrid:

<data:DataGrid AutoGenerateColumns="False" ItemsSource="{Binding Collection}" >
  <data:DataGrid.Columns>
    <!--Id Column-->
    <data:DataGridTextColumn Binding="{Binding Id}" Header="Id" Width="35"/>
    <!--Name Column-->
    <data:DataGridTemplateColumn Header="Name" Width="100">
      <data:DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
          <TextBlock Text="{Binding Name}" TextTrimming="WordEllipsis"></TextBlock>
        </DataTemplate>
      </data:DataGridTemplateColumn.CellTemplate>
    </data:DataGridTemplateColumn>
    <!--Description Column-->
    <data:DataGridTemplateColumn Header="Description" Width="*">
      <data:DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
          <TextBlock Text="{Binding Description}" TextTrimming="WordEllipsis"></TextBlock>
        </DataTemplate>
      </data:DataGridTemplateColumn.CellTemplate>            
    </data:DataGridTemplateColumn>        
  </data:DataGrid.Columns>
</data:DataGrid>

* This source code was highlighted with Source Code Highlighter.

Источник: Silverlight 4 Text Trimming [en]