Pole Číslo

Představuje ovládací prvek, který lze použít k zobrazení a úpravě čísel. To podporuje ověřování, krokové přičítání a přímé výpočty základních rovnic, jako jsou násobení, dělení, sčítání a odčítání.

Je to správná kontrola?

K zachycení a zobrazení matematického vstupu můžete použít ovládací prvek NumberBox. Pokud potřebujete upravitelné textové pole, které přijímá více než čísla, použijte ovládací prvek Textové pole. Pokud potřebujete upravitelné textové pole, které přijímá hesla nebo jiný citlivý vstup, přečtěte si PasswordBox. Pokud potřebujete textové pole pro zadání hledaných termínů, přečtěte si AutoSuggestBox. Pokud potřebujete zadat nebo upravit formátovaný text, přečtěte si RichEditBox.

Recommendations

• Text a Value usnadňují zachycení hodnoty NumberBoxu jako řetězce nebo double, aniž byste museli převést hodnotu mezi typy. Při programové změně hodnoty NumberBox se doporučuje použít vlastnost Value. Value přepíše Text v počátečním nastavení. Po počátečním nastavení se změny jednoho z nich rozšíří na druhý, ale konzistentní provádění programatických změn přes Value pomáhá vyhnout se jakémukoli koncepčnímu nedorozumění, že NumberBox přijme nečíselné znaky prostřednictvím Text.
• Pomocí Header nebo PlaceholderText informujte uživatele, že NumberBox přijímá jako vstup pouze číselné znaky. Pravopisné znázornění čísel, například "jedna", se nepřeloží na přijatou hodnotu.

Vytvoření pole pro čísla

• důležitá API rozhraní:třída NumberBox

Otevření aplikace Galerie WinUI 3 a zobrazení NumberBox v akci

Aplikace Galerie WinUI 3 obsahuje interaktivní příklady ovládacích prvků a funkcí WinUI. Získejte aplikaci z Microsoft Store nebo vyhledejte zdrojový kód na GitHub.

Tady je XAML pro základní NumberBox, který ukazuje výchozí vzhled. Pomocí x:Bind zajistěte, aby se data zobrazená uživateli synchronizovala s daty uloženými v aplikaci.

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

Označení číslicového pole

Pokud účel NumberBoxu není jasný, použijte Header nebo PlaceholderText. Header je viditelné bez ohledu na to, zda má NumberBox hodnotu nebo ne.

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

PlaceholderText se zobrazí uvnitř NumberBoxu a objeví se pouze, pokud je Value nastaveno na NaN, nebo když uživatel vymaže vstup.

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

Povolení podpory výpočtů

Nastavení vlastnosti AcceptsExpression na true umožňuje NumberBox vyhodnotit základní vložené výrazy, jako je násobení, dělení, sčítání a odčítání pomocí standardního pořadí operací. Vyhodnocení se aktivuje při ztrátě fokusu nebo když uživatel stiskne klávesu Enter. Po vyhodnocení výrazu se původní forma výrazu nezachová.

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

Zvýšení a snížení krokování

Pomocí vlastnosti SmallChange můžete nakonfigurovat, jak moc se hodnota uvnitř NumberBoxu změní, když je NumberBox v zaostření a uživatel:

• svitky
• stiskne klávesu se šipkou nahoru.
• stiskne klávesu se šipkou dolů.

Pomocí vlastnosti LargeChange můžete nakonfigurovat, kolik hodnoty uvnitř NumberBoxu se změní, když je NumberBox fokus a uživatel stiskne klávesu PageUp nebo PageDown.

Pomocí vlastnosti SpinButtonPlacementMode umožněte kliknutím na tlačítka zvýšit nebo snížit hodnotu v NumberBox o množství určené vlastností SmallChange. Tato tlačítka budou zakázána, pokud by došlo k překročení maximální nebo minimální hodnoty dalším krokem.

Nastavte SpinButtonPlacementMode na Inline, aby se tlačítka zobrazovala vedle ovládacího prvku.

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

Nastavte SpinButtonPlacementMode na Compact, aby se tlačítka zobrazovala jako rozbalovací okno pouze tehdy, když je NumberBox ve fókus.

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

Povolení ověřování vstupu

Nastavení ValidationMode na InvalidInputOverwritten umožní NumberBoxu přepsat neplatný vstup, který není číselný ani neodpovídá správnému vzorci, poslední platnou hodnotou, když dojde k vyhodnocení při ztrátě zaměření nebo stisknutí klávesy Enter.

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

Nastavení ValidationMode na Disabled umožňuje konfiguraci vlastního ověřování vstupu.

Pokud jde o desetinné čárky a čárky, bude formátování používané uživatelem nahrazeno formátováním nakonfigurovaným pro NumberBox. Chyba ověření vstupu nebude aktivována.

Formátování vstupu

Číselné formátování lze použít pro formátování hodnoty NumberBox tím, že nakonfigurujete instanci třídy formátování a přiřadíte ji k vlastnosti NumberFormatter. Desetinné číslo, měna, procenta a významné hodnoty jsou některé z dostupných tříd formátování čísel. Všimněte si, že zaokrouhlování je také definováno vlastnostmi formátování čísel.

Tady je příklad použití funkce DecimalFormatter k naformátování hodnoty NumberBox tak, aby měla jedno celé číslo, dvě desetinné číslice a zaokrouhlit nahoru na nejbližší hodnotu 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;
}

Pokud jde o desetinné čárky a čárky, bude formátování používané uživatelem nahrazeno formátováním nakonfigurovaným pro NumberBox. Chyba ověření vstupu nebude aktivována.

Poznámky

Vstupní obor

Number se použije pro vstupní obor . Tento vstupní obor je určený pro práci s číslicemi 0–9. To může být přepsáno, ale alternativní typy InputScope nebudou explicitně podporovány.

Není číslo

Pokud je NumberBox vyprázdněn, bude Value nastavena na NaN, aby se označilo, že není přítomna žádná číselná hodnota.

Vyhodnocení výrazu

NumberBox používá k vyhodnocení výrazů notaci infix. V pořadí podle priority jsou povolené operátory:

• ^
• */
• +-

Všimněte si, že závorky lze použít k přepsání pravidel priority.