How get a WPF Datagrid with cells that wrap text instead of truncating it?

Question

What must be done to get a WPF DataGrid with cells that wrap text instead of truncating it?

Right now when a text is bigger and don't fit in a column the text is truncated and users can't see it value cos the DataGrid's IsReadOnly property is true. What I want is that the text in cells be wrapped and the cell height (NO CELL WIDTH) increased the amount needed to show all the text.

Kildare

Answer 1

You could try to template the cells with a TextBlock which has text-wrapping enabled.

Backup

Thanks a lot. Already solved the problem with styles. I mean, setting the ElementStyle property of the DataGridTextColumn to something that have a setter like "<Setter Property="TextBlock.TextWrapping" Value="Wrap" />". Seem to me that is better changes the style of a control as a way to customize the control instead to rewrite its template. Anyway, I'm open to suggestions, cos I'm newbie in WPF. My problem was that I just can't apply an style ala TargetType cos seem that in some way the TextBlock have an style specified that overwrite the ala TargetType styles applied. Thanks again. – Kildare

Using a style for that is quite a good idea, don't think there is any better solution (at least for this specific case) – Backup

The problem is when using a templated column that you loose basic functionality like copying the text. I'm currently facing this problem and will use a style instead. – Benedikt

Answer 2

Thanks for your help @H.B., this did the trick for me (alignment is optional):

<DataGrid.Columns>               
    <DataGridTextColumn Header="Wrapped & centered" Binding="{Binding field}">
        <DataGridTextColumn.ElementStyle>
             <Style>                            
                 <Setter Property="TextBlock.TextWrapping" Value="Wrap" />
                 <Setter Property="TextBlock.TextAlignment" Value="Center"/>
             </Style>
         </DataGridTextColumn.ElementStyle>
    </DataGridTextColumn>
</DataGrid.Columns>

Akkerman

For others: If this solution isn't working for you, try adjusting the column width. It will try to expand the column width before it will begin to wrap the text. – Humeral

Adjust the width in what way? I'm trying out the code here, but it appears no different in the WPF designer in Visual Studio. – Drumstick

Set the Width property on the DataGridTextColumn like: <DataGridTextColumn Header="Wrapped & centered" Binding="{Binding field}" Width="200"> – Bagwig

You can do Width="*" which will set it to fill out the entire space, but no larger than you container will allow. – Diffluent

Thanks to @Anthony Nichols, because without setting Width="*" it don't works. Moreover setting TextBlock.TextAlignment is unnecessary. Regards. – Jacket

Answer 3

I made something similar to D.Rosados solution. Mine is however reusable if you have more columns that needs wrapping.

<UserControl.Resources>
    <Style TargetType="{x:Type TextBlock}" x:Key="WrapText">
        <Setter Property="TextWrapping" Value="Wrap"/>
    </Style>
</UserControl.Resources>

<DataGrid.Columns>
    <DataGridTextColumn IsReadOnly="False" Header="Address" 
     Binding="{Binding Address}" ElementStyle="{StaticResource WrapText}" Width="150"/>
</DataGrid.Columns>

Frostwork

Answer 4

Here is another solution in addtional to others

<DataGridTemplateColumn Header="MyFieldName" Width="150" >
  <DataGridTemplateColumn.CellTemplate>
    <DataTemplate>
      <TextBlock Text="{Binding MyField}"  TextWrapping="Wrap">
        <TextBlock.ToolTip>
          <TextBlock Text="{Binding MyField}"  />
        </TextBlock.ToolTip>
      </TextBlock>
    </DataTemplate>
  </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>

Curtsey

Nice and simple with no impact on other columns... worked for me. – Beltz

Answer 5

Another simple way of setting text wrap for Editing and Text DataGrid columns is to specity the Binding property and TextWrapping property as following:

<DataGridTemplateColumn x:Name="ColumnName" Header="Column Header Goes Here">
        <DataGridTemplateColumn.CellEditingTemplate>
                <DataTemplate>
                         <TextBox Text="{Binding Path=DataBoundProperty, Mode=TwoWay}" TextWrapping="Wrap"/>
                </DataTemplate>
        </DataGridTemplateColumn.CellEditingTemplate>
        <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Path=DataBoundProperty, Mode=OneWay}" TextWrapping="Wrap"/>
            </DataTemplate>
    </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>

Woodborer

Answer 6

For WinUi 3 there is a small change

<controls:DataGridTextColumn
    Width="*"
    Binding="{Binding Value}"
    Header="Value">
    <controls:DataGridTextColumn.ElementStyle>
        <Style TargetType="TextBlock">
            <Setter Property="TextBlock.TextWrapping" Value="Wrap" />
            <Setter Property="TextBlock.TextAlignment" Value="Left" />
        </Style>
    </controls:DataGridTextColumn.ElementStyle>
</controls:DataGridTextColumn>

The Style TargetType is needed and there is no more x:Type instead write type directly.

Pfaff

Answer 7

Like this you can style the cell and headers to enable textwrapping

<DataGrid.Style>
        <Style TargetType="DataGrid">
            <Setter Property="ColumnHeaderStyle">
                <Setter.Value>
                    <Style TargetType="DataGridColumnHeader">/>
                        <Setter Property="ContentTemplate">
                            <Setter.Value>
                                <DataTemplate>
                                    <TextBlock Text="{Binding}" TextWrapping="Wrap" />
                                </DataTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </Setter.Value>
            </Setter>
            <Setter Property="CellStyle">
                <Setter.Value>
                    <Style TargetType="DataGridCell">
                        <Setter Property="TextBlock.TextWrapping" Value="Wrap" />
                    </Style>
                </Setter.Value>
            </Setter>
        </Style> 
</DataGrid.Style>

Rosetterosewall