How to make Search hint textbox background same as textbox background

Question

I have search hint textbox

       <TextBox 
                TextChanged="textboxsearch_TextChanged"
               Grid.Column="4"  Margin="0,0,10,10" Height="22" >
                <TextBox.Style>
                    <Style TargetType="TextBox">
                        <Style.Triggers>
                            <Trigger Property="Text" Value="">
                                <Setter Property="Background" Value="{StaticResource SearchHint}" />
                            </Trigger>
                            <Trigger Property="IsKeyboardFocused" Value="True">
                                <Setter Property="Background" Value="White" />
                            </Trigger>
                        </Style.Triggers>
                        <Setter Property="VerticalAlignment" Value="Bottom"/>
                    </Style>
                </TextBox.Style>
            </TextBox>

here is SearchHint style

   <VisualBrush x:Key="SearchHint" Stretch="None">
        <VisualBrush.Visual>
            <TextBox FontStyle="Italic" Background="White" Foreground="Gray" Text="Enter search text…"  />
        </VisualBrush.Visual>
    </VisualBrush>

The search box back ground is filled by the searchhint style. The problem I have now is how can I make the width of the visual brush fill the size of the textbox. Right now it fills only a portion of the textbox. The Text="Enter search text…" has a white background but the rest of the textbox is gray. I wanted to have a white background with gray hint text.

McGarnagle · Accepted Answer · 2013-07-22T16:21:17.757

3

Give the TextBox in the VisualBrush a large padding (to the right), and give the VisualBrush a left alignment:

<VisualBrush x:Key="SearchHint" Stretch="None" AlignmentX="Left">
    <VisualBrush.Visual>
        <TextBox FontStyle="Italic" Background="White" Foreground="Gray" Text="Enter search text…"  
            Padding="0,0,1000,0" />
    </VisualBrush.Visual>
</VisualBrush>

edited Jul 22 '13 at 16:21

answered Jul 22 '13 at 16:08

McGarnagle

101,349
31
229
260

score 1 · Answer 2 · edited May 23 '17 at 10:27

Well for what you're trying you can bind the Width of the control in the VisualBrush to your actual target's ActualWidth

something like:

<VisualBrush x:Key="SearchHint"
              Stretch="None">
  <VisualBrush.Visual>
    <TextBox Background="White"
              FontStyle="Italic"
              Foreground="Gray"
              Width="{Binding ElementName=tb, Path=ActualWidth}"
              Height="{Binding ElementName=tb, Path=ActualHeight}"
              Text="Enter search text…" />
  </VisualBrush.Visual>
</VisualBrush>

...

<TextBox Grid.Column="4"
          Height="22"
         TextChanged="textboxsearch_TextChanged"
          x:Name="tb"
          Margin="0,0,10,10">
  <TextBox.Style>
    <Style TargetType="TextBox">
      <Style.Triggers>
        <Trigger Property="Text"
                  Value="">
          <Setter Property="Background"
                  Value="{StaticResource SearchHint}" />
        </Trigger>
        <Trigger Property="IsKeyboardFocused"
                  Value="True">
          <Setter Property="Background"
                  Value="White" />
        </Trigger>
      </Style.Triggers>
      <Setter Property="VerticalAlignment"
              Value="Bottom" />
    </Style>
  </TextBox.Style>
</TextBox>

However

What you're "functionally" trying to do is referred to commonly as "Watermark" / "Placeholder text" and it's much simpler to use that approach than have a complicated VisualBrush with an actual control being turned into a Brush. Just my opinion.

If you want to try the Watermark approach This Answer gives a good example for you to work with.

thanks I was using watermark textbox approach but some how I couldn't use it for multiple textbox ...I will post my question in a separate post. — HXD, Jul 22 '13 at 16:34

How to make Search hint textbox background same as textbox background

2 Answers2