Как реализовать текст по умолчанию для поля поиска в WPF?

Я хочу реализовать что-то вроде "изменение текста по умолчанию в поле поиска " для текстового поля поиска WPF. Коробка должна показать некоторым серым "Поиск.."текст, когда он пуст, а затем он должен нормально функционировать, когда текст вводится. В связанной статье показано, как это сделать в javascript. Как начать этот путь в WPF? Лучшая идея, которую я имел до сих пор, - это другое текстовое поле поверх основного, которое становится невидимым всякий раз, когда текстовое поле поиска фокус или текст.

6 ответов


попробуйте образец InfoTextBox из Bag-o-Tricks Кевина Мура. Вы можете скачать его с http://work.j832.com/2008/01/real-update-to-bag-o-tricks.html


этот стиль будет отображать текст с помощью свойства background и visualbrush. Как только элемент управления получает фокус, текст удаляется.

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

лучший способ, я думаю, для этих типов вещей, чтобы установить фон с помощью визуальной кисти. Визуальная кисть позволяет рисовать фон с помощью визуальных элементов, комбинировать его с триггером на основе пустого текста, и все готово.

пример для пустого сообщения списка здесь, в основном то же самое. http://adammills.wordpress.com/2010/08/04/simple-empty-template-for-itemscontrols/


как всегда в WPF, есть много способов достичь своей цели.

возможно, самый чистый способ-подкласс TextBox и добавьте новое свойство под названием HintText. Шаблон для вашего элемента управления будет отображать HintText (возможно, курсивом и серым) до тех пор, пока Text пустой (""). В противном случае он отобразит Text как обычный TextBox.

альтернативой, которая не включает в себя написание собственного элемента управления, является повторный шаблон TextBox и использовать Tag свойство для хранения текстовой подсказки.

Другой альтернативой является написать UserControl который сочетает в себе TextBox с, скажем, a TextBlock внутри Grid. The TextBlock будет содержать текст подсказки и будет отображаться только если TextBox ' s Text - это пустое. Это, вероятно, легче всего достичь, но также является наименее гибким.


Я думаю, что WatermarkTextBox, включенный в WPF extended toolkit, делает именно то, что вы хотите.

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


вы можете преобразовать текстовое поле, чтобы иметь серый текст всякий раз, когда его пустой и переменная, которая скажет вам, что это пусто, так что при нажатии на поиск он не будет искать "поиск"..."

или вы можете использовать что-то похожее на то, что вы говорите, но вместо текстового поля выше вы можете иметь текст ниже. Если вверху у вас есть текстовое поле с прозрачным фоном, а внизу у вас есть метка, которая имеет "поиск", когда верхнее текстовое поле пусто, что должно решить проблема.