How to add a background to a textbox cue banner

Question

This question showed me how to add a watermark text to my TextBox. I've tried to implement it in my project, but it replaces the background of my TextBox.

Because my panel has a different color, that panel color is shown through the textbox. How can I set this correctly?

I've tried to set the Background of the Label to white, but that doesn't work because it isn't stretched.

<TextBox>
    <TextBox.Style>
        <Style TargetType="TextBox" xmlns:sys="clr-namespace:System;assembly=mscorlib">
            <Style.Resources>
                <VisualBrush x:Key="CueBannerBrush" AlignmentX="Left" AlignmentY="Center" Stretch="Uniform">
                    <VisualBrush.Visual>
                        <!-- set the background to white -->
                        <Label Content="Search" Foreground="LightGray" Background="White"/>
                    </VisualBrush.Visual>
                </VisualBrush>
            </Style.Resources>
            <Style.Triggers>
                <Trigger Property="Text" Value="{x:Static sys:String.Empty}">
                    <Setter Property="Background" Value="{StaticResource CueBannerBrush}" />
                </Trigger>
                <Trigger Property="Text" Value="{x:Null}">
                    <Setter Property="Background" Value="{StaticResource CueBannerBrush}" />
                </Trigger>
                <Trigger Property="IsKeyboardFocused" Value="True">
                    <Setter Property="Background" Value="White" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </TextBox.Style>
</TextBox>

This gives the following:

uniform stretched background

But setting Stretch to Fill gives this result with stretched text:

fill stretched background

is that a kind of [watermarked textbox](http://stackoverflow.com/a/21673718/2998271) you are trying to implement? no? — har07, Feb 20 '14 at 14:21
Yes it is. I just found this post and it seemed the most simple and obvious solution that is easy to understand. Yes there are more options that I can download or recreate, but I was just curious on this specific post. — Marnix, Feb 20 '14 at 14:24

score 0 · Answer 1 · answered Feb 20 '14 at 14:33

This might not be the best solution, but if my controls are supposed to behave differently from what they are ment to, I like to create them myself. That way I got full control and know exactly what happens when i do this and that.

class TextBoxWaterMark : TextBox
{

#region Datafields

private string pm_WaterMark = "";

#endregion

#region Constructor

public TextBoxWaterMark()
{
}

#endregion

#region Control events
protected override void OnGotFocus(RoutedEventArgs e)
{
  base.OnGotFocus(e);
  if ((string)this.Tag != "")
  {
    this.Foreground = new SolidColorBrush(Colors.Black);
    this.Text = "";
  }
}

protected override void OnLostFocus(RoutedEventArgs e)
{
  base.OnLostFocus(e);
  if ((string)this.Tag != "")
  {
    if (this.Text == "")
    {
      this.Text = pm_WaterMark;
      this.Foreground = new SolidColorBrush(Colors.Gray);
    }
  }
}
#endregion

#region Public get and set methods

public string WaterMark 
{
  get { return pm_WaterMark; } 
  set 
  {
    pm_WaterMark = value;
    this.Text = pm_WaterMark; 
    this.Foreground = new SolidColorBrush(Colors.Gray);
  } 
}
#endregion

and then in my XAML code i simply add it whereever i want like this.

 <Form:TextBoxWaterMark WaterMark="Insert watermark text here" />

Hope this is what you are looking for :P

score -3 · Answer 2 · answered Feb 20 '14 at 14:04

You can add something behind your textbox :

    <StackPanel background="white">
      <textbox>
      </textbox>
    </StackPanel>

I think that the right part of your text box is transparent, am I right ? I also think that there are better component than a StackPanel to do this.

How to add a background to a textbox cue banner

2 Answers2