Geek Answers Handbook

Bind the width of the text box inside VisualBrush

I have a little problem that I cannot understand. I have a text box where I add "Search Hint"

enter image description here

I use this XAML fragment

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

Since the background of the window is not white, I get the result as shown. I tried linking the width in several different ways, but nothing works, can you suggest?

I want it to look like this enter image description here

Thank you!

+5
source share
1 answer

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

However, this only works if you put the CueBannerBrush definition in control resources or windows, and not in 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 will be the same, but without a 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 will see this initially: :

And when you click inside it: :

+2
source

More articles:


All Articles