Автор: Диптимайя Патра (Diptimaya Patra)

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

Введение

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

Создание проекта Silverlight

Запустите Expression Blend 3 и создайте приложение WPF. Назовите его WatermarkTextInWPF.

Откройте решение в Visual Studio 2008.

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

Добавьте класс, назовите его WatermarkHelper.cs

Теперь реализуйте интерфейс IMultivalueConverter.

Сразу после ввода имени интерфейса будет получено уведомление, предлагающее добавить пространство имен. Продолжите и добавьте пространство имен System.Windows.Data

Выберите параметр "Implicitly Implement Interface IMultivalueConverter" ("Реализовать интерфейс IMultivalueConverter неявно").

Теперь можно видеть, что добавлены следующие методы.

#region IMultiValueConverter Members
   public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    
{
   throw new NotImplementedException();
 
 
   }
  public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)
 
  {
  throw new NotImplementedException();
}
#endregion

Добавьте в метод Convert следующий код:

if (values[0] is bool && values[1] is bool)
{
  bool hasText = !(bool)values[0];
  bool hasFocus = (bool)values[1];
  if (hasFocus || hasText)
  return Visibility.Collapsed;
}
  return Visibility.Visible;

Этот код означает, что при наличии текста или фокуса свойство Visibility изменяется на Collapsed, а если текст или фокус отсутствует, то возвращается значение Visibility.Visible.

Пока что мы не будем использовать другой метод.

Перейдите в выделенный код xaml и добавьте в него пространство имен, чтобы можно было использовать класс WatermarkHelper.

Добавьте стили в Window.Resources.

<Window.Resources>
  <SolidColorBrush x:Key="brushWatermarkBackground" Color="White" />
  <SolidColorBrush x:Key="brushWatermarkForeground" Color="LightSteelBlue" />
  <SolidColorBrush x:Key="brushWatermarkBorder" Color="Indigo" />
  <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
  <local:WatermarkHelper x:Key="WatermarkHelper" />
    
  <Style x:Key="EntryFieldStyle" TargetType="Grid" >
  <Setter Property="HorizontalAlignment" Value="Stretch" />
  <Setter Property="VerticalAlignment" Value="Center" />
  <Setter Property="Margin" Value="20,0" />
  </Style>
</Window.Resources>

Теперь добавьте следующие два элемента Grid в элемент Grid LayoutRoot. Затем добавьте в этот элемент Grid элементы TextBlock и TextBox.

Элемент TextBlock предназначен для текста водяного знака, а TextBox — для пользовательского ввода.

<Grid x:Name="LayoutRoot" Background="BlanchedAlmond">
  <Grid.RowDefinitions>
    
  <RowDefinition />
  <RowDefinition />
  <RowDefinition />
  </Grid.RowDefinitions>
  <Grid Grid.Row="0" Background="{StaticResource brushWatermarkBackground}" Style="{StaticResource EntryFieldStyle}" >
  <TextBlock Margin="5,2" Text="Type First Name ..." Foreground="{StaticResource brushWatermarkForeground}"
   Visibility="{Binding ElementName=txtUserEntry1, Path=Text.IsEmpty, Converter={StaticResource BooleanToVisibilityConverter}}" />
  <TextBox Name="txtUserEntry1" Background="Transparent" BorderBrush="{StaticResource brushWatermarkBorder}" />
  </Grid>
  <Grid Grid.Row="1" Background="{StaticResource brushWatermarkBackground}" Style="{StaticResource EntryFieldStyle}" >
  <TextBlock Margin="5,2" Text="Type Last Name ..." Foreground="{StaticResource brushWatermarkForeground}" >
  <TextBlock.Visibility>
    
   <MultiBinding Converter="{StaticResource WatermarkHelper}">
  <Binding ElementName="txtUserEntry2" Path="Text.IsEmpty" />
    
  <Binding ElementName="txtUserEntry2" Path="IsFocused" />
  </MultiBinding>
  </TextBlock.Visibility>
  </TextBlock>
    
  <TextBox Name="txtUserEntry2" Background="Transparent" BorderBrush="{StaticResource brushWatermarkBorder}" />
  </Grid>
</Grid>

Итак, приведенный выше код xaml добавлен в Window.

В сущности мы создадим два текстовых поля с водяными знаками. При этом мы выполнили привязку к свойствам, которые нужны для функционирования водяного знака.

Теперь наше приложение готово к работе. Нажмите клавишу F5, чтобы запустить его.

В приложении имеется два текстовых поля TextBox с фоновыми подсказками соответственно "Type First Name ..." ("Укажите имя") и "Type Last Name" ("Укажите фамилию").

В первом текстовом поле фоновая подсказка исчезает при начале ввода. Во втором текстовом поле фоновая подсказка исчезает при перемещении в него указателя мыши (т. е. фокуса).

Для первого текстового поля мы использовали BooleanVisibilityConverter, установленный по умолчанию.

<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />

Для второго текстового поля мы использовали WatermarkHelper.

Вот и все, можно экспериментировать с этим дальше.

Получайте удовольствие от кодирования.