How to properly apply a DataTrigger binding inside a WPF style for a different component type?

Question

I'm still a little green when it comes to WPF. I'm currently working on a WPF form that has several text boxes on it. Each of those TextBoxes are paired with a TextBlock sitting in the same x,y coord, acting as GhostText. Once you click inside the TextBox the GhostText disappears.

Below is an example of how the binding was originally setup in the form's XAML (this same code is duplicated for all text boxes thus the reasoning behind using a style) :

<TextBox Grid.Column="0" Width="40" Height="25" VerticalAlignment="Top" HorizontalAlignment="Left" x:Name= "RecordMinutesTextBox" Padding="12,5,5,0" Text ="{Binding RecordMinute}"  Margin="0,25,5,1" PreviewTextInput="CheckNumberValidation" Background="{Binding ElementName=FireWashingtonResponseTimeReport,Path=DataContext.RequiredFieldColor}"/>
<TextBlock Grid.Column="0" Width="40"  IsHitTestVisible="False" Text="MIN" VerticalAlignment="Center" HorizontalAlignment="Left" Foreground="DarkGray" Margin="8,25,0,1"                               >
    <TextBlock.Style>
        <Style TargetType="{x:Type TextBlock}">
            <Setter Property="Visibility" Value="Collapsed"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding Text, ElementName=RecordMinutesTextBox}" Value="">
                    <Setter Property="Visibility" Value="Visible"></Setter>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </TextBlock.Style>
</TextBlock>

*Note the name of one of the many text boxes,"RecordMinutesTextBox", used as the ElementName for the DataTrigger Binding.

Here is the code from inside my WPF Style template:

<Style x:Key="MinuteAndSecondsGhostText" TargetType="TextBlock">
    <Setter Property="Width" Value="40"/>
    <Setter Property="IsHitTestVisible" Value="False"/>
    <Setter Property="VerticalAlignment" Value="Center"/>
    <Setter Property="HorizontalAlignment" Value="Left"/>
    <Setter Property="Foreground" Value="DarkGray"/>
    <Setter Property="Visibility" Value="Collapsed"/>
    <Style.Triggers>
        <DataTrigger Binding="{Binding Text, ElementName=??WhatDoIPutHere??}" Value="">
            <Setter Property="Visibility" Value="Visible"/>
        </DataTrigger>
    </Style.Triggers>
</Style>enter code here

So my question really comes down to this. What should I use in the DataTrigger Binding as the ElementName for this style? Considering that I have multiple TextBoxes with different names on my form. Thanks in advance.

RAM RAM · Accepted Answer · 2015-09-05T17:34:52

I give you an idea... and you can change your codes base on it.

In my following sample you see the TextBlock shows state of IsFocused property of the TextBox. So you can put the pair of your elements in a parent like StackPanel and access to properties of one child in another child by RelativeSource instead of ElementName...

Just put this codes in your window and focus in TextBox, What you see inside the TextBlock?

<StackPanel Orientation="Horizontal" Background="White"  Margin="20">

 <TextBox Text="" Name="TextBox" Background="DarkSalmon" Width="100" Height="30"/>

 <TextBlock Text="{Binding Path=Children[0].IsFocused,
                           RelativeSource={RelativeSource Mode=FindAncestor,
                                                          AncestorType={x:Type StackPanel}}}"
               Margin="20,0"/>
</StackPanel>

Edit:

Base on my above idea you can use RelativeSource instead of ElementName to resolve your problem like the following sample:

<Style x:Key="MinuteAndSecondsGhostText" TargetType="TextBlock">
    <Setter Property="Width" Value="40"/>
    <Setter Property="IsHitTestVisible" Value="False"/>
    <Setter Property="VerticalAlignment" Value="Center"/>
    <Setter Property="HorizontalAlignment" Value="Left"/>
    <Setter Property="Foreground" Value="DarkGray"/>
    <Setter Property="Visibility" Value="Collapsed"/>
    <Style.Triggers>
        <DataTrigger Binding="{Binding Path=Children[0].Text,
                               RelativeSource={RelativeSource Mode=FindAncestor,
                                                              AncestorType={x:Type StackPanel}}}" Value="">
            <Setter Property="Visibility" Value="Visible"/>
        </DataTrigger>
    </Style.Triggers>
</Style>

And in your Window body:

<StackPanel x:Name="Pair1" Orientation="Horizontal" Background="White"  Margin="20">
    <!--TextBox should be first child of StackPanel-->
    <TextBox Text="" Name="TextBox1" Background="DarkSalmon" Width="100" Height="30"/>
    <TextBlock Text="Sample Text" Style="{StaticResource MinuteAndSecondsGhostText}" Margin="20,0"/>
</StackPanel>

<StackPanel x:Name="Pair2" Orientation="Horizontal" Background="White"  Margin="20">
    <!--TextBox should be first child of StackPanel-->
    <TextBox Text="" Name="TextBox2" Background="DarkSalmon" Width="100" Height="30"/>
    <TextBlock Text="Sample Text" Style="{StaticResource MinuteAndSecondsGhostText}" Margin="20,0"/>
</StackPanel>

How to properly apply a DataTrigger binding inside a WPF style for a different component type?

1 Answers