Appearance in WPF Percent TextBox

18 Nov 20186 minutes to read

This section deals with the appearance of WPF Percent TextBox control and contains the following topics.

Setting the Foreground

The WPF Percent TextBox control Foreground can be modified based on the percent value of the control. The following are the foreground for WPF Percent TextBox control.

Foreground for Positive Value

You can change the color for positive percent values of WPF Percent TextBox by setting the PositiveForeground property; it will be applied when the PercentValue is positive. The default color of PositiveForeground is Black.

XAML

<syncfusion:PercentTextBox x:Name="percentTextBox" Width="100" Height="25" PercentValue = "10" PositiveForeground="Blue" />

C#

PercentTextBox percentTextBox = new PercentTextBox();
percentTextBox.Width = 100;
percentTextBox.Height = 25;
percentTextBox.PercentValue = 10;
percentTextBox.PositiveForeground = Brushes.Blue;

Foreground for Negative Value

You can change the color for negative percent values of WPF Percent TextBox by setting the NegativeForeground property; it will be applied when the ApplyNegativeForeground property is true and the PercentValue is negative. The default color of NegativeForeground is Red. The default value of ApplyNegativeForeground is false.

XAML

<syncfusion:PercentTextBox x:Name="percentTextBox" Width="100" Height="25" PercentValue="-10"
                          NegativeForeground="SpringGreen" ApplyNegativeForeground="True" />

C#

PercentTextBox percentTextBox = new PercentTextBox();
percentTextBox.Width = 100;
percentTextBox.Height = 25;
percentTextBox.PercentValue = -10;
percentTextBox.ApplyNegativeForeground = true;   
percentTextBox.NegativeForeground = Brushes.SpringGreen;

Foreground for Zero Value

You can change the color for zero percent values of WPF Percent TextBox by setting the ZeroColor property; it will be applied when the ApplyZeroColor property is true and the WPF Percent TextBox is zero. The default color of ZeroColor is Green. The default value of ApplyZeroColor is false.

XAML

<syncfusion:PercentTextBox x:Name="percentTextBox" PercentValue="0" Width="100" Height="25"
                          ApplyZeroColor="True" ZeroColor="DarkGoldenrod"/>

C#

PercentTextBox percentTextBox = new PercentTextBox();
percentTextBox.Width = 100;
percentTextBox.Height = 25;
percentTextBox.PercentValue = 0;
percentTextBox.ApplyZeroColor = true;
percentTextBox.ZeroColor = Brushes.DarkGoldenrod;

Setting the Background

WPF Percent TextBox 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.

The C# sample below requires the using System.Windows.Media; namespace for Brushes.

XAML

<syncfusion:PercentTextBox x:Name="percentTextBox" Width="100"
                          Height="25" Background="Cyan"/>

C#

PercentTextBox percentTextBox = new PercentTextBox();
percentTextBox.Width = 100;
percentTextBox.Height = 25;
percentTextBox.Background = Brushes.Cyan;

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 WPF Percent TextBox, use the CornerRadius property. The default value of the CornerRadius property is 1.

XAML

<syncfusion:PercentTextBox x:Name="percentTextBox" Width="100" Height="25" CornerRadius="5"/>

C#

PercentTextBox percentTextBox = new PercentTextBox();
percentTextBox.Width = 100;
percentTextBox.Height = 25;
percentTextBox.CornerRadius = new CornerRadius(5);

Apply Background for Selection

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

The C# sample below requires the using System.Windows.Media; namespace for Brushes.

XAML

<syncfusion:PercentTextBox x:Name="percentTextBox" Width="100" Height="25" SelectionBrush="Red" SelectionOpacity="0.5"/>

C#

PercentTextBox percentTextBox = new PercentTextBox();
percentTextBox.Width = 100;
percentTextBox.Height = 25;
percentTextBox.SelectionBrush = Brushes.Red;
percentTextBox.SelectionOpacity = 0.5;

Aligning the Value

WPF Percent TextBox allows you to display the value on the right, left, or center by setting the TextAlignment property to Right, Left, or Center. The default value of TextAlignment is Left.

XAML

<syncfusion:PercentTextBox x:Name="percentTextBox" Width="100" Height="25" TextAlignment="Center"/>

C#

PercentTextBox percentTextBox = new PercentTextBox();
percentTextBox.Width = 100;
percentTextBox.Height = 25;
percentTextBox.TextAlignment = TextAlignment.Center;

Setting ToolTip

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

XAML

<syncfusion:PercentTextBox x:Name="percentTextBox" Width="100" Height="25" ToolTip="Enter Percentage Value"/>

C#

PercentTextBox percentTextBox = new PercentTextBox();
percentTextBox.Width = 100;
percentTextBox.Height = 25;
percentTextBox.ToolTip = "Enter Percentage value";

Theme

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

• Apply theme using SfSkinManager

• Create a custom theme using ThemeStudio