Связать ширину текстового поля внутри VisualBrush

Question

У меня есть небольшая проблема, которая, похоже, не подходит. У меня есть текстовое поле, где я добавляю «Поиск» намек

Я использую этот код XAML фрагмент кода

<TextBox x:Name="txtboxSearch" Height="22" Margin="3,35,111,0" TextWrapping="Wrap" VerticalAlignment="Top" BorderThickness="1" MaxLines="1" MaxLength="256" Grid.Column="2" BorderBrush="#FF828790"> 
     <TextBox.Style> 
      <Style TargetType="TextBox" xmlns:sys="clr-namespace:System;assembly=mscorlib"> 
       <Style.Resources> 
        <VisualBrush x:Key="CueBannerBrush" AlignmentX="Left" AlignmentY="Center" Stretch="None"> 
         <VisualBrush.Visual> 
          <TextBox Text="Search" Foreground="LightGray" FontStyle="Italic" /> 
         </VisualBrush.Visual> 
        </VisualBrush> 
       </Style.Resources> 
       <Style.Triggers> 
        <Trigger Property="Text" Value="{x:Static sys:String.Empty}"> 
         <Setter Property="Background" Value="{StaticResource CueBannerBrush}" /> 
        </Trigger> 
        <Trigger Property="Text" Value="{x:Null}"> 
         <Setter Property="Background" Value="{StaticResource CueBannerBrush}" /> 
        </Trigger> 
        <Trigger Property="IsKeyboardFocused" Value="True"> 
         <Setter Property="Background" Value="White" /> 
        </Trigger> 
       </Style.Triggers> 
      </Style> 
     </TextBox.Style> 
    </TextBox> 

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

Я хочу, чтобы это выглядело, как это

спасибо!

Answer 1

Способ сделать это, чтобы связать ширину TextBox в CueBannerBrush (ваш VisualBrush) с основным родителем TextBox (txtboxSearch).

Однако, это работает только если поместить определение CueBannerBrush в контрольных или окно ресурсов, а не в TextBox.Style ресурсов:

<Window.Resources> 
    <VisualBrush x:Key="CueBannerBrush" TileMode="Tile" Stretch="None" AlignmentX="Left" AlignmentY="Center" > 
     <VisualBrush.Visual> 
      <TextBox 
        Width="{Binding ElementName=txtboxSearch, Path=ActualWidth}" 
        HorizontalAlignment="Stretch" x:Name="txtboxWatermark" Text="Search" Foreground="LightGray" FontStyle="Italic"/> 
     </VisualBrush.Visual> 
    </VisualBrush> 
</Window.Resources> 

И тогда ваш главный XAML это то же самое, но без Определение VisualBrush.

<Grid Background="Tomato"> 
    <TextBox x:Name="txtboxSearch" Height="22" Margin="3,35,111,0" TextWrapping="Wrap" VerticalAlignment="Top" BorderThickness="1" 
      MaxLines="1" MaxLength="256" Grid.Column="2" BorderBrush="#FF828790"> 
     <TextBox.Style> 
      <Style TargetType="TextBox"> 
       <Style.Triggers> 
        <Trigger Property="Text" Value="{x:Static sys:String.Empty}"> 
         <Setter Property="Background" Value="{StaticResource CueBannerBrush}" />        
        </Trigger> 
        <Trigger Property="Text" Value="{x:Null}"> 
         <Setter Property="Background" Value="{StaticResource CueBannerBrush}" /> 
        </Trigger> 
        <Trigger Property="IsKeyboardFocused" Value="True"> 
         <Setter Property="Background" Value="White" /> 
        </Trigger> 
       </Style.Triggers> 
      </Style> 
     </TextBox.Style> 
    </TextBox> 
</Grid> 

Теперь вы увидите, что это изначально:

И когда вы щелкаете внутри него: