Syncfusion AI Assistant

How can I help you?

Customization in WPF AI-Powered Text Editor (SfSmartTextEditor)

18 Mar 20264 minutes to read

This section explains how to change the AI-Powered Text Editor’s appearance and suggestion behavior. You can set text styles, placeholder options, and customize how suggestions are shown.

Text customization

Set or bind the smart text editor’s text using the Text property. You can use this to preloaded content or bind it to a field in your view model for data binding.

<smarttexteditor:SfSmartTextEditor Text="Thank you for contacting us." />
var smarttexteditor = new SfSmartTextEditor
{
    Text = "Thank you for contacting us."
};

Text style customization

You can change the text style and font using the Style property to make the editor look the way you want.

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:smarttexteditor="clr-namespace:Syncfusion.UI.Xaml.SmartComponents;assembly=Syncfusion.SfSmartComponents.Wpf">

    <smarttexteditor:SfSmartTextEditor>
        <smarttexteditor:SfSmartTextEditor.Style>
            <Style TargetType="{x:Type smarttexteditor:SfSmartTextEditor}">
                <Setter Property="FontSize" Value="16"/>
                <Setter Property="Foreground" Value="Blue"/>
            </Style>
        </smarttexteditor:SfSmartTextEditor.Style>
    </smarttexteditor:SfSmartTextEditor>
</Window>

Text Style in WPF Smart Text Editor.

Placeholder text and color customization

Add a helpful placeholder to guide users and use PlaceholderStyle to make the placeholder look the way you want.

<smartTextEditor:SfSmartTextEditor x:Name="smartTextEditor" 
                                   Placeholder="Write your message...">
    <smartTextEditor:SfSmartTextEditor.PlaceholderStyle>
        <Style TargetType="{x:Type ContentControl}">
            <Setter Property="FontSize" Value="16"/>
            <Setter Property="Foreground" Value="#7E57C2"/>
        </Style>
    </smartTextEditor:SfSmartTextEditor.PlaceholderStyle>
</smartTextEditor:SfSmartTextEditor>

Placeholder in WPF Smart Text Editor.

Suggestion text color

Customize the color of the suggestion text using the SuggestionInlineStyle property to match your theme and improves readability.

<smartTextEditor:SfSmartTextEditor>
    <smartTextEditor:SfSmartTextEditor.SuggestionInlineStyle>
        <Style TargetType="{x:Type TextBlock}">
            <Setter Property="FontSize" Value="16"/>
            <Setter Property="Foreground" Value="SkyBlue"/>
        </Style>
    </smartTextEditor:SfSmartTextEditor.SuggestionInlineStyle>
</smartTextEditor:SfSmartTextEditor>

Suggestion Text Color in WPF Smart Text Editor.

Suggestion popup background

Change the background color of the suggestion popup using the SuggestionPopupStyle property in Popup mode to align with your app’s design.

<smartTextEditor:SfSmartTextEditor SuggestionDisplayMode="Popup">
    <smartTextEditor:SfSmartTextEditor.SuggestionPopupStyle>
        <Style TargetType="smartTextEditor:SuggestionPopup">
            <Setter Property="Foreground" Value="White" />
            <Setter Property="Background" Value="#0078D4" />
            <Setter Property="FontSize" Value="16"/>
        </Style>
    </smartTextEditor:SfSmartTextEditor.SuggestionPopupStyle>
</smartTextEditor:SfSmartTextEditor>

Customization in WPF Smart Text Editor.

Maximum input length

Set a limit on the number of characters the user can enter in the smart text editor using the MaxLength property.

<smarttexteditor:SfSmartTextEditor
    MaxLength="500" />
var smarttexteditor = new SfSmartTextEditor
{
    MaxLength = 500
};