Pole liczbowe

Reprezentuje kontrolkę, która może służyć do wyświetlania i edytowania liczb. Umożliwia walidację, inkrementację kroków oraz przeprowadzanie kalkulacji wbudowanych dla podstawowych operacji, takich jak mnożenie, dzielenie, dodawanie i odejmowanie.

Czy jest to właściwa kontrola?

Za pomocą kontrolki NumberBox można przechwytywać i wyświetlać dane wejściowe matematyczne. Jeśli potrzebujesz edytowalnego pola tekstowego, które akceptuje więcej niż liczby, użyj kontrolki TextBox. Jeśli potrzebujesz edytowalnego pola tekstowego, które akceptuje hasła lub inne poufne dane wejściowe, zobacz PasswordBox. Jeśli potrzebujesz pola tekstowego, aby wprowadzić terminy wyszukiwania, zobacz AutoSuggestBox. Jeśli musisz wprowadzić lub edytować sformatowany tekst, zobacz RichEditBox.

Rekomendacje

• Text i Value ułatwiają zapisanie wartości z NumberBox jako typu String lub Double bez konieczności konwertowania wartości między typami. W przypadku programowego zmieniania wartości parametru NumberBox zaleca się wykonanie tej czynności za pomocą właściwości Value. Value zastąpi Text w początkowej konfiguracji. Po wstępnej konfiguracji zmiany w jednej zostaną przeniesione do drugiej, ale konsekwentne wprowadzanie zmian za pomocą Value pomaga uniknąć nieporozumień koncepcyjnych, że NumberBox akceptuje znaki, które nie są liczbami za pośrednictwem Text.
• Użyj Header lub PlaceholderText, aby poinformować użytkowników, że pole NumberBox akceptuje tylko znaki liczbowe jako dane wejściowe. Słowna forma liczb, takich jak "jeden", nie zostanie uznana jako zaakceptowana wartość.

Utwórz NumberBox

Aplikacja Galeria WinUI 3 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji interfejsu WinUI 3. Pobierz aplikację ze Sklepu Microsoft lub pobierz kod źródłowy w witrynie GitHub

Oto kod XAML dla podstawowego pola NumberBox, który demonstruje wygląd domyślny. Użyj x:Bind, aby upewnić się, że dane wyświetlane użytkownikowi pozostają zsynchronizowane z danymi przechowywanymi w aplikacji.

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

Oznaczanie pola liczb```

Użyj Header lub PlaceholderText, jeśli cel parametru NumberBox nie jest jasne. Header jest widoczny niezależnie od tego, czy NumberBox ma wartość.

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

PlaceholderText jest wyświetlana wewnątrz pola NumberBox i będzie wyświetlana tylko wtedy, gdy Value jest ustawiona na NaN lub gdy dane wejściowe są czyszczone przez użytkownika.

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

Włączanie obsługi obliczeń

Ustawienie właściwości AcceptsExpression na true umożliwia funkcji NumberBox ocenę podstawowych wyrażeń wbudowanych, takich jak mnożenie, dzielenie, dodawanie i odejmowanie przy użyciu standardowej kolejności operacji. Ocena jest wyzwalana po utracie fokusu lub naciśnięciu "Enter". Po obliczeniu wyrażenia oryginalna forma wyrażenia nie jest zachowywana.

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

Zwiększanie i dekrementacja — krok po kroku

Użyj właściwości SmallChange, aby skonfigurować, w jakim stopniu wartość wewnątrz pola NumberBox jest zmieniana, gdy pole NumberBox jest aktywne, a użytkownik:

• Zwoje
• naciska klawisz strzałki w górę
• naciska klawisz strzałki w dół

Użyj właściwości LargeChange, aby skonfigurować, ile wartości wewnątrz pola NumberBox jest zmieniane, gdy pole NumberBox jest w fokusie, a użytkownik naciska PageUp lub PageDown.

Użyj właściwości SpinButtonPlacementMode, aby włączyć przyciski, które można kliknąć, aby zwiększać lub zmniejszać wartość w NumberBox o wartość określoną przez właściwość SmallChange. Te przyciski zostaną wyłączone, jeśli dodatkowymi krokami zostanie przekroczona wartość maksymalna lub minimalna.

Ustaw SpinButtonPlacementMode na Inline, aby włączyć przyciski wyświetlane obok kontrolki.

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

Ustaw SpinButtonPlacementMode na Compact, aby umożliwić wyświetlanie przycisków jako menu kontekstowe tylko wtedy, gdy pole NumberBox jest aktywne.

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

Włączanie walidacji danych wejściowych

Ustawienie ValidationMode na InvalidInputOverwritten spowoduje, że pole NumberBox zastąpi nieprawidłowe dane wejściowe, które nie są numeryczne ani niepoprawnie sformułowane, ostatnią prawidłową wartością, gdy sprawdzenie jest wyzwalane w momencie utraty fokusu lub naciśnięcia "Enter".

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

Ustawienie ValidationMode na Disabled umożliwia skonfigurowanie niestandardowej weryfikacji danych wejściowych.

W odniesieniu do punktów dziesiętnych i przecinków formatowanie używane przez użytkownika zostanie zastąpione formatowaniem skonfigurowanym dla pola NumberBox. Błąd walidacji danych wejściowych nie zostanie wywołany.

Formatowanie danych wejściowych

Formatowanie liczb można użyć do formatowania wartości klasy NumberBox, konfigurując wystąpienie klasy formatowania i przypisując ją do właściwości NumberFormatter. Liczba dziesiętna, waluta, procent i znaczące liczby to kilka dostępnych klas formatowania liczb. Należy pamiętać, że zaokrąglanie jest również definiowane przez właściwości formatowania liczb.

Oto przykład użycia decimalFormatter do formatowania wartości NumberBox w taki sposób, aby miała jedną cyfrę całkowitą, dwie cyfry ułamkowe i zaokrąglić w górę do najbliższej wartości 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;
}

W odniesieniu do punktów dziesiętnych i przecinków formatowanie używane przez użytkownika zostanie zastąpione formatowaniem skonfigurowanym dla pola NumberBox. Błąd walidacji danych wejściowych nie zostanie wywołany.

Uwagi

Zakres danych wejściowych

Number będzie używany dla zakresu danych wejściowych . Ten zakres wejściowy jest przeznaczony do pracy z cyframi 0–9. Może to zostać zastąpione, ale alternatywne typy InputScope nie będą jawnie obsługiwane.

Nie liczba

Gdy pole NumberBox zostanie wyczyszczone z danych wejściowych, Value zostanie ustawiona na NaN, aby wskazać, że żadna wartość liczbowa nie jest obecna.

Ocena wyrażeń

NumberBox używa notacji infiksowej do analizowania wyrażeń. W kolejności pierwszeństwa dozwolone operatory to:

• ^
• */
• +-

Należy pamiętać, że nawiasy mogą służyć do zastępowania reguł pierwszeństwa.

UwP i WinUI 2

Kontrolka NumberBox dla aplikacji UWP wymaga WinUI 2. Aby uzyskać więcej informacji, w tym instrukcje dotyczące instalacji, zobacz WinUI 2. Interfejsy API dla tej kontrolki istnieją w przestrzeni nazw Microsoft.UI.Xaml.Controls .

Aby użyć kodu z tego artykułu w WinUI 2, użyj aliasu w XAML (używamy muxc), aby reprezentować API Biblioteki Interfejsu Użytkownika Windows, które są uwzględnione w Twoim projekcie. Aby uzyskać więcej informacji, zobacz Wprowadzenie do interfejsu WinUI 2 .

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:NumberBox />