Поле "Номер"

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

Это правильный контроль?

Элемент управления NumberBox можно использовать, чтобы получать и отображать математические входные данные. Если требуется редактируемое текстовое поле, которое принимает больше чисел, используйте элемент управления TextBox . Если вам требуется редактируемое текстовое поле, которое принимает пароли или другие конфиденциальные входные данные, см. раздел PasswordBox. Если требуется текстовое поле для ввода условий поиска, см. AutoSuggestBox . Если вам нужно ввести или изменить форматированный текст, см. статью RichEditBox.

Recommendations

• Text и Value упрощают получение значения NumberBox в виде строки или типа Double без необходимости преобразования значения между типами. При программном изменении значения NumberBox рекомендуется делать это через свойство Value. Value перезапишет Text в начальной настройке. После первоначальной настройки изменения одного будут распространяться на другое, но последовательно вносить программные изменения с помощью Value помогает избежать концептуального недоразумения, что NumberBox будет принимать нечисловые символы через Text.
• Используйте Header или PlaceholderText, чтобы информировать пользователей о том, что NumberBox принимает в качестве входных данных только числовые символы. Представление чисел по буквам, например "один", не будет допустимым значением.

Создание NumberBox

• Важный класс API:NumberBox

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

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

Вот XAML для базового NumberBox, который демонстрирует внешний вид по умолчанию. Используйте x:Bind , чтобы убедиться, что данные, отображаемые пользователю, остаются в синхронизации с данными, хранящимися в приложении.

<NumberBox Value="{x:Bind Path=ViewModel.NumberBoxValue, Mode=TwoWay}" />

Добавление меток NumberBox

Используйте Header или PlaceholderText, если цель NumberBox не ясна. Header отображается независимо от того, имеет ли NumberBox значение.

<NumberBox Header="Enter a number:"
    Value="{x:Bind Path=ViewModel.NumberBoxValue, Mode=TwoWay}" />

PlaceholderText отображается внутри NumberBox и появляется только когда Value установлено на NaN или когда ввод очищается пользователем.

<NumberBox PlaceholderText="1+2^2"
    Value="{x:Bind Path=ViewModel.NumberBoxValue, Mode=TwoWay}" />

Включение поддержки расчетов

Установка свойства AcceptsExpression на значение true позволяет NumberBox оценивать основные линейные выражения, такие как умножение, деление, сложение и вычитание, используя стандартный порядок операций. Проверка срабатывает при потере фокуса или при нажатии клавиши "Ввод". После вычисления выражения его первоначальная форма не сохраняется.

<NumberBox Value="{x:Bind Path=ViewModel.NumberBoxValue, Mode=TwoWay}"
    AcceptsExpression="True" />

Шаги увеличения и уменьшения

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

• прокручивает;
• нажимает клавишу со стрелкой вверх;
• нажимает клавишу со стрелкой вниз.

Используйте свойство LargeChange, чтобы настроить степень изменения значений внутри NumberBox, когда NumberBox находится в фокусе и пользователь нажимает клавишу PageUp или PageDown.

Используйте свойство SpinButtonPlacementMode, чтобы включить кнопки, которые можно нажать для увеличения или уменьшения значения в поле NumberBox на сумму, указанную в свойстве SmallChange. Эти кнопки будут отключены при превышении значений "Максимум" и "Минимум" другим шагом.

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

<NumberBox Value="{x:Bind Path=ViewModel.NumberBoxValue, Mode=TwoWay}"
    SmallChange="10"
    LargeChange="100"
    SpinButtonPlacementMode="Inline" />

Задайте для параметра SpinButtonPlacementMode значение Compact, чтобы кнопки отображались в виде всплывающего окна, только если NumberBox находится в фокусе.

<NumberBox Value="{x:Bind Path=ViewModel.NumberBoxValue, Mode=TwoWay}"
    SmallChange="10"
    LargeChange="100"
    SpinButtonPlacementMode="Compact" />

Включение проверки входных данных

Настройка ValidationMode на InvalidInputOverwritten позволит NumberBox перезаписать недействительный ввод, который не является ни числовой, ни формальной формулой с последним действительным значением, когда при потере фокуса или нажатии клавиши "Ввод" активируется функция вычисления.

<NumberBox Header="Quantity"
    Value="{x:Bind Path=ViewModel.NumberBoxValue, Mode=TwoWay}"
    ValidationMode="InvalidInputOverwritten" />

Установив ValidationMode на Disabled, можно настроить пользовательскую проверку входных данных.

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

Форматирование входных данных

Форматирование чисел можно использовать для форматирования значения NumberBox, настроив экземпляр класса форматирования и назначив его свойству NumberFormatter . Десятичные, валютные, процентные и значащие цифры — это лишь некоторые из доступных классов форматирования чисел. Обратите внимание, что свойствами форматирования чисел также определяется округление.

Ниже приведен пример использования DecimalFormatter для форматирования значения NumberBox с одним целым числом, двумя числами дробной части и округлением до ближайшего 0,25:

<NumberBox  x:Name="FormattedNumberBox"
    Value="{x:Bind Path=ViewModel.NumberBoxValue, Mode=TwoWay}" />

private void SetNumberBoxNumberFormatter()
{
    IncrementNumberRounder rounder = new IncrementNumberRounder();
    rounder.Increment = 0.25;
    rounder.RoundingAlgorithm = RoundingAlgorithm.RoundUp;

    DecimalFormatter formatter = new DecimalFormatter();
    formatter.IntegerDigits = 1;
    formatter.FractionDigits = 2;
    formatter.NumberRounder = rounder;
    FormattedNumberBox.NumberFormatter = formatter;
}

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

Замечания

Область ввода

Number будет использоваться для области ввода . Эта область ввода предназначена для работы с числами 0–9. Это можно изменить, однако альтернативные типы InputScope при этом не будут поддерживаться.

Не число

Если поле NumberBox очищено от входных данных, Value будет установлено на NaN, что означает отсутствие цифрового значения.

Вычисление выражения

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

• ^
• */
• +-

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