TextBox with Data Binding should display helper text when empty

Question

I am working on an application in C# using the .NET Framework 3.5. I have a TextBox on one of my forms that is bound to the "ID" property of the DataContext of the form, like so:

<TextBox x:Name="txtID" 
    Grid.Row="0" Grid.Column="1" 
    Margin="2" MinWidth="200" VerticalAlignment="Top"
    Style="{StaticResource validationToolTip}"
    >
    <TextBox.Text>
        <Binding Path="ID" UpdateSourceTrigger="PropertyChanged"    
            ValidatesOnDataErrors="true">
            <Binding.ValidationRules>
                <ui:RequiredFieldValidationRule />
            </Binding.ValidationRules>
        </Binding>
    </TextBox.Text>
</TextBox>

I would like the TextBox to display some helper text ("[Leave blank to auto-generate.]") when the ID property is empty and the TextBox does not have input focus. I am considering styling this text differently (italicize) to distinguish it from a user-typed ID. Since the TextBox.Text property is bound to the ID property, however, I want to make sure that my solution doesn't cause the ID property to be set to the value of my helper string. How should I go about implementing this behavior?

Answer 1

The simplest approach would be to have a label over the text box to contain the text, or use a tooltip for the text Another approach would be to have a class sit between the control and the data class that you are currently bound to. This class could then pass the required '[Leave blank to auto-generate.]' text if the text in the data class is empty, or pass through the value if it is not. For all the other fields the value would just be a pass through

Answer 2

Here's a straightforward approach that can pretty trivially be turned into a control template or a user control:

<Grid>
  <TextBox 
     Foreground="LightGray" 
     Focusable="False"
     Text="This is the help text."/>
  <TextBox 
     Focusable="True"
     Text="The help text only displays if this is empty.">
    <TextBox.Style>
      <Style TargetType="TextBox" BasedOn="{StaticResource {x:Type TextBox}}">
        <Style.Triggers>
          <DataTrigger 
             Binding="{Binding RelativeSource={RelativeSource Self}, Path=Text}"                   
             Value="">
            <Setter Property="Background" Value="Transparent"/> 
          </DataTrigger>
        </Style.Triggers>             
      </Style>
    </TextBox.Style>
  </TextBox>
</Grid>

Note that the internal style set here is based on the default style for the TextBox, so this should continue to display properly if you globally restyle the TextBox.