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 =“输入搜索文本...”具有白色背景，但文本框的其余部分为灰色。我想要一个带有灰色提示文字的白色背景。

Answer 1

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

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

<强>然而

你在“功能上”试图做的事情通常被称为“水印”/“占位符文本”，使用这种方法比使用实际控制变为复杂VisualBrush要简单得多一把刷子。只是我的意见。

如果您想尝试使用水印方法，This Answer为您提供了一个很好的例子。

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

2 个答案: