syncfusion-wpf-smart-text-editor

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion WPF Smart Text Editor

实现Syncfusion WPF Smart Text Editor

When to Use This Skill

何时使用此技能

Use this skill when users need to:

Implement AI-powered text input with predictive suggestions and context-aware completions
Add intelligent autocomplete to multiline text editors in WPF applications
Integrate AI services (Azure OpenAI, OpenAI, Ollama, or custom providers) for text generation
Create smart text fields for customer support, email composition, or content creation
Build responsive text editors with inline or popup suggestion display modes
Customize suggestion behavior with user roles, custom phrases, and styling options
Handle text change events and implement command patterns for text editors
Support offline suggestions with custom phrase libraries when AI is unavailable

The Smart Text Editor (SfSmartTextEditor) is ideal for scenarios requiring intelligent typing assistance, branded response templates, and AI-enhanced user input.

在用户需要以下功能时使用此技能：

实现AI驱动的文本输入，提供预测建议和上下文感知补全
在WPF应用的多行文本编辑器中添加智能自动完成功能
集成AI服务（Azure OpenAI、OpenAI、Ollama或自定义提供商）以生成文本
创建智能文本字段，用于客户支持、邮件撰写或内容创作
构建响应式文本编辑器，支持内联或弹窗式建议显示模式
自定义建议行为，包括用户角色、自定义短语和样式选项
处理文本变更事件，并为文本编辑器实现命令模式
在AI不可用时，通过自定义短语库支持离线建议

Smart Text Editor（SfSmartTextEditor）非常适合需要智能输入辅助、品牌化响应模板和AI增强用户输入的场景。

Component Overview

组件概述

The Syncfusion WPF Smart Text Editor is a multiline input control that uses predictive suggestions to speed up typing. It integrates with AI inference services for context-aware completions and provides inline or popup suggestion display modes. Key capabilities include:

Core Features:

AI-powered suggestions via IChatInferenceService
Inline and popup suggestion display modes
Custom phrase library for offline suggestions
Keyboard integration (Tab, Right Arrow to accept)
Gesture support (tap/click for popup suggestions)
Maximum length validation
Placeholder text with customizable styling
Full UI customization (fonts, colors, sizes)
Command support (TextChangedCommand)

Supported AI Providers:

Azure OpenAI
OpenAI
Ollama (self-hosted models)
Custom services via IChatInferenceService interface
Claude AI (Anthropic)
DeepSeek AI
Google Gemini AI
Groq AI

Syncfusion WPF Smart Text Editor是一款多行输入控件，利用预测建议加快输入速度。它与AI推理服务集成以提供上下文感知补全，并支持内联或弹窗式建议显示模式。核心功能包括：

核心特性：

通过IChatInferenceService实现AI驱动的建议
内联和弹窗两种建议显示模式
用于离线建议的自定义短语库
键盘集成（按Tab或右箭头键接受建议）
手势支持（点击/轻触选择弹窗建议）
最大长度验证
可自定义样式的占位符文本
完整的UI自定义（字体、颜色、尺寸）
命令支持（TextChangedCommand）

支持的AI提供商：

Azure OpenAI
OpenAI
Ollama（自托管模型）
通过IChatInferenceService接口集成的自定义服务
Claude AI（Anthropic）
DeepSeek AI
Google Gemini AI
Groq AI

Documentation and Navigation Guide

文档与导航指南

Getting Started and Installation

入门与安装

📄 Read: references/getting-started.md

Installing Syncfusion.SfSmartComponents.WPF NuGet package
Adding control via Designer, XAML, or C#
Configuring UserRole and UserPhrases for suggestions
Registering AI services in App.xaml.cs
Running the application and verifying AI features

When to read: Starting a new Smart Text Editor implementation, setting up the development environment, or adding the control to an existing WPF project.

📄 阅读： references/getting-started.md

安装Syncfusion.SfSmartComponents.WPF NuGet包
通过设计器、XAML或C#添加控件
配置UserRole和UserPhrases以获取建议
在App.xaml.cs中注册AI服务
运行应用并验证AI功能

阅读时机： 开始全新的Smart Text Editor实现、搭建开发环境，或向现有WPF项目中添加该控件时。

Suggestion Display Modes

建议显示模式

📄 Read: references/suggestion-display-modes.md

Inline mode: Suggestions rendered in place after caret
Popup mode: Compact hint overlay near caret
Keyboard shortcuts (Tab, Right Arrow)
Gesture support (tap/click)
Choosing between Inline and Popup modes

When to read: User needs to configure how suggestions appear, switch between display modes, or optimize for desktop vs touch devices.

📄 阅读： references/suggestion-display-modes.md

内联模式：在光标后原位显示建议
弹窗模式：在光标附近显示紧凑的提示浮层
键盘快捷键（Tab、右箭头键）
手势支持（点击/轻触）
在Inline和Popup模式之间选择

阅读时机： 用户需要配置建议的显示方式、切换显示模式，或针对桌面与触控设备进行优化时。

Customization and Styling

自定义与样式设置

📄 Read: references/customization.md

Text style customization (FontSize, Foreground, fonts)
Placeholder text and color customization
Suggestion text color (SuggestionInlineStyle)
Suggestion popup background (SuggestionPopupStyle)
Maximum input length (MaxLength property)
Complete styling examples

When to read: Customizing appearance to match application themes, changing text styles, configuring placeholders, or setting character limits.

📄 阅读： references/customization.md

文本样式自定义（FontSize、Foreground、字体）
占位符文本和颜色自定义
建议文本颜色（SuggestionInlineStyle）
建议弹窗背景（SuggestionPopupStyle）
最大输入长度（MaxLength属性）
完整的样式设置示例

阅读时机： 自定义外观以匹配应用主题、修改文本样式、配置占位符，或设置字符限制时。

Commands

命令

📄 Read: references/commands.md

TextChangedCommand overview and implementation
Command binding in XAML
ViewModel pattern for command handling
Event handling patterns
Use cases for tracking text changes

When to read: Implementing text change notifications, MVVM command patterns, or custom event handling logic.

📄 阅读： references/commands.md

TextChangedCommand概述与实现
在XAML中绑定命令
用于命令处理的ViewModel模式
事件处理模式
跟踪文本变更的用例

阅读时机： 实现文本变更通知、MVVM命令模式，或自定义事件处理逻辑时。

AI Service Configuration (Built-in Providers)

AI服务配置（内置提供商）

📄 Read: references/ai-service-configuration.md

Registering chat clients in App.xaml.cs
Azure OpenAI configuration (deployment, API key, endpoint)
OpenAI configuration (API key, model selection)
Ollama self-hosted models (installation, local setup)
Required NuGet packages for each provider
Troubleshooting built-in AI providers

When to read: Configuring Azure OpenAI, OpenAI, or Ollama for AI-powered suggestions. Use this for official/built-in AI provider setup.

📄 阅读： references/ai-service-configuration.md

在App.xaml.cs中注册聊天客户端
Azure OpenAI配置（部署、API密钥、端点）
OpenAI配置（API密钥、模型选择）
Ollama自托管模型（安装、本地设置）
每个提供商所需的NuGet包
内置AI提供商的故障排除

阅读时机： 配置Azure OpenAI、OpenAI或Ollama以实现AI驱动的建议时。此文档适用于官方/内置AI提供商的设置。

Custom AI Service Integration

自定义AI服务集成

📄 Read: references/custom-ai-services.md

```
IChatInferenceService
```
interface and when to use it
Claude AI — request/response models, service class, registration
DeepSeek — chat completions integration and registration
Gemini — Google AI Studio setup, safety settings, registration
Groq — low-latency OpenAI-compatible endpoint, registration
No need to call
```
ConfigureSyncfusionAIServices()
```
when using custom services
Choosing the right custom provider
Troubleshooting custom AI implementations

When to read: Integrating custom AI services, implementing Claude/DeepSeek/Gemini/Groq, or creating a custom IChatInferenceService adapter.

📄 阅读： references/custom-ai-services.md

```
IChatInferenceService
```
接口及其适用场景
Claude AI — 请求/响应模型、服务类、注册
DeepSeek — 聊天补全集成与注册
Gemini — Google AI Studio设置、安全设置、注册
Groq — 低延迟OpenAI兼容端点、注册
使用自定义服务时无需调用
```
ConfigureSyncfusionAIServices()
```
选择合适的自定义提供商
自定义AI实现的故障排除

阅读时机： 集成自定义AI服务、实现Claude/DeepSeek/Gemini/Groq，或创建自定义IChatInferenceService适配器时。

Quick Start Example

快速入门示例

Here's a minimal example to get started with the Smart Text Editor:

以下是一个快速上手Smart Text Editor的极简示例：

1. Install NuGet Package

1. 安装NuGet包

powershell

Install-Package Syncfusion.SfSmartComponents.WPF

powershell

Install-Package Syncfusion.SfSmartComponents.WPF

2. Add Control in XAML

2. 在XAML中添加控件

xaml

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
        x:Class="YourApp.MainWindow">
    <Grid>
        <syncfusion:SfSmartTextEditor 
            x:Name="smartTextEditor"
            Placeholder="Type your response..."
            UserRole="Customer support agent responding to inquiries">
            <syncfusion:SfSmartTextEditor.UserPhrases>
                <x:String>Thank you for reaching out.</x:String>
                <x:String>We'll investigate and get back to you shortly.</x:String>
            </syncfusion:SfSmartTextEditor.UserPhrases>
        </syncfusion:SfSmartTextEditor>
    </Grid>
</Window>

xaml

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
        x:Class="YourApp.MainWindow">
    <Grid>
        <syncfusion:SfSmartTextEditor 
            x:Name="smartTextEditor"
            Placeholder="Type your response..."
            UserRole="Customer support agent responding to inquiries">
            <syncfusion:SfSmartTextEditor.UserPhrases>
                <x:String>Thank you for reaching out.</x:String>
                <x:String>We'll investigate and get back to you shortly.</x:String>
            </syncfusion:SfSmartTextEditor.UserPhrases>
        </syncfusion:SfSmartTextEditor>
    </Grid>
</Window>

3. Configure AI Service (App.xaml.cs)

3. 配置AI服务（App.xaml.cs）

csharp

using Azure.AI.OpenAI;
using Microsoft.Extensions.AI;
using Microsoft.Extensions.DependencyInjection;
using Syncfusion.UI.Xaml.SmartComponents;
using System.ClientModel;
using System.Windows;

public partial class App : Application
{
    protected override void OnStartup(StartupEventArgs e)
    {
        base.OnStartup(e);
        
        // Configure Azure OpenAI
        string azureApiKey = "<YOUR-API-KEY>";
        Uri azureEndpoint = new Uri("<YOUR-ENDPOINT>");
        string deploymentName = "<YOUR-DEPLOYMENT>";

        AzureOpenAIClient azureClient = new AzureOpenAIClient(
            azureEndpoint, 
            new ApiKeyCredential(azureApiKey)
        );
        IChatClient chatClient = azureClient
            .GetChatClient(deploymentName)
            .AsIChatClient();
        
        SyncfusionAIExtension.Services.AddSingleton<IChatClient>(chatClient);
        SyncfusionAIExtension.ConfigureSyncfusionAIServices();
    }
}

csharp

using Azure.AI.OpenAI;
using Microsoft.Extensions.AI;
using Microsoft.Extensions.DependencyInjection;
using Syncfusion.UI.Xaml.SmartComponents;
using System.ClientModel;
using System.Windows;

public partial class App : Application
{
    protected override void OnStartup(StartupEventArgs e)
    {
        base.OnStartup(e);
        
        // Configure Azure OpenAI
        string azureApiKey = "<YOUR-API-KEY>";
        Uri azureEndpoint = new Uri("<YOUR-ENDPOINT>");
        string deploymentName = "<YOUR-DEPLOYMENT>";

        AzureOpenAIClient azureClient = new AzureOpenAIClient(
            azureEndpoint, 
            new ApiKeyCredential(azureApiKey)
        );
        IChatClient chatClient = azureClient
            .GetChatClient(deploymentName)
            .AsIChatClient();
        
        SyncfusionAIExtension.Services.AddSingleton<IChatClient>(chatClient);
        SyncfusionAIExtension.ConfigureSyncfusionAIServices();
    }
}

Common Patterns

常见模式

Pattern 1: Support Ticket Response Editor

模式1：支持工单响应编辑器

Scenario: Customer support application with branded responses.

xaml

<syncfusion:SfSmartTextEditor
    Placeholder="Write your response..."
    UserRole="Technical support engineer helping customers with product issues"
    MaxLength="2000"
    SuggestionDisplayMode="Inline">
    <syncfusion:SfSmartTextEditor.UserPhrases>
        <x:String>Thanks for contacting Syncfusion support.</x:String>
        <x:String>Could you please share a reproducible sample?</x:String>
        <x:String>We've logged this as a bug and will update you soon.</x:String>
        <x:String>Let us know if you need further assistance.</x:String>
    </syncfusion:SfSmartTextEditor.UserPhrases>
</syncfusion:SfSmartTextEditor>

场景： 具备品牌化回复的客户支持应用

xaml

<syncfusion:SfSmartTextEditor
    Placeholder="Write your response..."
    UserRole="Technical support engineer helping customers with product issues"
    MaxLength="2000"
    SuggestionDisplayMode="Inline">
    <syncfusion:SfSmartTextEditor.UserPhrases>
        <x:String>Thanks for contacting Syncfusion support.</x:String>
        <x:String>Could you please share a reproducible sample?</x:String>
        <x:String>We've logged this as a bug and will update you soon.</x:String>
        <x:String>Let us know if you need further assistance.</x:String>
    </syncfusion:SfSmartTextEditor.UserPhrases>
</syncfusion:SfSmartTextEditor>

Pattern 2: Email Composition with Custom Styling

模式2：自定义样式的邮件撰写器

Scenario: Email client with custom theme and popup suggestions.

xaml

<syncfusion:SfSmartTextEditor
    Placeholder="Compose your email..."
    UserRole="Professional email author"
    SuggestionDisplayMode="Popup"
    MaxLength="5000">
    <syncfusion:SfSmartTextEditor.Style>
        <Style TargetType="{x:Type syncfusion:SfSmartTextEditor}">
            <Setter Property="FontSize" Value="14"/>
            <Setter Property="Foreground" Value="#333333"/>
            <Setter Property="FontFamily" Value="Segoe UI"/>
        </Style>
    </syncfusion:SfSmartTextEditor.Style>
    <syncfusion:SfSmartTextEditor.SuggestionPopupStyle>
        <Style TargetType="syncfusion:SuggestionPopup">
            <Setter Property="Background" Value="#0078D4"/>
            <Setter Property="Foreground" Value="White"/>
        </Style>
    </syncfusion:SfSmartTextEditor.SuggestionPopupStyle>
</syncfusion:SfSmartTextEditor>

场景： 具备自定义主题和弹窗建议的邮件客户端

xaml

<syncfusion:SfSmartTextEditor
    Placeholder="Compose your email..."
    UserRole="Professional email author"
    SuggestionDisplayMode="Popup"
    MaxLength="5000">
    <syncfusion:SfSmartTextEditor.Style>
        <Style TargetType="{x:Type syncfusion:SfSmartTextEditor}">
            <Setter Property="FontSize" Value="14"/>
            <Setter Property="Foreground" Value="#333333"/>
            <Setter Property="FontFamily" Value="Segoe UI"/>
        </Style>
    </syncfusion:SfSmartTextEditor.Style>
    <syncfusion:SfSmartTextEditor.SuggestionPopupStyle>
        <Style TargetType="syncfusion:SuggestionPopup">
            <Setter Property="Background" Value="#0078D4"/>
            <Setter Property="Foreground" Value="White"/>
        </Style>
    </syncfusion:SfSmartTextEditor.SuggestionPopupStyle>
</syncfusion:SfSmartTextEditor>

Pattern 3: Text Editor with Change Tracking

模式3：带变更跟踪的文本编辑器

Scenario: Track text changes for auto-save or validation.

xaml

<syncfusion:SfSmartTextEditor
    x:Name="smartTextEditor"
    TextChangedCommand="{Binding TextChangedCommand}"
    Placeholder="Start typing..."/>

csharp

public class EditorViewModel : INotifyPropertyChanged
{
    public ICommand TextChangedCommand { get; }

    public EditorViewModel()
    {
        TextChangedCommand = new RelayCommand(OnTextChanged);
    }

    private void OnTextChanged()
    {
        // Auto-save, validation, or tracking logic
        Debug.WriteLine("Text changed - triggering auto-save");
    }
}

场景： 跟踪文本变更以实现自动保存或验证

xaml

<syncfusion:SfSmartTextEditor
    x:Name="smartTextEditor"
    TextChangedCommand="{Binding TextChangedCommand}"
    Placeholder="Start typing..."/>

csharp

public class EditorViewModel : INotifyPropertyChanged
{
    public ICommand TextChangedCommand { get; }

    public EditorViewModel()
    {
        TextChangedCommand = new RelayCommand(OnTextChanged);
    }

    private void OnTextChanged()
    {
        // Auto-save, validation, or tracking logic
        Debug.WriteLine("Text changed - triggering auto-save");
    }
}

Pattern 4: Offline-First with Custom Phrases

模式4：优先离线的自定义短语编辑器

Scenario: App that works without AI connectivity.

xaml

<syncfusion:SfSmartTextEditor
    Placeholder="Type your message..."
    UserRole="Sales representative responding to leads">
    <syncfusion:SfSmartTextEditor.UserPhrases>
        <x:String>Thank you for your interest in our products.</x:String>
        <x:String>I'd be happy to schedule a demo.</x:String>
        <x:String>Our pricing starts at $99 per month.</x:String>
        <x:String>Let me connect you with our solutions team.</x:String>
        <x:String>Feel free to reach out with any questions.</x:String>
    </syncfusion:SfSmartTextEditor.UserPhrases>
</syncfusion:SfSmartTextEditor>

Note: If no AI service is configured, the editor automatically falls back to UserPhrases for suggestions.

场景： 无需AI连接即可运行的应用

xaml

<syncfusion:SfSmartTextEditor
    Placeholder="Type your message..."
    UserRole="Sales representative responding to leads">
    <syncfusion:SfSmartTextEditor.UserPhrases>
        <x:String>Thank you for your interest in our products.</x:String>
        <x:String>I'd be happy to schedule a demo.</x:String>
        <x:String>Our pricing starts at $99 per month.</x:String>
        <x:String>Let me connect you with our solutions team.</x:String>
        <x:String>Feel free to reach out with any questions.</x:String>
    </syncfusion:SfSmartTextEditor.UserPhrases>
</syncfusion:SfSmartTextEditor>

注意： 如果未配置AI服务，编辑器会自动回退到UserPhrases提供建议。

Key Properties

关键属性

Property	Type	Description	Default
`Text`	`string`	Gets or sets the text content	`""`
`Placeholder`	`string`	Placeholder text when editor is empty	`null`
`UserRole`	`string`	Describes who is typing and intent (shapes AI suggestions)	`null`
`UserPhrases`	`List<string>`	Custom phrase library for offline suggestions	`null`
`SuggestionDisplayMode`	`SuggestionDisplayMode`	Display mode: `Inline` or `Popup`	`Inline`
`MaxLength`	`int`	Maximum character limit	`0` (unlimited)
`TextChangedCommand`	`ICommand`	Command triggered when text changes	`null`
`Style`	`Style`	Text style (FontSize, Foreground, etc.)	Default
`PlaceholderStyle`	`Style`	Placeholder styling	Default
`SuggestionInlineStyle`	`Style`	Inline suggestion text style	Default
`SuggestionPopupStyle`	`Style`	Popup suggestion background style	Default

属性	类型	描述	默认值
`Text`	`string`	获取或设置文本内容	`""`
`Placeholder`	`string`	编辑器为空时的占位符文本	`null`
`UserRole`	`string`	描述输入者身份和意图（影响AI建议）	`null`
`UserPhrases`	`List<string>`	用于离线建议的自定义短语库	`null`
`SuggestionDisplayMode`	`SuggestionDisplayMode`	显示模式： `Inline` 或 `Popup`	`Inline`
`MaxLength`	`int`	最大字符限制	`0` （无限制）
`TextChangedCommand`	`ICommand`	文本变更时触发的命令	`null`
`Style`	`Style`	文本样式（FontSize、Foreground等）	默认样式
`PlaceholderStyle`	`Style`	占位符样式	默认样式
`SuggestionInlineStyle`	`Style`	内联建议文本样式	默认样式
`SuggestionPopupStyle`	`Style`	弹窗建议背景样式	默认样式

Common Use Cases

常见用例

When User Needs Inline Suggestions (Desktop)

当用户需要内联建议（桌面设备）时

Action: Set
```
SuggestionDisplayMode="Inline"
```
Why: Natural typing flow on keyboard-driven devices
Reference: suggestion-display-modes.md

操作： 设置
```
SuggestionDisplayMode="Inline"
```
原因： 适配键盘驱动设备的自然输入流程
参考： suggestion-display-modes.md

When User Needs Popup Suggestions (Touch Devices)

当用户需要弹窗建议（触控设备）时

Action: Set
```
SuggestionDisplayMode="Popup"
```
Why: Easier to tap/click on mobile/touch screens
Reference: suggestion-display-modes.md

操作： 设置
```
SuggestionDisplayMode="Popup"
```
原因： 便于在移动/触控屏幕上点击选择
参考： suggestion-display-modes.md

When User Needs Azure OpenAI Integration

当用户需要集成Azure OpenAI时

Action: Configure
```
AzureOpenAIClient
```
in App.xaml.cs
Why: Enterprise-grade AI with Azure security and compliance
Reference: ai-service-configuration.md

操作： 在App.xaml.cs中配置
```
AzureOpenAIClient
```
原因： 利用Azure的安全性和合规性实现企业级AI
参考： ai-service-configuration.md

When User Needs Custom AI Provider (Claude, Gemini, etc.)

当用户需要自定义AI提供商（Claude、Gemini等）时

Action: Implement
```
IChatInferenceService
```
interface
Why: Use alternative AI providers or custom inference logic
Reference: custom-ai-services.md

操作： 实现
```
IChatInferenceService
```
接口
原因： 使用替代AI提供商或自定义推理逻辑
参考： custom-ai-services.md

When User Needs Character Limit

当用户需要字符限制时

Action: Set
```
MaxLength
```
property
Why: Enforce input validation and prevent excessive text
Reference: customization.md

操作： 设置
```
MaxLength
```
属性
原因： 强制执行输入验证，防止文本过长
参考： customization.md

When User Needs Text Change Notifications

当用户需要文本变更通知时

Action: Bind
```
TextChangedCommand
```
to ViewModel
Why: Track changes for auto-save, validation, or analytics
Reference: commands.md

操作： 将
```
TextChangedCommand
```
绑定到ViewModel
原因： 跟踪变更以实现自动保存、验证或分析
参考： commands.md

When User Needs Offline Suggestions

当用户需要离线建议时

Action: Configure
```
UserPhrases
```
without AI service
Why: Provide suggestions when AI is unavailable or disabled
Reference: getting-started.md

操作： 配置
```
UserPhrases
```
且不设置AI服务
原因： 在AI不可用或禁用时提供建议
参考： getting-started.md

When User Needs Custom Theme

当用户需要自定义主题时

Action: Apply

Style

PlaceholderStyle

SuggestionInlineStyle

Why: Match application branding and design system
Reference: customization.md

Next Steps:

For initial setup and installation → Read getting-started.md
For AI provider configuration → Read ai-service-configuration.md
For custom AI services → Read custom-ai-services.md
For appearance customization → Read customization.md

操作： 应用

Style

、

PlaceholderStyle

、

SuggestionInlineStyle

原因： 匹配应用品牌和设计系统
参考： customization.md

后续步骤：

初始设置与安装 → 阅读getting-started.md
AI提供商配置 → 阅读ai-service-configuration.md
自定义AI服务 → 阅读custom-ai-services.md
外观自定义 → 阅读customization.md