Appearance in WPF MaskedTextBox (SfMaskedEdit)

This section explains different UI customization and theming options available in SfMaskedEdit.

Setting the background

You can change the default background color and selection color of SfMaskedEdit by using the Background and SelectionBrush property. The default value of Background property is White and SelectionBrush property is Royal Blue.

<syncfusion:SfMaskedEdit Background="Yellow"
                         SelectionBrush="Green"
                         Name="sfMaskedEdit"/>
SfMaskedEdit sfMaskedEdit = new SfMaskedEdit();
sfMaskedEdit.Background = Brushes.Yellow;
sfMaskedEdit.SelectionBrush = Brushes.Green;

SfMaskedEdit with yellow background

NOTE

View Sample in GitHub

Setting the foreground

You can change the foreground color by using the Foreground property and can change the caret color by using the CaretBrush property. The default value of Foreground property is Black and CaretBrush property is null.

<syncfusion:SfMaskedEdit Foreground="Blue" 
                         CaretBrush="Red"
                         Name="sfMaskedEdit"/>
SfMaskedEdit sfMaskedEdit = new SfMaskedEdit();
sfMaskedEdit.Foreground = Brushes.Blue;
sfMaskedEdit.CaretBrush = Brushes.Red;

SfMaskedEdit with red foreground

NOTE

View Sample in GitHub

Setting the border color

You can change the default border color of SfMaskedEdit by using the BorderBrush property. The default value of BorderBrush property is Lavender.

<syncfusion:SfMaskedEdit BorderBrush="Blue"
                         Name="sfMaskedEdit"/>
SfMaskedEdit sfMaskedEdit = new SfMaskedEdit();
sfMaskedEdit.BorderBrush = Brushes.Blue;

SfMaskedEdit with yellow background

NOTE

View Sample in GitHub

Change flow direction

You can change the flow direction of the SfMaskedEdit layout from right to left by setting the FlowDirection property value as RightToLeft. The default value of FlowDirection property is LeftToRight.

<syncfusion:SfMaskedEdit FlowDirection="RightToLeft"
                         Name="sfMaskedEdit"/>
SfMaskedEdit sfMaskedEdit = new SfMaskedEdit();
sfMaskedEdit.FlowDirection = FlowDirection.RightToLeft;

SfMaskedEdit with RightToLeft flow direction

NOTE

View Sample in GitHub

Theme

You can customize the appearance of the SfMaskedEdit control by using the SfSkinManager.SetVisualStyle method and SfSkinManager.VisualStyle property . The following are the various built-in visual styles for SfMaskedEdit 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

Here, the Blend style is applied to the SfMaskedEdit.

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

SfMaskedEdit sfMaskedEdit = new SfMaskedEdit();
SfSkinManager.SetVisualStyle(sfMaskedEdit, VisualStyles.Blend);

SfMaskedEdit with Blend visual style

NOTE

View Sample in GitHub