How to style the default editing template in a DataGrid

Question

Working in WPF I have a simple DataGrid with 3 Text columns

My initial version was made using DataGridTextColumn

<DataGrid ...>
  <DataGrid.Columns>
    <DataGRidTextColum ... />
    <DataGRidTextColum ... />
    <DataGRidTextColum ... />
  </DataGrid.Columns>
</DataGrid>

Default behavior is that when the user clicks to edit, the Cell Content becomes an editable Textbox. This TextBox is however not as wide as the cell.

Currently, I can solve thus, using a DataGridTemplateColumn, and then use a TextBox to show the content for both Viewing and Editing.

However, I am hoping to find a good solution, to simply style the default TextBox used when Editing.

I am unable to find the Syntax for how to target the TextBox when the Cell is in EditMode with my Properties. I want to set the Width to 100% of the Cell.

Does anyone have suggestions to how this is done in WPF?

Edit #1
Icebat informs me, standard behavior is to fill the entire width. This is my Code that shows this problem

        <DataGridTextColumn Binding="{Binding Path=Status}"
                            CanUserReorder="False"
                            CanUserResize="False"
                            CanUserSort="True"
                            Width="Auto"
                            IsReadOnly="True"
                            MinWidth="100"
                            Header="Status" 
                            CellStyle="{StaticResource VerticalCenterAlignDataGridCellStyle}"
                            />

Im guessing it could also be Style related but i do not have any styles that Target the TextBox without a Key.

Editing TextBoxes should occupy the whole cell by default. There's something in your code\XAML that is changing that. It's hard to tell because you didn't show any relevant code. — icebat

mm8 mm8 · Accepted Answer · 2017-01-13T11:29:15

There is some style in your application that causes the TextBox not to stretch to fit the entire width of the cell because this is not the default behaviour.

Anyway, you could set the EditingElementStyle property of the column to a TextBox style to change the style for the TextBox:

<DataGridTextColumn Binding="{Binding Prop}">
    <DataGridTextColumn.EditingElementStyle>
        <Style TargetType="TextBox">
            <Setter Property="HorizontalAlignment" Value="Stretch"/>
            <Setter Property="Background" Value="Yellow" />
        </Style>
    </DataGridTextColumn.EditingElementStyle>
</DataGridTextColumn>

If this doesn't work there may be some custom CellStyle of yours that causes the issue. You could override this one as well:

<DataGridTextColumn Binding="{Binding Prop}" Width="400">
    <DataGridTextColumn.EditingElementStyle>
        <Style TargetType="TextBox">
            <Setter Property="HorizontalAlignment" Value="Stretch"/>
            <Setter Property="Background" Value="Yellow" />
        </Style>
    </DataGridTextColumn.EditingElementStyle>
    <DataGridTextColumn.CellStyle>
        <Style TargetType="DataGridCell">
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        </Style>
    </DataGridTextColumn.CellStyle>
</DataGridTextColumn>

How to style the default editing template in a DataGrid

1 Answers