如何将 Textbox 样式变成可重用的控件模板？

Question

我希望我的文本框具有水印样式。我有下面的代码，我在这里得到了https://stackoverflow.com/a/21672408/9928363<Grid>    <TextBox  Width="250"  VerticalAlignment="Center" HorizontalAlignment="Left" x:Name="SearchTermTextBox" Margin="5"/>    <TextBlock IsHitTestVisible="False" Text="Enter Search Term Here" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="10,0,0,0" Foreground="DarkGray">        <TextBlock.Style>            <Style TargetType="{x:Type TextBlock}">                <Setter Property="Visibility" Value="Collapsed"/>                <Style.Triggers>                    <DataTrigger Binding="{Binding Text, ElementName=SearchTermTextBox}" Value="">                        <Setter Property="Visibility" Value="Visible"/>                    </DataTrigger>                </Style.Triggers>            </Style>        </TextBlock.Style>    </TextBlock></Grid>我有很多文本框，我只希望其中一些使用该样式，但不是全部。我将如何做到这一点？

Answer 1

有多种方法可以将水印添加到文本框，包括替换 TextBox 的 ControlTemplate（正如您的问题所暗示的那样）。但是，替换 TextBox 的 ControlTemplate 可能并不理想，因为这样做您需要负责绘制整个控件，包括边框、不同状态的样式等。这并不难（您可以使用 Visual Studio 或 Espression Blend 复制您当前主题中的模板），但除非您做了大量工作，否则您将失去将常用控件的样式调整为当前 Windows 主题的 WPF 功能。

如果您想要一种不需要更改控件模板的简单、可重用、纯 XAML 方法，那么使用 a 声明样式资源VisualBrush是一种有效的方法。

见下文，我们有 3 个文本框，水印样式应用于其中两个。当文本框具有输入焦点时，通过删除水印，此样式比您的示例更进一步。

<Window ...>

    <Window.Resources>

        <Style TargetType="TextBox" x:Key="Watermark">

            <Style.Resources>

                <VisualBrush x:Key="WatermarkBrush" AlignmentX="Left" AlignmentY="Center" Stretch="None">

                    <VisualBrush.Visual>

                        <Label Content="Enter Search Term Here" Foreground="LightGray" />

                    </VisualBrush.Visual>

                </VisualBrush>

            </Style.Resources>

            <Style.Triggers>

                <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=Text}" Value="">

                    <Setter Property="Background" Value="{StaticResource WatermarkBrush}" />

                </DataTrigger>

                <Trigger Property="IsKeyboardFocused" Value="True">

                    <Setter Property="Background" Value="{x:Null}" />

                </Trigger>

            </Style.Triggers>

        </Style>

    </Window.Resources>

    <StackPanel>

        <TextBox Width="250" VerticalAlignment="Center" FontSize="20"

            HorizontalAlignment="Left" Style="{StaticResource Watermark}"/>

        <TextBox Width="250" VerticalAlignment="Center" 

            HorizontalAlignment="Left"/>

        <TextBox Width="250" VerticalAlignment="Center" 

            HorizontalAlignment="Left" Style="{StaticResource Watermark}"/>

    </StackPanel>

</Window>

如果您需要水印对不同的字体大小做出反应，您可以使用该Stretch属性：-

<VisualBrush x:Key="WatermarkBrush" AlignmentX="Left" AlignmentY="Center" Stretch="Uniform">

    <VisualBrush.Visual>

        <Label Padding="2 1" Content="Enter Search Term Here" Foreground="LightGray" />

    </VisualBrush.Visual>

</VisualBrush>