Styles and Templates in WPF Numeric UpDown

18 Nov 20183 minutes to read

You can customize the background and foreground of the WPF Numeric UpDown control by editing its style or by setting the exposed properties.

Positive color

You can customize the background and foreground for positive values using the Background and Foreground properties of the WPF Numeric UpDown control.

<syncfusion:UpDown Name="upDown" Background="MediumBlue" Foreground="White" Value="10" Height="23"  Width="100" />
UpDown updown = new UpDown();
updown.Height = 23;
updown.Width = 100;
updown.Value = 10;
updown.Background = Brushes.MediumBlue;
updown.Foreground = Brushes.White;
grid.Children.Add(updown);

Changing Positive Value Color in WPF UpDown

Negative color

You can customize the background and foreground for negative values using the NegativeBackground and NegativeForeground properties of the WPF Numeric UpDown control. The negative colors are enabled by setting EnableNegativeColors to True.

<syncfusion:UpDown Name="upDown" EnableNegativeColors="True" NegativeBackground="Yellow" NegativeForeground="BlueViolet" Value="-2" Height="23"  Width="100" />
updown.Value = -2;
updown.EnableNegativeColors = true;
updown.NegativeBackground = Brushes.Yellow;
updown.NegativeForeground = Brushes.BlueViolet;

Changing Negative Value Color in WPF UpDown

Zero color

You can change the color of the zero value using the ZeroColor property. The zero color is enabled by setting ApplyZeroColor to True.

<syncfusion:UpDown Name="upDown" ApplyZeroColor="True" ZeroColor="DarkViolet" Value="0" Height="23"  Width="100" />
updown.ApplyZeroColor = true;
updown.ZeroColor = Brushes.DarkViolet;

Changing Zero Value Color in WPF UpDown

Focused color

You can customize the background, foreground, and border color for the WPF Numeric UpDown control while focused using the FocusedBackground, FocusedBorderBrush, and FocusedForeground properties. These properties take effect only when EnableFocusedColors is True. The default value of EnableFocusedColors is True.

<syncfusion:UpDown Name="upDown" EnableFocusedColors="True" FocusedBackground="BurlyWood" FocusedForeground="White" FocusedBorderBrush="Green" Value="10" Height="23"  Width="100" />
updown.Value = 10;
updown.EnableFocusedColors = true;
updown.FocusedBackground = Brushes.BurlyWood;
updown.FocusedForeground = Brushes.White;
updown.FocusedBorderBrush = Brushes.Green;

Changing Focused Value Color in WPF UpDown

NOTE

While the control is focused, the positive, negative, and zero colors revert to the default focus colors.

Theme

The WPF Numeric UpDown supports various built-in themes. Refer to the links below to apply themes,

Applying Theme to WPF UpDown