DomainSpinner
A spinner that steps through a list of items – sizes, months, priorities, currencies – with up and down buttons, and completes the item as the user types.
public class DomainSpinner : Control
Inherits from / implements: Control
Remarks
Use it in place of a drop-down list where the choices have a natural order and the user often wants the next or previous one: T-shirt sizes, days of the week, the steps of a workflow.
Items and selection
Give it the choices in Items. Value is the item shown and
SelectedIndex its position; setting either sets the other. When Items
is set, the first item is selected unless the current value is in the new list. Each item is shown
as its ToString text. ValueChanged follows every change.
Typing
Each keystroke selects the first item whose text begins with what has been typed, ignoring
case, and selects the rest of its text, so typing Ma in a list of months shows
March with rch selected, and another y moves on to May. Text that begins
no item is refused. Enter, or leaving the box, takes an item whose whole text matches; Escape puts
back the item as it was.
Keyboard and mouse
| Input | Effect |
|---|---|
Up, Page Up, the upper button | The next item. |
Down, Page Down, the lower button | The previous item. |
Ctrl+Home, Ctrl+End | The first or the last item. |
Mouse wheel | Steps, while the spinner has keyboard focus. |
Stepping stops at either end unless Wrap is on. With nothing selected, a step
selects the first item. IsReadOnly turns all of these off.
Examples
A size picker that wraps round, and a month picker filled from code.
<Window x:Class="Shop.ProductWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:spin="clr-namespace:Binarymission.WPF.Controls.InputControls;assembly=Binarymission.WPF.Controls.InputControls.Spinners"
Title="Product" Width="360" Height="160">
<StackPanel Margin="12" Orientation="Horizontal">
<spin:DomainSpinner x:Name="SizePicker" Width="90" Height="26" Wrap="True"
ValueChanged="OnSizeChanged" />
<spin:DomainSpinner x:Name="MonthPicker" Width="140" Height="26" Margin="12,0,0,0" />
</StackPanel>
</Window>using System;
using System.Globalization;
using System.Linq;
using System.Windows;
using Binarymission.WPF.Controls.InputControls;
SizePicker.Items = new[] { "XS", "S", "M", "L", "XL", "XXL" };
SizePicker.Value = "M";
MonthPicker.Items = CultureInfo.CurrentCulture.DateTimeFormat.MonthNames.Where(name => name.Length > 0).ToList();
MonthPicker.SelectedIndex = DateTime.Today.Month - 1;
private void OnSizeChanged(object sender, RoutedEventArgs e)
{
var change = (DomainSpinner.ValueChangedEventArgs)e;
stockText.Text = inventory.InStock((string)change.Value) ? "In stock" : "Back order";
}See also
Members at a glance
| Constructors | |
|---|---|
DomainSpinner | Creates a domain spinner with no items and nothing selected. |
| Properties | |
ContentHostControlStyle | Gets or sets the style of the text box that shows and edits the value. |
IsReadOnly | Gets or sets whether the user is prevented from changing the value, while still being able to see, select and copy it. |
Items | Gets or sets the items the user steps through, in order. |
NavigationControlStyle | Gets or sets the style of the two buttons that step the value up and down. |
NavigationVisualFillBrush | Gets or sets the colour of the up and down arrows on the spinner's buttons. |
NavigationVisualOnMouseOverBorderBrush | Gets or sets the outline colour of an arrow on the spinner's buttons while the pointer is over that button. |
NavigationVisualOnMouseOverBrush | Gets or sets the colour of an arrow on the spinner's buttons while the pointer is over that button. |
NavigationVisualStroke | Gets or sets the outline colour of the up and down arrows on the spinner's buttons. |
SelectedIndex | Gets or sets the position in Items of the item shown, or -1 when none is. |
Value | Gets or sets the item shown in the spinner. |
Wrap | Gets or sets whether stepping past the last item goes round to the first, and stepping back past the first goes round to the last. |
| Methods | |
OnApplyTemplate | Connects the text box and the two buttons in the template, and shows the current item. |
| Events | |
ValueChanged | Occurs when Value changes, whether the user stepped or typed to another item or code
set it. |
| Fields | |
ContentHostControlStyleProperty | Identifies the ContentHostControlStyle dependency property. |
IsReadOnlyProperty | Identifies the IsReadOnly dependency property. |
ItemsProperty | Identifies the Items dependency property. |
NavigationControlStyleProperty | Identifies the NavigationControlStyle dependency property. |
NavigationVisualFillBrushProperty | Identifies the NavigationVisualFillBrush dependency property. |
NavigationVisualOnMouseOverBorderBrushProperty | Identifies the NavigationVisualOnMouseOverBorderBrush dependency property. |
NavigationVisualOnMouseOverBrushProperty | Identifies the NavigationVisualOnMouseOverBrush dependency property. |
NavigationVisualStrokeProperty | Identifies the NavigationVisualStroke dependency property. |
ValueChangedEvent | Identifies the ValueChanged routed event. |
ValueProperty | Identifies the Value dependency property. |
WrapProperty | Identifies the Wrap dependency property. |
Constructors
DomainSpinner
Creates a domain spinner with no items and nothing selected.
Remarks
Set Items to give it its choices; the first one is then selected.
Properties
ContentHostControlStyle
Gets or sets the style of the text box that shows and edits the value.
- Value
- A
Stylefor aTextBox. The default style sets the suite's own, which centres the text vertically and aligns it to the left. The value registered on the property isnull.
Remarks
The spinner sets the text box's background, foreground, padding and borders itself, from
its own Control.Background, Control.Foreground and
Control.Padding. Use the style for the rest – to align numbers to the right, for
example.
Example
<spin:DomainSpinner.ContentHostControlStyle>
<Style TargetType="TextBox">
<Setter Property="HorizontalContentAlignment" Value="Right" />
<Setter Property="VerticalContentAlignment" Value="Center" />
</Style>
</spin:DomainSpinner.ContentHostControlStyle>See also
IsReadOnly
Gets or sets whether the user is prevented from changing the value, while still being able to see, select and copy it.
- Value
trueto make the spinner read-only. The default isfalse.
Remarks
While it is on, typing, the arrow buttons, the arrow and Page keys, Ctrl+Home, Ctrl+End and the mouse wheel all leave the value alone. The value can still be set from code or a binding.
Items
Gets or sets the items the user steps through, in order.
- Value
- The items, each shown as its
ToStringtext. The default isnull: no items.
Remarks
Any list of reference-type objects will do – strings, or objects of your own whose
ToString gives the text to show. A list of numbers or other value types is not
an IEnumerable<object>; box them first, for example with
numbers.Cast<object>().ToList().
Setting the property keeps the current value if the new list contains it, and otherwise selects the first item; an empty list clears the value. Items added to or removed from the same list afterwards are seen by the next step, but the selection is checked again only when the property is set again.
Example
priority.Items = new List<object> { "Low", "Normal", "High", "Urgent" };
priority.Value = "Normal";See also
SelectedIndex
Gets or sets the position in Items of the item shown, or -1 when none is.
- Value
- A zero-based index, or
-1. The default is-1untilItemsis set, when it becomes0.
Remarks
Value
Gets or sets the item shown in the spinner.
- Value
- One of
Items, ornullfor none. The default isnull.
Remarks
Setting it selects the first item that equals it, or whose text is the same as its text, and
SelectedIndex follows. A value that is not among the items is still shown, with
SelectedIndex at -1; the next step then selects the first item.
Every change raises ValueChanged. It does not bind two-way by default: write
Mode=TwoWay to have the user's choice reach the source.
See also
Wrap
Gets or sets whether stepping past the last item goes round to the first, and stepping back past the first goes round to the last.
- Value
trueto wrap round. The default isfalse: stepping stops at either end.
Remarks
Wrapping suits lists that are naturally circular, such as days of the week or compass points. Ctrl+Home and Ctrl+End go to the first and last item either way.
Methods
OnApplyTemplate
Connects the text box and the two buttons in the template, and shows the current item.
Remarks
A custom template provides a TextBox named PART_ContentTextBox and
RepeatButtons named PART_IncreaseButton and PART_DecreaseButton, and may
name the arrows inside them contentSurface_IncreaseVisual and
contentSurface_DecreaseVisual (each a Polygon) to have them highlighted under
the pointer.
Events
ValueChanged
Occurs when Value changes, whether the user stepped or typed to another item or code
set it.
Remarks
The event data is a ValueChangedEventArgs; cast the handler's argument to it to
read the new item, or read Value and SelectedIndex. It is raised as the
user types too, each time completion moves to another item.
A bubbling routed event, so a parent element can handle it for several spinners.
See also
Fields
ContentHostControlStyleProperty static
Identifies the ContentHostControlStyle dependency property.
IsReadOnlyProperty static
Identifies the IsReadOnly dependency property.
ItemsProperty static
Identifies the Items dependency property.
ValueChangedEvent static
Identifies the ValueChanged routed event.
ValueProperty static
Identifies the Value dependency property.
WrapProperty static
Identifies the Wrap dependency property.