DaisyNumberFlow

Overview

> Added in v1.7.1

Key Features

• Granular digit animation: Only digits that change are animated.
• Locale-aware formatting: Supports standard .NET format strings (e.g., C2, P0, N0) and cultures.
• Easing and Duration: Fully configurable animation timing and easing.
• Prefix/Suffix support: Add currency symbols or units that stay fixed while numbers animate.
• Built-in controls: Optional increment/decrement buttons with configurable bounds.
• Dashboard styling: Optional digit boxes for a SmoothUI-style counter appearance.
• Design tokens: Uses LargeDisplay* tokens for consistent sizing across dashboard controls.

Quick Examples

<!-- Basic usage -->
<controls:DaisyNumberFlow Value="123" />

<!-- Currency formatting -->
<controls:DaisyNumberFlow Value="19.99" FormatString="C2" />

<!-- Percentage with custom easing and duration -->
<controls:DaisyNumberFlow Value="0.75" 
                          FormatString="P0" 
                          Duration="0:0:1" 
                          Easing="BounceEaseOut" />

<!-- With prefix and suffix -->
<controls:DaisyNumberFlow Value="42" Prefix="Score: " Suffix=" pts" />

<!-- Dashboard-style counter with digit boxes and +/- buttons -->
<controls:DaisyNumberFlow Value="0"
                          FormatString="000"
                          ShowDigitBoxes="True"
                          ShowControls="True"
                          Minimum="0"
                          Maximum="999" />

<!-- Interactive counter with digit selection (tap any digit to control it) -->
<controls:DaisyNumberFlow Value="28"
                          FormatString="000"
                          ShowDigitBoxes="True"
                          ShowControls="True"
                          AllowDigitSelection="True"
                          Minimum="0"
                          Maximum="999" />

Built-in Controls

When ShowControls="True", the control displays increment/decrement buttons:

The buttons fire on pointer-pressed (not release) for immediate responsiveness and support repeat-click when held down. They automatically disable when Value reaches the Minimum or Maximum (unless WrapAround is enabled).

Digit Selection

Enable digit selection for fine-grained control over individual digits:

When AllowDigitSelection="True":

• Tap any digit to select it (cursor changes to hand)
• The selected digit shows an accent-colored bottom border indicator
• The +/- buttons add or subtract the numeric place value of the selected digit.
• Digit entry changes the selected digit and preserves the sign of a negative value.

Leading zeros count as digits. The minus sign, decimal separator, group separators, and currency or percent symbols do not count.

For 000, index 2 selects the hundreds place, including a leading zero.

For N2 or 000.00, index 2 selects the ones place.

Formats for Digit Editing

Digit editing supports the standard formats N, F, C, and P, with optional precision digits.

It also supports G when the displayed result has no exponent.

Simple custom formats contain one or more 0 placeholders, with an optional decimal point and more 0 placeholders.

Examples include 0, 000, 0.00, and 000.00.

The format uses a dot for its decimal point. The displayed separator follows Culture.

Only positions that decimal can represent support digit editing.

Complex custom formats still control the display. They do not support digit editing.

These formats include literals, # placeholders, grouping, scaling, percent symbols, multiple sections, or scientific notation.

For fixed units or labels beside editable digits, use Prefix or Suffix.

Keyboard Support

When AllowDigitSelection="True" and the format supports digit editing, these keys control the selected digit:

When digit editing is unavailable and ShowControls is true, Arrow Up and Arrow Down change Value by Step.

The control shows an accent border when focused via keyboard (:focus-visible). The selected digit shows an accent-colored bottom border.

<!-- Interactive digit-by-digit counter with wrap-around -->
<controls:DaisyNumberFlow Value="0"
                          FormatString="000"
                          ShowDigitBoxes="True"
                          ShowControls="True"
                          AllowDigitSelection="True"
                          WrapAround="True"
                          Minimum="0"
                          Maximum="999" />

Styling Options

When ShowDigitBoxes="True", each digit gets a rounded box with an inset shadow, creating a dashboard/counter aesthetic similar to SmoothUI's NumberFlow component.

Design Tokens

Override these in your App.xaml to customize all large display controls:

<Application.Resources>
    <sys:Double x:Key="LargeDisplayFontSize">48</sys:Double>
    <sys:Double x:Key="LargeDisplayElementHeight">100</sys:Double>
</Application.Resources>

Tips & Best Practices

• Use DaisyNumberFlow for prominent numeric displays like prices, scores, or sensor readings.
• For simple inputs, use DaisyNumericUpDown.
• Choose a FormatString that matches your data type (e.g., "N0" for integers, "N2" for decimals).
• Use ShowDigitBoxes="True" ShowControls="True" for interactive dashboard counters.
• FontSize defaults to the LargeDisplayFontSize token (36px) but can be overridden directly.