CODEWITHSUNDEEP
wpfdatagridword-wrap
user1785721
user1785721

Reputation:

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

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.

Upvotes: 70

Views: 80641

Answers (7)

B I K A
B I K A

Reputation: 11

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>

Upvotes: 0

Marek Pio
Marek Pio

Reputation: 127

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.

Upvotes: 0

NoWar
NoWar

Reputation: 37642

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>

Upvotes: 3

sheraz yousaf
sheraz yousaf

Reputation: 89

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>

Upvotes: 0

D.Rosado
D.Rosado

Reputation: 5773

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>

Upvotes: 145

Rahbek
Rahbek

Reputation: 1381

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>

Upvotes: 36

brunnerh
brunnerh

Reputation: 185300

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

Upvotes: 20

Related Questions