How to wrap text while in edit mode on TextBlock WPF DataGridTextColumn

Question

I have a DataGridTextColumn in which I wrap text in one column.Since only one cell has more than numbers and for this case cable names it' displaying fine in 3 lines, but while in edit mode the wrapping goes away and I don't see the whole text. Using the arrow keys is needed. I'd like to have an editable and textwrapping texblock while in edit mode. Looked for some advice on SO but no success. Any help?

CableEditorWindow.xaml:

    <Controls:MetroWindow x:Class="GPZmodel.Windows.CableEditorWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls"
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    Title="Edytor właściwości kabla" Height="664" Width="610" 
    Background="WhiteSmoke" WindowStartupLocation="CenterScreen">

<Grid>



    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition Height="Auto" MinHeight="70"/>
    </Grid.RowDefinitions>
    <DataGrid  x:Name="CableEditDataGrid"
               Style="{StaticResource AzureDataGrid}"
               Grid.Row="0" 
               VerticalAlignment="Stretch" 
               ItemsSource="{Binding Rows, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" 
               CanUserAddRows="False" 
               CanUserDeleteRows="False" CanUserSortColumns="True" AutoGenerateColumns="False"
               ScrollViewer.CanContentScroll="True" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollBarVisibility="Auto" 
               SelectionMode="Single">
        <DataGrid.Columns>
            <DataGridTextColumn Header="Pole" Width="Auto" 
                                HeaderStyle="{StaticResource WysrodkujHeader}" 
                                Binding="{Binding nazwa_pola,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" 
                                IsReadOnly="True" 
                                >
                <DataGridTextColumn.ElementStyle>
                    <Style TargetType="{x:Type TextBlock}">
                        <Style.Triggers>
                            <Trigger Property="Text"  Value="ID">
                                <Setter Property="Background" Value="#FF84BCCD"/>
                                <Setter Property="FontSize" Value="13"/>
                            </Trigger>
                        </Style.Triggers>
                        <Setter Property="TextAlignment" Value="Center"/>

                    </Style>
                </DataGridTextColumn.ElementStyle>

            </DataGridTextColumn>


            <!--THIS-->
            <DataGridTextColumn Header="Wartość" 
                                HeaderStyle="{StaticResource WysrodkujHeader}"
                                Width="*" 
                                Binding="{Binding wartosc_pola, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
                                > 
                <DataGridTextColumn.CellStyle>
                    <Style TargetType="DataGridCell">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding Path=ReadOnly}" Value="True">
                                <Setter Property="IsTabStop" Value="False"/>
                                <Setter Property="Focusable" Value="False"/>
                            </DataTrigger>
                        </Style.Triggers>
                        <Style.Setters>
                            <Setter Property="TextBlock.TextAlignment" Value="Center"/>
                            <Setter Property="VerticalAlignment" Value="Stretch"/>
                            <Setter Property="HorizontalAlignment" Value="Stretch"/>
                        </Style.Setters>
                    </Style>
                </DataGridTextColumn.CellStyle>
                <DataGridTextColumn.ElementStyle>
                    <Style TargetType="TextBlock">
                        <Setter Property="TextBlock.TextWrapping" Value="Wrap"/>
                    </Style>
                </DataGridTextColumn.ElementStyle>
            </DataGridTextColumn>
            <!--/THIS-->

            <DataGridTextColumn x:Name="JednostkaTextBox" 
                                Header="Jednostka"
                                HeaderStyle="{StaticResource WysrodkujHeader}"
                                Binding="{Binding jednostka_pola,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
                                IsReadOnly="True"
                                Width="0.4*">
            </DataGridTextColumn>
        </DataGrid.Columns>
    </DataGrid>
    <Grid Grid.Row="1" Background="#4A6A95">
        <Button Style="{StaticResource MainButtonStyle}" Content="Nadpisz" x:Name="NadpiszButton"   HorizontalAlignment="Right" Width="120" Panel.ZIndex="1" Margin="0,0,10,21" Height="32" VerticalAlignment="Bottom" Click="NadpiszButton_Click" />
        <Button Style="{StaticResource MainButtonStyle}" Content="Anuluj" Name="AnulujButton" Height="32" VerticalAlignment="Bottom" Panel.ZIndex="1" Margin="0,0,135,21" HorizontalAlignment="Right" Width="120" Click="AnulujButton_Click" />
    </Grid>
</Grid>

Answer 1

Luckily, solution is simple: add EditingElementStyle to your column, you can (or should) customize edit style separately

<DataGridTextColumn.EditingElementStyle>
   <Style>
      <Setter Property="TextBlock.TextWrapping" Value="Wrap"/>
   </Style>
</DataGridTextColumn.EditingElementStyle>

Your final code portion will look like this

<!--  THIS  -->
<DataGridTextColumn Width="*"
    Binding="{Binding wartosc_pola, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
    Header="Wartość"
    HeaderStyle="{StaticResource WysrodkujHeader}">
    <DataGridTextColumn.CellStyle>
        <Style TargetType="DataGridCell">
            <Style.Triggers>
                <DataTrigger Binding="{Binding Path=ReadOnly}" Value="True">
                    <Setter Property="IsTabStop" Value="False" />
                    <Setter Property="Focusable" Value="False" />
                </DataTrigger>
            </Style.Triggers>
            <Style.Setters>
                <Setter Property="TextBlock.TextAlignment" Value="Center" />
                <Setter Property="VerticalAlignment" Value="Stretch" />
                <Setter Property="HorizontalAlignment" Value="Stretch" />
            </Style.Setters>
        </Style>
    </DataGridTextColumn.CellStyle>
    <DataGridTextColumn.ElementStyle>
        <Style>
            <Setter Property="TextBlock.TextWrapping" Value="Wrap" />
        </Style>
    </DataGridTextColumn.ElementStyle>
    <DataGridTextColumn.EditingElementStyle>
        <Style>
            <Setter Property="TextBlock.TextWrapping" Value="Wrap" />
        </Style>
    </DataGridTextColumn.EditingElementStyle>
</DataGridTextColumn>
<!--  /THIS  -->

Answer 2

Besides the ElementStyle for the TextBlock , you should also define an EditingElementStyle that sets the TextWrapping property for the TextBox to Wrap :

<DataGridTextColumn.EditingElementStyle>
    <Style TargetType="TextBox">
        <Setter Property="TextWrapping" Value="Wrap"/>
    </Style>
</DataGridTextColumn.EditingElementStyle>

There is no TextBlock displayed while you're in edit mode. It's a TextBox .