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

Question

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

Answer 1

Этот стиль будет отображать текст, используя свойство background и визуальную кисть. После того, как элемент управления сфокусирован, текст удаляется.

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

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

Answer 3

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

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

Answer 4

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

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

Answer 5

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

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

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

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

Answer 6

Вы можете преобразовать текстовое поле в серый текст всякий раз, когда оно пустое, и переменную, которая сообщит вам, что она пуста, чтобы при нажатии кнопки «Поиск» он не мог искать «Поиск ...»

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