Binding TexBox Name to TextBlock Name, Placeholder

Question

Краткая информация о проблеме: Я пытаюсь сделать читаемый, только для Xaml TextBox Placeholder, который упакован в 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, который держит SearchBox состоят из 3-х элементов:

1. TextBox - который получит строку поиска;
2. TextBlock - который фактически содержит PlaceHolder. Он исчезает, как только ElementName из TextBox не является пустой строкой;
3. Изображение - пользовательский значок справа от 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> 

Основным препятствием на моем так как я не очень хорошо понимаю, как это работает, и тот факт, что в этот момент три элемента должны будут иметь одно и то же свойство Name (что, я полагаю, тоже довольно большое препятствие) ,

Я не придерживаюсь именно этой конструкции, но хочу, чтобы она была многоразовой, полезной для сообщества и аккуратного взгляда.

Answer 1

Этот XAML предоставит шаблонный TextBox, который отобразит данное сообщение, если текст пуст на TextBox, и он не имеет фокуса. Поэтому, когда вы нажимаете на него, сообщение исчезает, и если вы введете текст (или связали текст), сообщение также исчезнет.

Вы можете делать любые дополнительные причудливые привязки и такие, если вы хотите сделать его более пригодным для повторного использования. И.Е. вы можете использовать шаблон DisplayText.Text, чтобы позволить динамические сообщения.

Когда я делал быстрый поиск, так как был укладом, я наткнулся на This, что почти то же самое. Поэтому было бы полезно дать справедливую ссылку. Я предпочитаю использовать ключи и разделять свои шаблоны и стили. В случае, если я хочу немного другой стиль в другом месте, тогда я могу просто создать стиль 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}"/>