Bind width of a textbox inside VisualBrush

Question

I have a small issue that I can't seem to get right. I have a textbox where I'm adding "Search hint"

I'm using this XAML snippet

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

Because background of the window is not white I am getting a result as shown in picture. I tried to bind width multiple different ways, but nothing seem to work, can you please suggest?

I want it to look like this

thank you!

Answer 1

The way to do this is to bind the width of the TextBox in CueBannerBrush (your VisualBrush) to the main TextBox parent (txtboxSearch).

However, this only works if you place the CueBannerBrush definition into the control or window resources, not in the TextBox.Style resources:

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

And then your main XAML is just the same, but without the VisualBrush definition.

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

Now you'll see this initially:

And when you click inside it: