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>

Grid，它包含3个元素：

TextBox - 将接收搜索字符串;
TextBlock - 实际上持有PlaceHolder。一旦TextBox的ElementName不是空字符串，它就会消失;
图片 - SearchBox右侧的自定义图标。

我想要达到的目标是在页面上看起来像这样：

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

我去那里的主要障碍是Binding，因为我还不太了解它是如何工作的，事实上，在这一点上，三个元素将必须共享相同的Name属性（我想这也是一个非常大的障碍。

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

Answer 1

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

如果您想让它更易于重复使用，您可以进行任何进一步的花式绑定。 I.E.您可以将DisplayText.Text模板绑定到允许动态消息的内容。

当我在做造型时快速搜索时，我偶然发现This，这几乎是一回事。所以值得公平参考。我更喜欢使用键并划分我的模板和样式。如果我想在其他地方略有不同的风格，那么我可以做一个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名称，占位符

1 个答案: