XAML Binding Parent field to a Child value from ResourceDictionnary

Question

I made a style to create a TextBox with a Placeholder.

<Style TargetType="TextBox" x:Key="PlaceholderTextBox">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="TextBox">
                    <Border Background="White" BorderBrush="Black" BorderThickness="1">
                        <Grid>
                            <TextBox VerticalAlignment="Stretch"
                                     VerticalContentAlignment="Stretch"
                                     x:Name="MessageBox"
                                     Background="Transparent"
                                     TextWrapping="Wrap"
                                     BorderThickness="0"
                                     Margin="2,0,0,0"
                                     Text="{Binding Message, Mode=TwoWay, 
                                     UpdateSourceTrigger=PropertyChanged}">
                            </TextBox>

                            <TextBlock IsHitTestVisible="False"
                                       Text="{TemplateBinding Tag}"
                                       VerticalAlignment="Center"
                                       HorizontalAlignment="Left"
                                       Margin="4,0,0,0"
                                       Foreground="Gray"
                                       FontStyle="Italic">
                                <TextBlock.Style>
                                    <Style TargetType="TextBlock">
                                        <Setter Property="Visibility" Value="Collapsed" />
                                        <Style.Triggers>
                                            <DataTrigger Binding="{Binding Text,
                                            ElementName=MessageBox}" Value="">
                                                <Setter Property="Visibility" Value="Visible" />
                                            </DataTrigger>
                                        </Style.Triggers>
                                    </Style>
                                </TextBlock.Style>
                            </TextBlock>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

It works well, but when I want to access the data from my TextBox, I can't get it to retrieve the data.

<StackPanel Orientation="Horizontal">
    <Label Content="Filtre : " />
    <TextBox x:Name="TxtFiltre" Width="120" Height="16" Margin="4,0,4,0"
    KeyUp="TxtFiltre_KeyUp" Style="{StaticResource PlaceholderTextBox}"
    Tag="Search" />
</StackPanel>

I tried to bind the Text value from the TextBox and the TextBlock in style, but none worked.

In debug I saw that the value entered in my TextBox can be found on the Text element, but the source is ParentTemplate and not Default. I don't understand the difference and if it has something to do with the style and not being able to retrieve the data.

Setting the element itself in the Element Template is, to put it mildly, not a good idea. To display text in a TextBox Template, a ScrollViewer named `PART_ContentHost` is used. An example can be seen here: https://learn.microsoft.com/en-us/dotnet/desktop/wpf/controls/textbox-styles-and-templates?view=netframeworkdesktop-4.8#textbox-controltemplate-example — EldHasp, Jan 03 '23 at 15:19
You nested a TextBox inside another TextBox and use the inner TextBox and then access outer TextBox expecting you can access the properties of inner TextBox. — emoacht, Jan 03 '23 at 15:23
Will you be using this a lot? If it's just occasional use then see https://stackoverflow.com/questions/833943/watermark-hint-placeholder-text-in-textbox/21672408#21672408 — Andy, Jan 03 '23 at 15:23
EldHasp this was indeed the right solution. Andy I'll also look into this solution, but I will be using this across all the application. — Rikube, Jan 04 '23 at 07:33

score 1 · Accepted Answer · answered Jan 03 '23 at 16:27

If you want to re template the textbox then you need to start with a viable textbox template.

I wasn't particularly careful with what follows so consider this an illustration rather than bullet proof cut and paste.

It uses the background brush for the watermark.

<Window.Resources>
    <Style TargetType="{x:Type TextBox}" x:Key="WatermarkTextBoxStyle">
        <Setter Property="SnapsToDevicePixels"
      Value="True" />
        <Setter Property="OverridesDefaultStyle"
      Value="True" />
        <Setter Property="KeyboardNavigation.TabNavigation"
      Value="None" />
        <Setter Property="FocusVisualStyle"
      Value="{x:Null}" />
        <Setter Property="MinWidth"
      Value="120" />
        <Setter Property="MinHeight"
      Value="20" />
        <Setter Property="AllowDrop"
      Value="true" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TextBoxBase}">
                    <Border Name="Border"
                    CornerRadius="2"
                    Padding="2"
                    BorderThickness="1">
                        <Border.Background>
                            <VisualBrush Stretch="None"
                     AlignmentX="Left">
                                <VisualBrush.Visual>
                                    <TextBlock FontSize="12" 
                                         Text="{Binding Tag, RelativeSource={RelativeSource AncestorType=TextBox}}"
                                         Foreground="LightGray" >
                                        <TextBlock.Style>
                                            <Style TargetType="TextBlock">
                                                <Setter Property="Opacity" Value="0"/>
                                                <Style.Triggers>
                                                    <DataTrigger Binding="{Binding Text, RelativeSource={RelativeSource AncestorType=TextBox}}" Value="">
                                                        <Setter Property="Opacity" Value="1"/>
                                                    </DataTrigger>
                                                    <DataTrigger Binding="{Binding IsFocused, RelativeSource={RelativeSource AncestorType=TextBox}}" Value="True">
                                                        <Setter Property="Opacity" Value="0"/>
                                                    </DataTrigger>
                                                </Style.Triggers>
                                            </Style>
                                        </TextBlock.Style>
                                    </TextBlock>
                                </VisualBrush.Visual>
                            </VisualBrush>
                        </Border.Background>
                        <Border.BorderBrush>
                            <SolidColorBrush Color="{DynamicResource BorderMediumColor}" />
                        </Border.BorderBrush>
                        <ScrollViewer Margin="0"  x:Name="PART_ContentHost" />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

<StackPanel>
    <TextBox Style="{StaticResource WatermarkTextBoxStyle}"
             Tag="Watermark Text"/>

A markup in place version might be clearer. There's not a huge amount to this. I set the opacity to zero if the textbox has focus ( so the user is about to start typing ) or the text is not "". Meaning they typed something in.

    <TextBox>
        <TextBox.Background>
                <VisualBrush Stretch="None"
                             AlignmentX="Left">
                    <VisualBrush.Visual>
                        <TextBlock FontSize="12" 
                            Text="Watermark Text"
                            Foreground="LightGray" >
                            <TextBlock.Style>
                                <Style TargetType="TextBlock">
                                    <Setter Property="Opacity" Value="0"/>
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding Text, RelativeSource={RelativeSource  AncestorType=TextBox}}" Value="">
                                            <Setter Property="Opacity" Value="1"/>
                                        </DataTrigger>
                                        <DataTrigger Binding="{Binding IsFocused, RelativeSource={RelativeSource  AncestorType=TextBox}}" Value="True">
                                            <Setter Property="Opacity" Value="0"/>
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </TextBlock.Style>
                        </TextBlock>
                    </VisualBrush.Visual>
                </VisualBrush>
        </TextBox.Background>
    </TextBox>

This is working perfectly, thanks ! This looks like what I was trying to do after reading @EldHasp comment, but my solution was not working yet. — Rikube, Jan 04 '23 at 07:29

XAML Binding Parent field to a Child value from ResourceDictionnary

1 Answers1