Search code examples
wpftextboxdatagridtextcolumn

DataGridTextColumn's "TextBox" styling isn't consistent with its "TextBlock"

I'm having trouble styling the TextBox that's used for editing in a DataGridTextColumn. A bit of background on this column:

  • it's bound to a property called 'Top' (numeric value)
  • there is a property called "ShowAll" used as a trigger to disable the column
  • if the column is enabled, I want the look and feel of the TextBox to match that of the TextBlock (right aligned, centered vertically).

The cell looks perfect in non-edit mode.

(apologies for the lack of pictures, but Stackoverflow requires 10 reputation points before pictures can be posted, which ironically causes one's early posts to be less effective; silly rule)

If I leave out the DataGridTextColumn.EditingElementStyle section (ie, if I go with the default editing style), when the cell receives focus the TextBox is upper-left aligned within the DataGridTextColumn:

Default edit mode

I would like for the value being edited to remain right aligned and vertically centered. But when I add the same two styles for EditingElementStyle that I did for ElementStyle, there is a blue background, and the textbox doesn't fill the cell:

enter link description here

I've tried other setters such as HorizontalContentAlignment (value of Stretch), but no luck. Here is my code:

<DataGridTextColumn Header="Top" Binding="{Binding Path=Top}" Width="70">
	<DataGridTextColumn.ElementStyle>
		<Style TargetType="{x:Type TextBlock}">
			<Setter Property="HorizontalAlignment" Value="Right" />
			<Setter Property="VerticalAlignment" Value="Center" />
		</Style>
	</DataGridTextColumn.ElementStyle>
	<DataGridTextColumn.EditingElementStyle>
		<Style TargetType="{x:Type TextBox}">
			<Setter Property="HorizontalAlignment" Value="Right" />
			<Setter Property="VerticalAlignment" Value="Center" />
		</Style>
	</DataGridTextColumn.EditingElementStyle>
	<DataGridColumn.CellStyle>
		<Style TargetType="DataGridCell">
			<Style.Triggers>
				<DataTrigger Binding="{Binding ShowAll}" Value="False">
					<Setter Property="Foreground" Value="Transparent"/>
					<Setter Property="Background" Value="LightGray"/>
					<Setter Property="IsEnabled" Value="False"/>
				</DataTrigger>
			</Style.Triggers>
		</Style>
	</DataGridColumn.CellStyle>
</DataGridTextColumn>

Solution

  • The blue color might be one of the highlight key brushes from the SystemColors (see the List of SystemColors)

    For filling the width of your cell, you maybe could try binding the width of the textbox to the cell like this:

     <Setter Property="Width" Value="{Binding ActualWidth, RelativeSource={RelativeSource Mode=FindAncestor, 
                         AncestorType={x:Type DataGridTextColumn}}}"/>

    EDIT: Funny enough, when testing your xaml changing the HorizontalAlignment to HorizontalContentAlignment worked for me :)

    <DataGridTextColumn.EditingElementStyle>
                    <Style TargetType="{x:Type TextBox}">
                        <Setter Property="HorizontalContentAlignment" Value="Right" />
                        <Setter Property="VerticalAlignment" Value="Center" />...

    EDIT2 ;): In fact you can overwrite the SystemColor Defaults adding this to your xaml to change the highlight effect:

    <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Red" />

    and additionally change the control key if necessary

    <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Green" />

    be aware that the text brushes might behave differently and you might no be able to overwrite them. For more details on that matter this link might be useful.