TextBoxの名前をプレースホルダにバインドする

Question

問題の背景を短くしてください：ResourceDictionaryにパックされたxamlのみのTextBoxプレースホルダを作成しようとしています。この時点で

- 私が見て、このようなページで使用されても動作するプロトタイプ、作られています：サーチを保持しているグリッドは、3つの要素から構成さ

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

を：

1. TextBox - 検索文字列を受け取ります。
2. TextBlock - 実際にPlaceHolderを保持します。 TextBoxのElementNameが空の文字列でないとすぐに消滅します。
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> 
   

   主な障害私は何を達成したいことはページ上でこのような外観です

私は実際にどのように動作するのか理解していないので、バインディングがあります。この時点で、3つの要素が同じ名前プロパティを共有する必要があります（これはかなり大きな障害です） 。

私は正確にこの構成に固執していませんが、私はそれが再利用可能で、コミュニティにとって有用で見栄えのよいものであることを望みます。

Answer 1

このXAMLは、テキストがTextBoxで空で、フォーカスがない場合に、指定されたメッセージを表示するテンプレート付きTextBoxを提供します。したがって、メッセージをクリックするとメッセージが消え、テキストを入力する（またはテキストをバインドする）とメッセージも消えます。

さらに使いやすくするために、さらに魅力的なバインディングなどを行うことができます。 I.テンプレート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}"/>