How to do proper implicit styling of TextBox inside DataGrid (WPF, C#)

Question

I have a WPF project, where i want to do implicit styling for all Windows of my program. I am facing problems with the DataGridTextColumn in my DataGrid. This is a TextBlock in view mode and a TextBox in EditMode, but my styles to not apply to them.

My Implicit Styling

<System:Double x:Key="FontSize">14</System:Double>

<Style x:Key="TextBoxStyle" TargetType="TextBox">
    <Setter Property="Margin" Value="3" />
    <Setter Property="MinWidth" Value="30" />
    <Setter Property="Height" Value="20" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="Background" Value="White" />
    <Setter Property="FontSize" Value="{StaticResource FontSize}" />
    <Style.Triggers>
        <Trigger Property="IsReadOnly" Value="True">
            <Setter Property="Background" Value="LightGray" />
        </Trigger>
    </Style.Triggers>
</Style>

<Style TargetType="TextBox" BasedOn="{StaticResource TextBoxStyle}" />

This styling is not applied to DataGridTextColumn in Edit mode.

I found some help in this StackOverflow Question

<Style TargetType="DataGridCell">
    <Setter Property="TextElement.FontSize" Value="{StaticResource FontSize}" />
</Style>

The end result is that the FontSize is now applied, but the Content is Vertically Top Aligned

I then found a solution to Vertically CenterAlign the content of the DataGridTextColumn

<Style TargetType="DataGridCell">
    <Setter Property="TextElement.FontSize" Value="{StaticResource FontSize}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type DataGridCell}">
                <Grid Background="{TemplateBinding Background}">
                        <ContentPresenter VerticalAlignment="Center" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Unfortunately, i now face Borders in my EditMode

I have tried various solutions to try and remove the Borders around the TextBox, but i have been unable. Is there anyway where i can specify that my implicit TextBox style should also apply to the DataGridTextColumn Editmode?

I am finding WPF Styling to be limiting and hard to understand. I hope someone can provide some clarity

Answer 1

You could set the EditingElementStyle of all columns to your TextBoxStyle, e.g.:

<DataGrid ...>
    <DataGrid.Resources>
        <System:Double x:Key="FontSize">14</System:Double>
        <Style x:Key="TextBoxStyle" TargetType="TextBox">
            <Setter Property="Margin" Value="3" />
            <Setter Property="MinWidth" Value="30" />
            <Setter Property="Height" Value="20" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="Background" Value="White" />
            <Setter Property="FontSize" Value="{StaticResource FontSize}" />
            <Style.Triggers>
                <Trigger Property="IsReadOnly" Value="True">
                    <Setter Property="Background" Value="LightGray" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </DataGrid.Resources>
    <DataGrid.Columns>
        <DataGridTextColumn Binding="{Binding Property1}" EditingElementStyle="{StaticResource TextBoxStyle}" />
        <DataGridTextColumn Binding="{Binding Property2}" EditingElementStyle="{StaticResource TextBoxStyle}" />
    </DataGrid.Columns>
</DataGrid>

There is no implicit styling for these TextBoxes so you need to set the EditingElementStyle property of each individual column I am afraid.