DataGrid text wrapping

Hello

I wonder what the easiest way set the textwrapping behavior of the datagridcells.

Best regards
Nicklas

Hi Nicklas,

The easiest way is to override the default DataGrid cell content templates. Here's a simple example that will apply a custom display template to simple text cells. In a resource dictionary add the following template:

<DataTemplate x:Key="DisplayTemplate">
  <TextBlock Padding="3,4,0,4" Margin="0,0,2,0" Text="{Binding}" VerticalAlignment="Center" TextWrapping="WrapWithOverflow" />
</DataTemplate>

Note that in this template I am enabling text wrapping. Next, set the BuiltInDisplayTemplates property of the DataGrid like this:

<ms:DataGrid.BuiltInDisplayTemplates>
  <ms:BuiltInDisplayTemplateCollection>
    <ms:BuiltInDisplayTemplate EditorKey="{x:Static ms:PropertyGrid.SimpleTextEditorKey}" Template="{StaticResource DisplayTemplate}" />
  </ms:BuiltInDisplayTemplateCollection>
</ms:DataGrid.BuiltInDisplayTemplates>

This maps the SimpleTextEditorKey to that custom display template. What this means is that ANY cell marked with the SimpleTextEditorKey will use your custom template in display-mode. This cell key is generally used for string properties. You can also move this BuiltInDisplayTemplates code into a DataGrid style so that you can apply the same custom templates to any DataGrids.

One thing to note is that since BuiltInDisplayTemplates is a collection, setting this property overrides all built in display templates. Date times for example will now just be displayed in a simple unformatted default TextBlock. To resolve, this, you'll need to provide custom templates (or templates included with WPF Elements) to all available cell keys. I recommend having a look at one of the provided themes such as OfficeBlue.DataGrid.xaml (found in the install directory of WPF Elements).

You'll also probably want to have a look at providing custom editor templates with text wrapping too. Examples of editor templates can also be found in the provided DataGrid themes.

Please let me know if you have further questions about this.

-Jason Fauchelle

Hello

This seems to work but there are some issues.

I've emailed you a repro project that demonstrates what I mean.

If you have a large number of columns and only one of the columns in the beginning has textwrapping and you scroll to the right so that the mentioned column is not visible any more the datagrid will adjust the height of all the rows. Also, if you click on the horizontal scrollbar so it "jumps" to the right. The datagrid will not enough rows to fill up the whole datagrid. The same thing can happen if you change the sort order of the mentioned column be clicking on the header multiple times in a row (4-5 times).

I've described the workflow in the repro project as well.

Best regards
Nicklas

Hi Nicklas,

Thanks for the repro project. The row height changing when scrolling horizontally is caused by virtualization - the DataGrid only renders what's in the viewport, and so all the measure logic is only based on what's in the viewport too. It will be difficult to provide an option to disable column virtualization, so we don't plan on doing this in the near future.

I have resolved the bug regarding not filling up the viewport with rows when the viewport suddenly shifts, or when the rows are sorted. This fix will be available in the next nightly build.

-Jason Fauchelle