¿Cómo se implementa el texto predeterminado para un cuadro de búsqueda en WPF?

search textbox

Question

Quiero implementar algo exactamente como " Cambiar el texto predeterminado en el cuadro de búsqueda " para un cuadro de búsqueda WPF TextBox. El cuadro debe mostrar un texto en gris "Buscar ..." cuando está vacío, y luego debería funcionar normalmente cuando se ingresa el texto. El artículo vinculado muestra cómo hacer esto en javascript. ¿Cómo comenzaría uno en este camino en WPF? La mejor idea que he tenido hasta ahora es otro cuadro de texto sobre el principal que se vuelve invisible cada vez que el cuadro de texto de búsqueda obtiene foco o texto.

Answer 1

Podría transformar el cuadro de texto para tener texto gris siempre que esté vacío y una variable que le diga que está vacío, de modo que cuando haga clic en Buscar no vaya a buscar "Buscar ..."

O podría usar algo similar a lo que está diciendo, pero en lugar de un cuadro de texto de arriba podría tener el texto a continuación. Si está arriba tiene un cuadro de texto con fondo transparente y en la parte inferior tiene una etiqueta que dice "Buscar" cuando el cuadro de texto superior está vacío y debería resolver el problema.

Answer 2

Pruebe la muestra de InfoTextBox de Bag-o-Tricks de Kevin Moore. Puede descargarlo desde http://work.j832.com/2008/01/real-update-to-bag-o-tricks.html

Answer 3

La mejor manera en que pienso para este tipo de cosas es establecer el fondo con un pincel visual. El pincel visual le permite pintar un fondo con elementos visuales, combinarlo con un activador basado en que el texto esté vacío y listo.

Ejemplo de mensaje de caja vacía aparece aquí, básicamente lo mismo. http://adammills.wordpress.com/2010/08/04/simple-empty-template-for-itemscontrols/

Answer 4

Este estilo mostrará texto usando una propiedad de fondo y un visualbrush. Una vez que el control obtiene el foco, el texto se elimina.

    <TextBox.Style>
            <Style TargetType="TextBox">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=Text}" Value="">
                        <Setter Property="Background">
                            <Setter.Value>
                                <VisualBrush Stretch="None">
                                    <VisualBrush.Visual>
                                        <TextBlock Text="Enter value" Foreground="Gray"/>
                                    </VisualBrush.Visual>
                                </VisualBrush>
                            </Setter.Value>
                        </Setter>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=Text}" Value="{x:Null}">
                        <Setter Property="Background">
                            <Setter.Value>
                                <VisualBrush Stretch="None">
                                    <VisualBrush.Visual>
                                        <TextBlock Text="Enter value" Foreground="Gray"/>
                                    </VisualBrush.Visual>
                                </VisualBrush>
                            </Setter.Value>
                        </Setter>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsFocused}" Value="True">
                        <Setter Property="Background">
                            <Setter.Value>
                                <VisualBrush Stretch="None">
                                </VisualBrush>
                            </Setter.Value>
                        </Setter>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </TextBox.Style>

Answer 5

Como siempre en WPF, hay muchas maneras de lograr su objetivo.

Quizás la forma más limpia es subclasificar TextBox y agregar una nueva propiedad llamada HintText . La plantilla para su control mostraría HintText (probablemente en cursiva y gris) mientras Text esté vacío ( "" ). De lo contrario, mostraría el Text como un TextBox Text normal.

Una alternativa que no implica escribir su propio control es volver a TextBox plantilla de TextBox y usar la propiedad Tag para almacenar el texto de sugerencia.

Otra alternativa es escribir un UserControl que combine un TextBox con, digamos, un TextBlock dentro de la misma Grid . El TextBlock contendría el texto de sugerencia y solo se mostraría si TextBox ''s Text está vacío. Esto es probablemente el más fácil de lograr, pero también es el menos flexible.

Answer 6

Creo que WatermarkTextBox incluido en el kit de herramientas ampliado de WPF hace exactamente lo que quiere.

http://wpftoolkit.codeplex.com/wikipage?title=WatermarkTextBox&referringTitle=Documentation