Alpha-numeric Control

Written By Brian Faeran

Last updated 6 months ago

The Alphanumeric Index control is a fast, built-in way to jump through long lists. Replacing older handcrafted indexes with this control can cut page load by about 3 to 5 seconds in many views. It renders a smooth CollectionView-based index with selection, snap points, and automatic orientation.

Quick start XAML

<controls:AlphaNumericControl 
   BackgroundColor="Transparent" 
   SelectedBackgroundColor="Transparent" 
   BorderColor="Transparent" 
   ItemSpacing="5" 
   SelectedItemSpacing="2" 
   SelectedBorderColor="Transparent" 
   FontColor="#E1E1E1" 
   SelectedFontColor="#E1E1E1" 
   AlphaNumericNavigationCompleted="AlphaNumericNavigationButtonClicked" 
   AlphaNumericSelection="{Binding AlphaNumericSelection}" />

At runtime:

  • Displays the sequence ★, #, A–Z

  • Auto-hides disabled entries

  • Orientation is automatic (horizontal by default)

  • Selected item is centered with snap behavior and can be styled independently

Properties for Theme Developers

Layout and Spacing

  • VisibleCount (default 3)
    Number of tiles visible at once (including the selected one).
    Values: any integer ≥ 1

  • ItemSpacing (default 10)
    Spacing between unselected items when SelectedItemSpacing is 0.
    Values: any non-negative double

  • SelectedItemSpacing (default 0)
    Extra spacing applied only to the selected item. If positive, base spacing is removed so the selected item stands out.
    Values: any non-negative double

Unselected Item Appearance

  • FontColor (default Black)
    Color of unselected item text.
    Values: any valid color

  • BackgroundColor (default Gray)
    Background color of unselected items.
    Values: any valid color

  • CornerRadius (default 10)
    Rounded corner radius for unselected item backgrounds.
    Values: any non-negative double

  • BorderThickness (default 1)
    Border thickness for unselected items.
    Values: any non-negative double

  • BorderColor (default Black)
    Border color for unselected items.
    Values: any valid color

  • TextScale (default 0.4, min 0.2, max 0.8)
    Scales unselected text. Values above 0.8 are clamped.
    Values: 0.2 → 0.8

Selected Item Appearance

  • SelectedFontColor (default Black)
    Color of the selected item text.
    Values: any valid color

  • SelectedBackgroundColor (default Gray)
    Background color of the selected item.
    Values: any valid color

  • SelectedCornerRadius (default 10)
    Rounded corner radius for the selected item background.
    Values: any non-negative double

  • SelectedBorderThickness (default 2)
    Border thickness for the selected item.
    Values: any non-negative double

  • SelectedBorderColor (default Black)
    Border color for the selected item.
    Values: any valid color

  • SelectedScale (default 1.2)
    Scales the selected tile relative to unselected ones.
    Values: any double ≥ 1.0 (recommended range 1.1 → 1.3)

  • SelectedTextScale (default 0.6, min 0.2, max 0.8)
    Scales text inside the selected tile. Values above 0.8 are clamped.
    Values: 0.2 → 0.8

Practical Tips

  • VisibleCount = 3 is ideal for readability

  • SelectedScale = 1.1–1.3 gives a clear but not jarring emphasis

  • Raise SelectedItemSpacing slightly if the layout feels cramped

  • Keep TextScale and SelectedTextScale below 0.8 to avoid clipping

Example presets

Minimal glass look

<controls:AlphaNumericControl 
   VisibleCount="3" 
   BackgroundColor="Transparent" 
   FontColor="#E1E1E1" 
   SelectedBackgroundColor="Transparent" 
   SelectedFontColor="#FFFFFF" 
   BorderColor="Transparent" 
   SelectedBorderColor="Transparent" 
   ItemSpacing="6" 
   SelectedItemSpacing="2" 
   SelectedScale="1.2" />

Big tile emphasis

<controls:AlphaNumericControl 
   VisibleCount="3" 
   BackgroundColor="#222222" 
   FontColor="#CCCCCC" 
   CornerRadius="8" 
   BorderThickness="0" 
   SelectedBackgroundColor="#444444" 
   SelectedFontColor="#FFFFFF" 
   SelectedCornerRadius="12" 
   SelectedBorderThickness="2" 
   SelectedBorderColor="#888888" 
   SelectedScale="1.3" 
   TextScale="0.42" 
   SelectedTextScale="0.64" />

Troubleshooting and guard rails

  • Text cut off or off center
    Reduce TextScale and SelectedTextScale. The control clamps anything above 0.8 for a reason

  • Index looks squished in one dimension
    Lower SelectedScale or VisibleCount. Remember the selected tile takes a larger share of the track

  • The index shows in the wrong direction
    Check AlphaNumericNavigationMode. Default is horizontal with automatic show. Switch only if your layout demands a vertical track

  • Index does not appear when you expect it
    Confirm that the view design follows the pattern where the index uses the opposite direction of the main list, or provide a clear Select button hint in your UI

Why this control is faster

Older custom indexes were often built from many individual elements with layout invalidations and manual scrolling math. This control uses a single CollectionView with snap points, cached sizing, and simple data items. The result is a measurable savings of about three to five seconds on page load in common views.