将 TexBox 名称绑定到文本块名称、占位符

Question

问题的简短背景：我正在尝试制作一个可读的，仅限xaml的文本框占位符，它被打包到资源字典中。

在这一点上 - 我已经制作了一个工作良好的原型，它在页面上的外观和使用如下所示：

<Grid>
        <TextBox   Style="{StaticResource SearchBox}"                               
                    Width="325"                         
                    x:Name="UsarioDisponiblesSearch"/>
        <TextBlock IsHitTestVisible="False"
                        Text="Search..." 
                        VerticalAlignment="Center"
                        HorizontalAlignment="Left"
                        Margin="5,0,0,0"
                        Foreground="{StaticResource WhiteFadedBrush}">
            <TextBlock.Style>
                <Style TargetType="{x:Type TextBlock}">
                    <Setter Property="Visibility" Value="Collapsed"/>
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding Text, ElementName=UsarioDisponiblesSearch}" Value="">
                            <Setter Property="Visibility" Value="Visible"/>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </TextBlock.Style>
        </TextBlock>            
        <Image Source="/img/search.png" Height="15" HorizontalAlignment="Right" Margin="0,0,5,0" />
</Grid>

包含搜索框的网格由 3 个元素组成：

1. 文本框 - 将接收搜索字符串;
2. TextBlock - 实际上保存占位符。只要文本框的元素名称不是空字符串，它就会消失;
3. 图像 - 搜索框右侧的自定义图标。

我想要实现的是页面上的外观：

       <Grid>
            <TextBox   Style="{StaticResource SearchBox}"                               
                        Width="325"                         
                        x:Name="UarioDisponiblesSearch"/>
            <TextBlock Style="{StaticResource PlaceHolder}"
                       x:Name="{Binding Text, ElementName=UarioDisponiblesSearch}" />
        </Grid>

就像在资源字典中描述的这种样式一样：

<Style x:Key="SearchBox" TargetType="{x:Type TextBox}">
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="BorderThickness" Value="0" />
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="HorizontalAlignment" Value="Left" />
    <Setter Property="Margin" Value="5,0,0,0" />
    <Setter Property="Foreground" Value="{StaticResource WhiteBrush}" />        
</Style>
<Style x:Key="Placeholder" TargetType="{x:Type TextBlock}">
    <Setter Property="IsHitTestVisible" Value="False" />
    <Setter Property="Text" Value="Search..." />
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="HorizontalAlignment" Value="Center" />
    <Setter Property="Margin" Value="5,0,0,0" />
    <Setter Property="Foreground" Value="{StaticResource WhiteFadedBrush}" />
    <Setter Property="Visibility" Value="Collapsed"/>
    <Style.Triggers>
        <DataTrigger Binding="{Binding Text, RelativeSource={RelativeSource Self}}" Value="">
            <Setter Property="Visibility" Value="Visible"/>
        </DataTrigger>
    </Style.Triggers>
</Style>

我前进道路上的主要障碍是绑定，因为我仍然不太了解它是如何工作的，事实上，在这一点上，三个元素必须共享相同的 Name 属性（我想这也是一个相当大的障碍）。

我并不完全坚持这种结构，但我希望它是可重复使用的，对社区有用并且看起来很整洁。

Answer 1

此 XAML 将提供一个模板化文本框，如果文本在TextBox上为空且没有焦点，则将显示给定消息。因此，当您单击它时，消息会消失，如果您输入文本（或具有绑定文本），该消息也会消失。

如果你想让它更可重用，你可以做任何进一步的花哨绑定等等。 即，您可以将DisplayText.Text模板绑定到某些内容以允许动态消息。

当我在造型时进行快速搜索时，我偶然发现了这个，这几乎是一回事。因此，值得给予公平的参考。我更喜欢使用键并划分我的模板和样式。如果我想要其他地方稍微不同的风格，那么我可以做一个BasedOn风格（我经常这样做）。它真的是 6 个和另一个的六个（尽管我没有测试链接的代码）。

<ControlTemplate x:Key="SearchMessageTextBoxControlTemplate" TargetType="{x:Type TextBox}">
    <Grid>
        <Grid x:Name="SearchTextGrid">
            <ScrollViewer x:Name="PART_ContentHost" Background="{TemplateBinding Background}" />
            <TextBlock x:Name="DisplayText" Text="Type Your Search..." 
                           HorizontalAlignment="Center" 
                           VerticalAlignment="Center" 
                           Opacity="0.5"
                           Visibility="Hidden"
                           FontSize="{TemplateBinding FontSize}"/>
        </Grid>
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="IsFocused" Value="True">
            <Setter TargetName="DisplayText" Property="Visibility" Value="Hidden"/>
        </Trigger>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsFocused"  Value="False"/>
                <Condition Property="Text" Value=""/>
            </MultiTrigger.Conditions>
            <Setter TargetName="DisplayText" Property="Visibility" Value="Visible"/>
        </MultiTrigger>
    </ControlTemplate.Triggers>
</ControlTemplate>
<Style x:Key="WaterMarkMessageTextBoxStyle"  TargetType="{x:Type TextBox}">
    <Setter Property="FontSize" Value="20"/>
    <Setter Property="Background" Value="DarkSlateGray"/>
    <Setter Property="CaretBrush" Value="White"/>
    <Setter Property="Foreground" Value="#F2FFE5"/>
    <Setter Property="FontWeight" Value="Normal"/>
    <Setter Property="BorderThickness" Value="2"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="TextWrapping" Value="Wrap"/>
    <Setter Property="Template" Value="{StaticResource SearchMessageTextBoxControlTemplate}"/>
</Style>

您将按如下方式使用它：

 <TextBox Style="{StaticResource WaterMarkMessageTextBoxStyle}"/>