Поделиться через

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

  • Статья

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

Текст ввода текста в поле пароля

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

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

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

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

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

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

Примеры

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

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

Поле пароля в состоянии rest с текстом подсказки

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

Текст ввода текста в поле пароля

Нажатие кнопки "показать" справа дает представление о вводе текста пароля:

Отображается текст поля пароля

UWP и WinUI 2

Внимание

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

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

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

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

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

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

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

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

Ниже приведен код XAML для элемента управления "Поле пароля", демонстрирующий внешний вид passwordBox по умолчанию. Когда пользователь вводит пароль, проверьте, является литеральным значением "Пароль". Если это так, отображается сообщение пользователю.

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

Ниже приведен результат при выполнении этого кода, и пользователь вводит пароль.

Поле пароля с сообщением проверки

Символ пароля

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

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

Результат выглядит следующим образом.

Поле пароля с пользовательским символом

Заголовки и текст заполнителя

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

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

Поле пароля в состоянии rest с текстом подсказки

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

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

Режим отображения пароля

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

Отображается текст поля пароля

Режим просмотра

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

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

Скрытые и видимые режимы

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

Чтобы всегда скрыть пароль, установите для параметра PasswordRevealMode значение Hidden. Если вам не нужно, чтобы пароль всегда был скрыт, вы можете предоставить пользовательский интерфейс, чтобы разрешить пользователю переключать парольRevealMode между Скрытым и Видимым. Например, можно использовать флажок, чтобы включать или скрывать пароль, как показано в следующем примере. Вы также можете использовать другие элементы управления, такие как 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 в интерактивном формате.

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