Поле ввода пароля

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

По умолчанию поле ввода пароля предоставляет пользователю возможность просмотреть свой пароль, удерживая кнопку показа. Можно отключить кнопку показа либо предоставить альтернативный механизм отображения пароля, например флажок.

Выбор правильного элемента управления

Элемент управления PasswordBox можно использовать для сбора паролей или других конфиденциальных данных, например номеров карт социального страхования.

Дополнительные сведения можно найти в статье об элементах управления текстом.

Рекомендации

• Используйте метку или подстановочный текст, если назначение поля ввода пароля не очевидно. Метка отображается независимо от того, указано ли значение в поле ввода. Подстановочный текст отображается внутри поля ввода текста и пропадает после ввода значения.
• Задайте для поля ввода пароля достаточную ширину, чтобы можно было ввести ряд значений. Длина слов различается в зависимости от языка. Поэтому если вы собираетесь выводить свое приложение на международный уровень, следует учитывать особенности локализации.
• Не размещайте дополнительные элементы управления рядом с полем для ввода пароля. Поле ввода пароля имеет кнопку показа пароля, с помощью которой можно проверить введенный пароль. Поэтому размещение справа другого элемента управления может привести к тому, что пользователь случайно раскроет свой пароль, пытаясь нажать на другой элемент управления. Во избежание такой ситуации оставьте между полем и другим элементом управления достаточно места или расположите этот элемент на следующей строке.
• Рассмотрите возможность предоставления двух полей ввода пароля для создания учетной записи: одного поля для нового пароля и второго — для подтверждения пароля.
• Для выполнения входа отображайте только одно поле ввода пароля.
• Когда поле ввода пароля используется для PIN-кода, рассмотрите возможность предоставления незамедлительного ответа сразу после ввода последней цифры без использования кнопки подтверждения.

Примеры

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

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

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

Нажатие кнопки «Показать» справа позволяет посмотреть вводимый текст пароля:

UWP и WinUI 2

Важно!

Сведения и примеры в этой статье оптимизированы для приложений, использующих Windows App SDK и WinUI 3, но обычно применимы к приложениям UWP, использующим WinUI 2. Сведения и примеры для конкретной платформы см. в справочнике по API UWP.

В этом разделе содержатся сведения, необходимые для использования элемента управления в приложении UWP или WinUI 2.

API для этого элемента управления существуют в пространстве имен Windows.UI.Xaml.Controls .

• API UWP:класс PasswordBox, свойство Password, свойство PasswordChar, свойство PasswordRevealMode, событие PasswordChanged
• Откройте приложение Коллекции WinUI 2 и просмотрите PasswordBox в действии. Приложения из коллекции WinUI 2 включают интерактивные примеры большинства элементов управления, возможностей и функций WinUI 2. Получите приложение из Microsoft Store или получите исходный код в GitHub.

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

Создание поля ввода пароля

• Важные API:класс PasswordBox, свойство Password, свойство PasswordChar, свойство PasswordRevealMode, событие PasswordChanged

Откройте приложение коллекции WinUI 3 и просмотрите PasswordBox в действии.

Приложение "Коллекция WinUI 3" содержит интерактивные примеры большинства элементов управления, функций и функций WinUI 3. Получение приложения из Microsoft Store или исходный код на сайте GitHub

Используйте свойство Password, чтобы получить или задать содержимое элемента PasswordBox. Это можно сделать в обработчике для события PasswordChanged, чтобы выполнять проверку, пока пользователь вводит пароль. Или можно использовать другое событие, например кнопку Щелкните, чтобы выполнять проверку после того, как пользователь завершит ввод текста.

Ниже приведен фрагмент кода XAML для поля ввода пароля, демонстрирующий внешний вид элемента PasswordBox по умолчанию. При вводе пароля программа проверяет, не вводит ли пользователь буквально слово Password (Пароль). Если это так, то на экране будет отображено соответствующее сообщение.

<StackPanel>  
  <PasswordBox x:Name="passwordBox" Width="200" MaxLength="16"
             PasswordChanged="passwordBox_PasswordChanged"/>

  <TextBlock x:Name="statusText" Margin="10" HorizontalAlignment="Center" />
</StackPanel>   

private void passwordBox_PasswordChanged(object sender, RoutedEventArgs e)
{
    if (passwordBox.Password == "Password")
    {
        statusText.Text = "'Password' is not allowed as a password.";
    }
    else
    {
        statusText.Text = string.Empty;
    }
}

Ниже показан результат выполнения этого кода, если в качестве пароля пользователь вводит слово Password (Пароль).

Знак пароля

Знак, используемый для маскировки пароля, можно изменить, задав свойство PasswordChar. Здесь маркер по умолчанию заменяется знаком фунта.

<PasswordBox x:Name="passwordBox" Width="300" PasswordChar="#"/>

Результат выглядит так:

Заголовки и подстановочный текст

Свойства Header и PlaceholderText можно использовать, чтобы предоставить контекст для элемента PasswordBox. Это особенно полезно при наличии нескольких полей, например в форме для изменения пароля.

<PasswordBox x:Name="passwordBox" Width="200" Header="Password" PlaceholderText="Enter your password"/>

Максимальная длина

Укажите максимальное количество вводимых символов с помощью свойства MaxLength. Свойства для указания минимальной длины не существует, но вы можете проверить длину пароля и выполнить любую другую проверку в коде приложения.

Режим показа пароля

Элемент управления PasswordBox имеет встроенную кнопку, нажав которую можно отобразить введенный пароль. Так выглядит результат действия пользователя. Если отпустить кнопку, пароль будет автоматически скрыт.

Режим временного просмотра

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

Значение свойства PasswordRevealMode — не единственный фактор, который определяет видимость кнопки показа пароля. Среди других факторов: отображается ли элемент управления над минимальной шириной, имеет ли PasswordBox фокус и содержит ли поле ввода текста хотя бы один символ. Кнопка показа пароля отображается, только когда поле PasswordBox получает фокус в первый раз и в него вводится символ. Если PasswordBox теряет фокус, а затем вновь получает его, кнопка показа не отображается, пока пароль не очистят и не начнут вводить заново.

Режимы Hidden и Visible

Другие значения перечисления PasswordRevealMode — Hidden и Visible — скрывают кнопку показа пароля и позволяют программно управлять видимостью пароля.

Чтобы пароль был всегда скрыт, установите для параметра PasswordRevealMode значение Hidden. Если вам не нужно, чтобы пароль был всегда скрыт, можно предоставить настраиваемый пользовательский интерфейс, чтобы пользователь мог переключать PasswordRevealMode между Hidden и Visible. Например, можно использовать флажок, чтобы включать или скрывать пароль, как показано в следующем примере. Чтобы позволить пользователю переключать режимы, можно использовать и другие элементы управления, например ToggleButton.

В этом примере показано, как использовать CheckBox, чтобы позволить пользователю переключать режим показа элемента PasswordBox.

<StackPanel Width="200">
    <PasswordBox Name="passwordBox1"
                 PasswordRevealMode="Hidden"/>
    <CheckBox Name="revealModeCheckBox" Content="Show password"
              IsChecked="False"
              Checked="CheckBox_Changed" Unchecked="CheckBox_Changed"/>
</StackPanel>

private void CheckBox_Changed(object sender, RoutedEventArgs e)
{
    if (revealModeCheckBox.IsChecked == true)
    {
        passwordBox1.PasswordRevealMode = PasswordRevealMode.Visible;
    }
    else
    {
        passwordBox1.PasswordRevealMode = PasswordRevealMode.Hidden;
    }
}

Этот элемент управления PasswordBox выглядит следующим образом.

Выбор подходящей клавиатуры для элемента управления текстом

Чтобы упростить пользователям ввод данных с помощью сенсорной клавиатуры или панели функционального ввода, можно настроить тип вводимых данных элемента управления для ввода текста таким образом, чтобы элемент управления соответствовал типу данных, которые должен вводить пользователь. PasswordBox поддерживает только значения типа вводимых данных Password и NumericPin. Любое другое значение будет проигнорировано.

Дополнительные сведения об использовании типов вводимых данных см. в разделе Использование типа вводимых данных для изменения сенсорной клавиатуры.

Получение примера кода

• Пример коллекции WinUI — просмотр всех элементов управления XAML в интерактивном формате.

Похожие статьи

Текстовые элементы управления

• Руководство по проверке орфографии
• Добавление поиска
• Руководство по текстовому вводу
• Класс TextBox
• class
• Свойство String.Length