c# - two - Ancho de enlace de un cuadro de texto dentro de VisualBrush

binding two way wpf

Question

Tengo un pequeño problema que no puedo entender bien. Tengo un cuadro de texto donde estoy agregando "Sugerencia de búsqueda"

Estoy usando este fragmento de 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>

Como el fondo de la ventana no es blanco, obtengo un resultado como se muestra en la imagen. Traté de encuadernar el ancho de diferentes maneras, pero parece que nada funciona, ¿pueden sugerir?

Quiero que se vea así

¡gracias!

Answer 1

La forma de hacerlo es vincular el ancho del TextBox en CueBannerBrush (su VisualBrush) al principal principal de TextBox (txtboxSearch).

Sin embargo, esto solo funciona si coloca la definición CueBannerBrush en los recursos de control o ventana, no en los recursos 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>

Y luego tu XAML principal es igual, pero sin la definición de 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>

Ahora verás esto inicialmente:

Y cuando haces clic dentro: