wpf xceed toolkit watermark text box make watermark display until first entry

Question

The default behavior is the watermark disappears when the text box gets focus. I'd like to make the watermark content disappear only when the user types the first character and then reappear if the text is cleared. Anyone have a good way to accomplish this?

Answer 1

I've tweaked the default style for you. Now the watermark shows with the (slightly darker) default system "inactive text" color by default, and the watermark's opacity transitions to 0.4 when it receives focus but has no content. Once it has text, the watermark disappears completely. Looks pretty good, I think:

<LinearGradientBrush x:Key="TextBoxBorder" EndPoint="0,20" MappingMode="Absolute" StartPoint="0,0">
  <GradientStop Color="#ABADB3" Offset="0.05" />
  <GradientStop Color="#E2E3EA" Offset="0.07" />
  <GradientStop Color="#E3E9EF" Offset="1" />
</LinearGradientBrush>

<LinearGradientBrush x:Key="TextBox_MouseOver" EndPoint="0,1" StartPoint="0,0">
  <GradientStop Color="#5794BF" Offset="0.05" />
  <GradientStop Color="#B7D5EA" Offset="0.07" />
  <GradientStop Color="#C7E2F1" Offset="1" />
</LinearGradientBrush>

<LinearGradientBrush x:Key="TextBox_Focused" EndPoint="0,1" StartPoint="0,0">
  <GradientStop Color="#3D7BAD" Offset="0.05" />
  <GradientStop Color="#A4C9E3" Offset="0.07" />
  <GradientStop Color="#B7D9ED" Offset="1" />
</LinearGradientBrush>

<SolidColorBrush x:Key="TextBox_DisabledBorder" Color="#ADB2B5" />
<SolidColorBrush x:Key="TextBox_DisabledBackground" Color="#F4F4F4" />

<DataTemplate x:Key="DefaultWatermarkTemplate">
  <ContentControl Content="{Binding}" Foreground="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" Focusable="False" />
</DataTemplate>

<Style TargetType="{x:Type extToolkit:WatermarkTextBox}">
  <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
  <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}" />
  <Setter Property="BorderBrush" Value="{StaticResource TextBoxBorder}" />
  <Setter Property="BorderThickness" Value="1" />
  <Setter Property="Padding" Value="3" />
  <Setter Property="AllowDrop" Value="true" />
  <Setter Property="FocusVisualStyle" Value="{x:Null}" />
  <Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst" />
  <Setter Property="Stylus.IsFlicksEnabled" Value="False" />
  <Setter Property="WatermarkTemplate" Value="{StaticResource DefaultWatermarkTemplate}" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type extToolkit:WatermarkTextBox}">
        <Grid>

          <Border x:Name="Border" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="1" Background="{TemplateBinding Background}" />
          <Border x:Name="MouseOverVisual" Opacity="0" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{StaticResource TextBox_MouseOver}" CornerRadius="1" />
          <Border x:Name="FocusVisual" Opacity="0" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{StaticResource TextBox_Focused}" CornerRadius="1" />
          <ScrollViewer x:Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
          <ContentPresenter x:Name="PART_WatermarkHost"
                            Content="{TemplateBinding Watermark}"
                            ContentTemplate="{TemplateBinding WatermarkTemplate}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            IsHitTestVisible="False"
                            Margin="{TemplateBinding Padding}"
                            Visibility="Collapsed" />

        </Grid>
        <ControlTemplate.Triggers>
          <MultiTrigger>
            <MultiTrigger.Conditions>
              <Condition Property="Text" Value="" />
            </MultiTrigger.Conditions>
            <MultiTrigger.Setters>
              <Setter Property="Visibility" TargetName="PART_WatermarkHost" Value="Visible" />
            </MultiTrigger.Setters>
          </MultiTrigger>
          <MultiTrigger>
            <MultiTrigger.Conditions>
              <Condition Property="IsKeyboardFocusWithin" Value="True" />
              <Condition Property="Text" Value="" />
            </MultiTrigger.Conditions>
            <MultiTrigger.EnterActions>
              <BeginStoryboard>
                <Storyboard>
                  <DoubleAnimation Storyboard.TargetName="PART_WatermarkHost" Storyboard.TargetProperty="Opacity" To=".33" Duration="0:0:0.2" />
                </Storyboard>
              </BeginStoryboard>
            </MultiTrigger.EnterActions>
            <MultiTrigger.ExitActions>
              <BeginStoryboard>
                <Storyboard>
                  <DoubleAnimation Storyboard.TargetName="PART_WatermarkHost" Storyboard.TargetProperty="Opacity" Duration="0:0:0.4" />
                </Storyboard>
              </BeginStoryboard>
            </MultiTrigger.ExitActions>
          </MultiTrigger>
        <Trigger Property="Text" Value="">
          <Trigger.EnterActions>
            <BeginStoryboard>
              <Storyboard>
                <DoubleAnimation Storyboard.TargetName="PART_WatermarkHost" Storyboard.TargetProperty="Opacity" Duration="0:0:0.4" />
              </Storyboard>
            </BeginStoryboard>
          </Trigger.EnterActions>
          <Trigger.ExitActions>
            <BeginStoryboard>
              <Storyboard>
                <DoubleAnimation Storyboard.TargetName="PART_WatermarkHost" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.2" />
              </Storyboard>
            </BeginStoryboard>
          </Trigger.ExitActions>
        </Trigger>
          <Trigger Property="IsMouseOver" Value="True">
            <Setter TargetName="MouseOverVisual" Property="Opacity" Value="1" />
          </Trigger>
          <Trigger Property="IsFocused" Value="True">
            <Setter TargetName="FocusVisual" Property="Opacity" Value="1" />
          </Trigger>
          <Trigger Property="IsEnabled" Value="false">
            <Setter TargetName="Border"  Property="BorderBrush" Value="{StaticResource TextBox_DisabledBorder}" />
            <Setter TargetName="Border"  Property="Background" Value="{StaticResource TextBox_DisabledBackground}" />
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

Easiest way to apply this throughout your application is to drop that XAML into Application.Resources in your App.xaml. Feel free to tweak the colors and opacity values.