将 TexBox 名称绑定到 TextBlock 名称、占位符

Question

关于这个问题的简短背景：我正在尝试制作一个可读的，xaml 只有 TextBox 占位符，它被打包到 ResourceDictionary。

至此 - 我制作了一个运行良好的原型，它在页面上的外观和使用如下所示：

<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 个元素的搜索框网格：

TextBox - 将接收搜索字符串；
TextBlock - 实际上包含 PlaceHolder。只要 TextBox 的 ElementName 不是空字符串，它就会消失；
图片 - 搜索框右侧的自定义图标。

我想要实现的是在页面上看起来像这样：

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

与此样式类似，在 ResourceDictionary 中有描述：

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

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

我不完全坚持这种结构，但我希望它可以重复使用，对社区有用并且外观整洁。

Answer 1

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

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

当我在做样式时进行快速搜索时，我偶然发现了，这几乎是一回事。因此值得给予公平的参考。我更喜欢使用键并划分我的模板和样式。如果我想在其他地方使用稍微不同的样式，那么我可以只做 BasedOn 样式（我经常这样做）。它实际上是 6 个和 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}"/>

将 TexBox 名称绑定到 TextBlock 名称、占位符

Binding TexBox Name to TextBlock Name, Placeholder

wpf

xaml

binding

placeholder

key-bindings