WPF DataGridCell watermark style. Cannot edit the cell

Question

I wanted to add a style to a DataGridCell in my app to have the effect of a watermarked "hint" in case the cell is empty to give the user a hint about what he needs to type in the cell.

<Window.Resources>
    <Style x:Key="WatermarkTextBox" TargetType="{x:Type DataGridCell}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type DataGridCell}">
                    <Grid>
                        <Border x:Name="BorderBase" Background="White" BorderThickness="1.4,1.4,1,1" BorderBrush="Red">
                            <Label x:Name="TextPrompt" 
                            Content="{Binding RelativeSource={RelativeSource  Mode=TemplatedParent}, Path=Tag}" 
                            Background="{TemplateBinding Background}" Visibility="Visible" 
                            Focusable="False" Foreground="Silver"/>
                        </Border>
                        <!--<ScrollViewer Margin="0" x:Name="PART_ContentHost" Foreground="Black"/>-->
                    </Grid>
                    <ControlTemplate.Triggers>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsFocused" Value="False"/>
                                <Condition Property="Content" Value=""/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Visibility" TargetName="TextPrompt" Value="Visible"/>
                        </MultiTrigger>
                        <Trigger Property="IsFocused" Value="True">
                            <Setter Property="BorderBrush" TargetName="BorderBase" Value="Black"/>
                            <Setter Property="Visibility" TargetName="TextPrompt" Value="Collapsed"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Foreground" Value="DimGray" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

And this is my code:

Style style = this.FindResource("WatermarkTextBox") as Style;
myCell.Tag = "input position here please";
myCell.Style = style;

And it works fine. When this code is executed, the watermark style is applied correctly. But when I focus on the cell, I cannot write anything.
I mean, the " IsFocused " trigger is executed and the Label is collapsed (it disappears) but I cannot input anything inside the cell.

Answer 1

Try This, Updated

<Style x:Key="WatermarkTextBox"  TargetType="{x:Type TextBox}">

    <Setter Property="FontSize" Value="12" />

    <Setter Property="Background" Value="Transparent" />

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TextBoxBase}">

                <Grid>

                    <Border
                        x:Name="border"
                        SnapsToDevicePixels="True">
                        <ScrollViewer
                            x:Name="PART_ContentHost"
                            Focusable="False"
                            HorizontalScrollBarVisibility="Hidden"
                            VerticalScrollBarVisibility="Hidden" />
                    </Border>

                    <TextBlock
                        x:Name="placeholder"
                        VerticalAlignment="Center"
                        IsHitTestVisible="False"
                        Text="{TemplateBinding Tag}">
                        <TextBlock.Style>
                            <Style TargetType="{x:Type TextBlock}">
                                <Setter Property="Visibility" Value="Collapsed" />
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding Text, RelativeSource={RelativeSource TemplatedParent}}" Value="">
                                        <Setter Property="Visibility" Value="Visible" />
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </TextBlock.Style>

                    </TextBlock>

                </Grid>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter TargetName="border" Property="Opacity" Value="0.56" />
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="border" Property="BorderBrush" Value="#FF7EB4EA" />
                    </Trigger>
                    <Trigger Property="IsKeyboardFocused" Value="True">
                        <Setter TargetName="border" Property="BorderBrush" Value="#FF569DE5" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>

</Style>

Usage

            <DataGrid.Columns>
                <DataGridTemplateColumn Header="  Tags  ">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>

                            <TextBox Style="{StaticResource WatermarkTextBox}"
                                FontSize="12"
                                VerticalAlignment="Center"                                    
                                Tag="Stage Name .." 
                                Width="60"/>

                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>

Answer 2

You are missing a ContentPresenter :

<Style x:Key="WatermarkTextBox" TargetType="{x:Type DataGridCell}">
    <Setter Property="Tag" Value="insert" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type DataGridCell}">
                <Grid>
                    <Border x:Name="BorderBase" Background="White" BorderThickness="1.4,1.4,1,1" BorderBrush="Red">
                        <Label x:Name="TextPrompt" 
                                               Content="{Binding RelativeSource={RelativeSource  Mode=TemplatedParent}, Path=Tag}" 
                                               Background="{TemplateBinding Background}" Visibility="Visible" 
                                               Focusable="False" Foreground="Silver"/>
                    </Border>
                    <ContentPresenter x:Name="cp" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsFocused" Value="False"/>
                            <Condition Property="Content" Value=""/>
                        </MultiTrigger.Conditions>
                        <Setter Property="Visibility" TargetName="TextPrompt" Value="Visible"/>
                        <Setter Property="Visibility" TargetName="cp" Value="Collapsed"/>
                    </MultiTrigger>
                    <Trigger Property="IsFocused" Value="True">
                        <Setter Property="BorderBrush" TargetName="BorderBase" Value="Black"/>
                        <Setter Property="Visibility" TargetName="TextPrompt" Value="Collapsed"/>
                        <Setter Property="Visibility" TargetName="cp" Value="Visible"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Foreground" Value="DimGray" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>