Nummervak

Vertegenwoordigt een besturingselement dat kan worden gebruikt om getallen weer te geven en te bewerken. Dit ondersteunt validatie, incrementele stappen en inline berekeningen van basisvergelijkingen, zoals vermenigvuldiging, deling, optelling en aftrekking.

Is dit de juiste controle?

U kunt een besturingselement NumberBox gebruiken om wiskundige invoer vast te leggen en weer te geven. Als u een bewerkbaar tekstvak nodig hebt dat ook anders dan getallen accepteert, gebruik dan het besturingselement tekstvak. Als u een bewerkbaar tekstvak nodig hebt dat wachtwoorden of andere gevoelige invoer accepteert, raadpleegt u PasswordBox. Zie AutoSuggestBoxals u een tekstvak nodig hebt om zoektermen in te voeren. Zie RichEditBox-als u opgemaakte tekst wilt invoeren of bewerken.

Aanbevelingen

• Text en Value maken het eenvoudig om de waarde van een getalvak vast te leggen als een tekenreeks of als dubbel, zonder dat u de waarde tussen typen hoeft te converteren. Wanneer u programmatisch de waarde van een getalvak wijzigt, wordt u aangeraden dit te doen via de eigenschap Value. Value overschrijft Text in de eerste installatie. Na de eerste installatie worden wijzigingen in de ene doorgegeven aan de andere, maar consistent programmatische wijzigingen aanbrengen via Value helpt elk conceptueel misverstand te voorkomen dat NumberBox niet-numerieke tekens accepteert via Text.
• Gebruik Header of PlaceholderText om gebruikers te informeren dat NumberBox alleen numerieke tekens als invoer accepteert. Gespelde weergave van getallen, zoals 'één', wordt niet omgezet in een geaccepteerde waarde.

Een nummervak maken

• Belangrijke API's:klasse NumberBox

Open de App WinUI 3 Gallery en zie NumberBox in actie

De WinUI 3 Gallery app bevat interactieve voorbeelden van de meeste Besturingselementen, functies en functionaliteit van WinUI 3. Download de app uit de Microsoft Store of haal de broncode op GitHub-

Hier volgt de XAML voor een basisnummervak dat het standaard uiterlijk laat zien. Gebruik x:Bind om ervoor te zorgen dat de gegevens die aan de gebruiker worden weergegeven, gesynchroniseerd blijven met de gegevens die zijn opgeslagen in uw app.

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

Nummervak voor labelen

Gebruik Header of PlaceholderText als het doel van het nummervak niet duidelijk is. Header is zichtbaar ongeacht of het getalvak een waarde heeft.

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

PlaceholderText wordt weergegeven in het nummervak en wordt alleen weergegeven wanneer Value is ingesteld op NaN of wanneer de invoer door de gebruiker wordt gewist.

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

Ondersteuning voor berekeningen inschakelen

Als u de eigenschap AcceptsExpression instelt op true, kan NumberBox eenvoudige inlineexpressies evalueren, zoals vermenigvuldigen, delen, optellen en aftrekken met behulp van de standaardvolgorde van bewerkingen. Evaluatie wordt geactiveerd bij verlies van focus of wanneer de gebruiker op de Enter-toets drukt. Zodra een expressie is geëvalueerd, blijft de oorspronkelijke vorm van de expressie niet behouden.

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

Stappen vergroten en verkleinen

Gebruik de eigenschap SmallChange om te bepalen hoeveel de waarde in een getallenveld wordt veranderd wanneer het getallenveld de focus heeft en de gebruiker actie onderneemt.

• Scrollen
• drukt op de pijl-omhoog
• drukt op de pijl-omlaag

Gebruik de eigenschap LargeChange om te configureren hoeveel de waarde in een getalvak wordt gewijzigd wanneer het nummervak de focus heeft en de gebruiker op de PageUp- of PageDown-toets drukt.

Gebruik de eigenschap SpinButtonPlacementMode om knoppen in te schakelen waarop kan worden geklikt om de waarde in het nummervak te verhogen of te verlagen op basis van het bedrag dat is opgegeven door de eigenschap SmallChange. Deze knoppen worden uitgeschakeld als een maximum- of minimumwaarde wordt overschreden met een andere stap.

Stel SpinButtonPlacementMode in op Inline om de knoppen naast het besturingselement weer te geven.

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

Stel SpinButtonPlacementMode in op Compact om de knoppen alleen als flyout weer te geven wanneer het nummervak de focus heeft.

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

Invoervalidatie inschakelen

Als u ValidationMode instelt op InvalidInputOverwritten, kan NumberBox ongeldige invoer overschrijven die niet numeriek of wettelijk formulef is met de laatste geldige waarde wanneer de evaluatie wordt geactiveerd bij verlies van focus of druk op enter.

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

Door ValidationMode in te stellen op Disabled kan aangepaste invoervalidatie worden geconfigureerd.

Wat decimalen en komma's betreft, wordt de opmaak die door een gebruiker wordt gebruikt, vervangen door de opmaak die is geconfigureerd voor het nummervak. Er wordt geen invoervalidatiefout geactiveerd.

Invoer opmaken

Nummeropmaak kan worden gebruikt om de waarde van een NumberBox te formatteren door een instantie van een formatteringsklasse te configureren en deze toe te wijzen aan de eigenschap NumberFormatter. Decimaal, valuta, percentage en significante cijfers zijn slechts enkele van de beschikbare getalnotatieklassen. Afronding wordt ook gedefinieerd door eigenschappen voor getalopmaak.

Hier volgt een voorbeeld van het gebruik van DecimalFormatter om de waarde van een Getalvak op te maken met één geheel getal, twee breukcijfers en naar boven afronden op de dichtstbijzijnde 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;
}

Wat decimalen en komma's betreft, wordt de opmaak die door een gebruiker wordt gebruikt, vervangen door de opmaak die is geconfigureerd voor het nummervak. Er wordt geen invoervalidatiefout geactiveerd.

Opmerkingen

Invoerbereik

Number wordt gebruikt voor het invoerbereik. Dit invoerbereik is bedoeld voor het werken met cijfers 0-9. Dit kan worden overschreven, maar alternatieve InputScope-typen worden niet expliciet ondersteund.

Geen getal

Wanneer een NumberBox wordt leeggemaakt, wordt Value ingesteld op NaN om aan te geven dat er geen getal aanwezig is.

Expressie-evaluatie

NumberBox gebruikt infixnotatie om expressies te evalueren. In volgorde van prioriteit zijn de toegestane operators:

• ^
• */
• +-

Houd er rekening mee dat haakjes kunnen worden gebruikt om voorrangsregels te overschrijven.

UWP en WinUI 2

Belangrijk

De informatie en voorbeelden in dit artikel zijn geoptimaliseerd voor apps die gebruikmaken van de Windows App SDK en WinUI 3, maar zijn algemeen van toepassing op UWP-apps die gebruikmaken van WinUI 2. Zie de UWP API-referentie voor platformspecifieke informatie en voorbeelden.

Deze sectie bevat informatie die u nodig hebt om het besturingselement te gebruiken in een UWP- of WinUI 2-app.

Voor de NumberBox voor UWP-apps is WinUI 2 vereist. Zie WinUI 2voor meer informatie, inclusief installatie-instructies. API's voor dit besturingselement bevinden zich in de Microsoft.UI.Xaml.Controls namespace.

• WinUI 2-API's:NumberBox-klasse
• Open de App WinUI 2 Gallery en zie NumberBox in actie. De WinUI 2 Gallery app bevat interactieve voorbeelden van de meeste Besturingselementen, functies en functionaliteit van WinUI 2. Haal de app uit de Microsoft Store of de broncode van GitHub.

Als u de code in dit artikel wilt gebruiken met WinUI 2, gebruikt u een alias in XAML (we gebruiken muxc) om de API's van de Windows UI-bibliotheek weer te geven die zijn opgenomen in uw project. Zie Aan de slag met WinUI 2 voor meer informatie.

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

<muxc:NumberBox />