Search code examples
c#wpfwpfdatagrid

Remove border from DataGridCell in edit mode while text wrap is enabled


I have a data grid within which I don't want the grid lines to show at any time.

I've almost got it working with the following code:

<DataGrid  
        AutoGenerateColumns="False" Height="Auto" 
        Name="dataGrid1" Width="504" 
        ItemsSource="{Binding SourceCollection}" 
        DockPanel.Dock="Top" GridLinesVisibility="None" 
        CanUserSortColumns="False" 
        ColumnWidth="Auto" HeadersVisibility="None" 
        FontSize="16" FontFamily="Tahoma" MinRowHeight="30">
 <DataGrid.Columns>
     <DataGridTextColumn Binding="{Binding index}" />
     <DataGridTextColumn Binding="{Binding des}" Width="20*">
     </DataGridTextColumn>
 </DataGrid.Columns>
 <DataGrid.CellStyle>
     <Style>
         <Style.Triggers>
             <Trigger Property="DataGridCell.IsSelected" Value="True">
                 <Setter Property="DataGridCell.Background" Value="White" />
                 <Setter Property="DataGridCell.Foreground" Value="Black" />
                 <Setter Property="DataGridCell.BorderBrush" Value="White" />
                 <Setter Property="DataGridCell.BorderThickness" Value="1" />
             </Trigger>                  
         </Style.Triggers>
     </Style>
 </DataGrid.CellStyle>
 <DataGrid.RowStyle>
     <Style TargetType="DataGridRow">
         <Style.Triggers>
             <Trigger Property="IsSelected" Value="True">
                 <Setter Property="Background" Value="White" />
     </Trigger>
         </Style.Triggers>
     </Style>
 </DataGrid.RowStyle>
<DataGrid>

enter image description here

But as soon as I enable text wrapping for the second column, a blue line is shown around the cell in editing mode

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

Window after enable text wrap

So how can I remove the blue lines from the DataGridCell in editing mode while maintaining the TextWrap option?


Solution

  • For elementstyle you can use TextBlock and for Element editing style you can use textbox and make it borderthickness as 0

    <DataGridTextColumn.ElementStyle>
                        <Style TargetType="{x:Type TextBlock}" >                          
                            <Setter Property="TextBlock.TextWrapping" Value="Wrap" />
                        </Style>                     
                    </DataGridTextColumn.ElementStyle>
                    <DataGridTextColumn.EditingElementStyle>
                        <Style  TargetType="{x:Type TextBox}">
                            <Setter Property="BorderThickness" Value="0"/>
                            <Setter Property="TextWrapping" Value="Wrap" />
                        </Style>
                    </DataGridTextColumn.EditingElementStyle>