如何使搜索提示文本框背景与文本框背景相同

Question

我有搜索提示文本框

       <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>

这是SearchHint风格的

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

搜索框的背景由searchhint样式填充。我现在的问题是如何使视觉画笔的宽度填充文本框的大小。现在它只填充了文本框的一部分。Text="Enter search Text…"的背景为白色，但文本框的其余部分为灰色。我想要一个白色的背景和灰色的提示文字。

Answer 1

给VisualBrush中的TextBox一个大的填充（向右），并给VisualBruth一个左对齐：

<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>

Answer 2

您可以将VisualBrush中控件的宽度绑定到实际目标的ActualWidth

类似于：

<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>

但是

你"功能性"尝试做的通常被称为"水印"/"占位符文本"，使用这种方法比将实际控件转换为Brush的复杂VisualBrush要简单得多。只是我的看法。

如果你想尝试水印方法，这个答案为你提供了一个很好的例子。