Appearance in WPF Double TextBox

This section deals with the appearance of DoubleTextBox control and contains the following topics.

Setting the Foreground

The DoubleTextBox control Foreground can be modified based on the value of the control. The following are the foreground for DoubleTextBox control.

Foreground for Positive Value

We can change a positive color for the value of DoubleTextBox by setting the PositiveForeground property and it will be applied when the Value is positive. The default color of PositiveForeground is Black.

<syncfusion:DoubleTextBox x:Name="doubleTextBox" Value="10" Width="100" Height="25" PositiveForeground="Blue" />
DoubleTextBox doubleTextBox = new DoubleTextBox();
doubleTextBox.Width = 100;
doubleTextBox.Height = 25;
doubleTextBox.PositiveForeground = Brushes.Blue;

DoubleTextBox displaying value in positive foreground

Foreground for Negative Value

We can change a negative color for the value of DoubleTextBox by setting the NegativeForeground property and it will be applied when the ApplyNegativeForeground property is true and the Value is negative. The default color of NegativeForeground is Red.

<syncfusion:DoubleTextBox x:Name="doubleTextBox" Value="10" Width="100" Height="25"
                          NegativeForeground="SpringGreen" ApplyNegativeForeground="True" />
DoubleTextBox doubleTextBox = new DoubleTextBox();
doubleTextBox.Width = 100;
doubleTextBox.Height = 25;
doubleTextBox.ApplyNegativeForeground = true;   
doubleTextBox.NegativeForeground = Brushes.SpringGreen;

DoubleTextBox displaying negative value in negative foreground

Foreground for Zero Value

We can change a zero color for the value of DoubleTextBox by setting the ZeroColor property and it will be applied when the ApplyZeroColor property is true and the Value is zero.
The default color of ZeroColor is Green.

<syncfusion:DoubleTextBox x:Name="doubleTextBox" Value="0" Width="100" Height="25"
                          ApplyZeroColor="True" ZeroColor="DarkGoldenrod"/>
DoubleTextBox doubleTextBox = new DoubleTextBox();
doubleTextBox.Value = 0;
doubleTextBox.Width = 100;
doubleTextBox.Height = 25;
doubleTextBox.ApplyZeroColor = true;
doubleTextBox.ZeroColor = Brushes.DarkGoldenrod;

DoubleTextBox displaying zero value with zero foreground

Setting the Background

DoubleTextBox allows different brushes to fill the control. The Background property can be used to modify the control background color. The default color of Background is White.

<syncfusion:DoubleTextBox x:Name="doubleTextBox" Width="100"
                          Height="25" Value ="80" Background="Cyan"/>
DoubleTextBox doubleTextBox = new DoubleTextBox();
doubleTextBox.Width = 100;
doubleTextBox.Height = 25;
doubleTextBox.Background = Brushes.Cyan;

DoubleTextBox with cyan background

Setting the Corner Radius

Corner Radius indicates the degree to which the corners of the border can be rounded. To create curved borders for the DoubleTextBox, use CornerRadius property. The default value of CornerRadius property is 1.

<syncfusion:DoubleTextBox x:Name="DoubleTextBox1" Width="100" Height="25" CornerRadius="5"/>
DoubleTextBox doubleTextBox = new DoubleTextBox();
doubleTextBox.Width = 100;
doubleTextBox.Height = 25;
doubleTextBox.CornerRadius = new CornerRadius(5);

DoubleTextBox with corner radius

Apply Background for Selection

DoubleTextBox allows different brushes to highlight the selected text by setting the SelectionBrush and SelectionOpacity properties. The SelectionOpacity property specifies the opacity of the SelectionBrush.

<syncfusion:DoubleTextBox x:Name="doubleTextBox" Width="100" Height="25" SelectionBrush="Red" SelectionOpacity="0.5"/>
DoubleTextBox doubleTextBox = new DoubleTextBox();
doubleTextBox.Width = 100;
doubleTextBox.Height = 25;
doubleTextBox.SelectionBrush = Brushes.Red;
doubleTextBox.SelectionOpacity = 0.3;

DoubleTextBox with red selection background

Align Value

DoubleTextBox allows to display the value from right or center or left side by setting the TextAlignment property to Right or Left or Center. The Default value of TextAlignment is Left.

<syncfusion:DoubleTextBox x:Name="doubleTextBox" Width="100" Height="25" TextAlignment="Center"/>
DoubleTextBox doubleTextBox = new DoubleTextBox();
doubleTextBox.Width = 100;
doubleTextBox.Height = 25;
doubleTextBox.TextAlignment = TextAlignment.Center;

Center aligned DoubleTextBox Value

Setting ToolTip

DoubleTextBox provides support for ToolTip to display certain information when the mouse hovers on the DoubleTextBox. You can customize the tooltip information by setting the ToolTip property.

<syncfusion:DoubleTextBox x:Name="doubleTextBox" Width="100" Height="25" ToolTip="Enter Double Value"/>
DoubleTextBox doubleTextBox = new DoubleTextBox();
doubleTextBox.Width = 100;
doubleTextBox.Height = 25;
doubleTextBox.ToolTip = "Enter Double value";

DoubleTextBox with tool tip

Theme

The appearance of the DoubleTextBox control can be customized by using the SfSkinManager.SetVisualStyle method. The following are the various built-in visual styles for DoubleTextBox control.

  • Blend
  • Default
  • Lime
  • MaterialDark
  • MaterialDarkBlue
  • MaterialLight
  • MaterialLightBlue
  • Metro
  • Office2010Black
  • Office2010Blue
  • Office2010Silver
  • Office2013DarkGray
  • Office2013LightGray
  • Office2013White
  • Office2016Colorful
  • Office2016DarkGray
  • Office2016White
  • Office2019Black
  • Office2019Colorful
  • Office365
  • Saffron
  • SystemTheme
  • VisualStudio2013
  • VisualStudio2015

For example, the Blend style applied to the DoubleTextBox as shown in the following example code:

<Window
    xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
    xmlns:syncfusionskin ="clr-namespace:Syncfusion.SfSkinManager;assembly=Syncfusion.SfSkinManager.WPF">
    <Grid>
        <syncfusion:DoubleTextBox syncfusionskin:SfSkinManager.VisualStyle="Blend" 
                                  Name="doubleTextBox" />
    </Grid>
</Window>
//Namespace for the SfSkinManager.
using Syncfusion.SfSkinManager;

DoubleTextBox doubleTextBox = new DoubleTextBox();
SfSkinManager.SetVisualStyle(doubleTextBox, VisualStyles.Blend);

DoubleTextBox Blend visual style