Chiều rộng của một hộp văn bản bên trong VisualBrush

Question

Tôi có một vấn đề nhỏ mà tôi dường như không thể làm đúng. Tôi có một textbox nơi tôi thêm "Gợi ý tìm kiếm"

Tôi đang sử dụng XAML này Đoạn

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

Bởi vì nền của cửa sổ không phải là màu trắng Tôi nhận được một kết quả như thể hiện trong hình ảnh. Tôi đã cố gắng ràng buộc chiều rộng theo nhiều cách khác nhau, nhưng không có gì có vẻ hiệu quả, bạn có thể đề nghị không?

Tôi muốn nó trông như thế này

cảm ơn bạn!

Answer 1

Cách để thực hiện việc này là liên kết chiều rộng của TextBox trong CueBannerBrush (VisualBrush) của bạn với phụ huynh TextBox chính (txtboxSearch).

Tuy nhiên, điều này chỉ hoạt động nếu bạn đặt định nghĩa CueBannerBrush vào sự kiểm soát hoặc cửa sổ nguồn lực, không có trong nguồn 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> 

Và sau đó XAML chính của bạn chỉ là như nhau, nhưng nếu không có sự Định nghĩa 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> 

Bây giờ bạn sẽ thấy điều này ban đầu:

Và khi bạn nhấp vào bên trong nó: