syncfusion-maui-smart-text-editor

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion .NET MAUI Smart Text Editor

实现Syncfusion .NET MAUI智能文本编辑器

SfSmartTextEditor

is a multiline text input control that accelerates typing with AI-powered predictive suggestions. It integrates with Azure OpenAI, OpenAI, Ollama, or any custom AI service via

IChatInferenceService

, and falls back to your custom

UserPhrases

list when AI is unavailable. Suggestions appear inline or as a popup near the caret and can be accepted with Tab or Right Arrow.

SfSmartTextEditor

是一款多行文本输入控件，可借助AI驱动的预测建议加快输入速度。它可通过

IChatInferenceService

与Azure OpenAI、OpenAI、Ollama或任何自定义AI服务集成，当AI不可用时，会回退到您自定义的

UserPhrases

列表。建议会以内联形式或在光标附近以弹窗形式显示，可通过Tab键或右键箭头键接受。

When to Use This Skill

何时使用此技能

Add a multiline text input with AI-powered autocomplete to a .NET MAUI app
Configure suggestion display as inline (desktop) or popup (touch devices)
Integrate Azure OpenAI, OpenAI, Ollama, Claude, DeepSeek, Gemini, or Groq
Implement a custom AI service via
```
IChatInferenceService
```
Customize text style, placeholder, suggestion colors, popup background, or character limits
Respond to text change events or MVVM commands
Apply the liquid glass visual effect to the editor

为.NET MAUI应用添加带有AI驱动自动补全功能的多行文本输入
配置建议显示方式为内联模式（桌面端）或弹窗模式（触控设备）
集成Azure OpenAI、OpenAI、Ollama、Claude、DeepSeek、Gemini或Groq
通过
IChatInferenceService
实现自定义AI服务
自定义文本样式、占位符、建议颜色、弹窗背景或字符限制
响应文本更改事件或MVVM命令
为编辑器应用液态玻璃视觉效果

Component Overview

组件概述

The SfSmartTextEditor control provides:

AI-Powered Predictions: Context-aware completions via Azure OpenAI, OpenAI, Ollama, or custom IChatInferenceService integration
Flexible Suggestion Display: Inline mode (desktop-first seamless flow) or Popup mode (touch-first overlay) with platform-specific defaults
Offline Fallback: Custom UserPhrases library for AI-free suggestions when network or API is unavailable
Smart Context Engine: UserRole property shapes suggestion tone and relevance based on typing scenario
Multi-Input Acceptance: Tab/Right Arrow keyboard shortcuts (desktop) and tap/click gestures (all platforms)
Character Limit Validation: MaxLength enforcement to prevent input beyond specified constraints
Rich Customization: TextStyle, placeholder colors, suggestion preview colors, and popup background styling
MVVM Support: Two-way Text binding, TextChanged event, and TextChangedCommand for reactive data flow
Modern Effects: Liquid Glass Effect support for translucent designs (iOS/macOS 26+, .NET 10)

SfSmartTextEditor控件提供以下功能：

AI驱动预测：通过Azure OpenAI、OpenAI、Ollama或自定义IChatInferenceService集成实现上下文感知补全
灵活的建议显示：内联模式（优先适配桌面端的流畅流程）或弹窗模式（优先适配触控端的覆盖层），带有平台特定默认设置
离线回退：当网络或API不可用时，自定义UserPhrases库可提供无AI建议
智能上下文引擎：UserRole属性可根据输入场景调整建议的语气和相关性
多输入接受方式：桌面端的Tab/右键箭头键盘快捷键，以及全平台的点击/触摸手势
字符限制验证：MaxLength强制限制，防止输入超出指定约束
丰富的自定义选项：文本样式、占位符颜色、建议预览颜色和弹窗背景样式
MVVM支持：双向Text绑定、TextChanged事件和TextChangedCommand，实现响应式数据流
现代效果：支持液态玻璃效果，适用于半透明设计（iOS/macOS 26+、.NET 10）

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md

NuGet package installation (
```
Syncfusion.Maui.SmartComponents
```
)
Handler registration with
```
ConfigureSyncfusionCore()
```
in
```
MauiProgram.cs
```
AI service registration with
```
ConfigureSyncfusionAIServices()
```
Adding
```
SfSmartTextEditor
```
in XAML and C#
Configuring
```
UserRole
```
and
```
UserPhrases
```
for context-aware suggestions
Offline fallback behavior when AI is unavailable

📄 阅读： references/getting-started.md

NuGet包安装（
```
Syncfusion.Maui.SmartComponents
```
）
在
```
MauiProgram.cs
```
中使用
```
ConfigureSyncfusionCore()
```
注册处理程序
使用
```
ConfigureSyncfusionAIServices()
```
注册AI服务
在XAML和C#中添加
```
SfSmartTextEditor
```
配置
```
UserRole
```
和
```
UserPhrases
```
以实现上下文感知建议
AI不可用时的离线回退行为

Suggestion Display Modes

建议显示模式

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

Inline mode — suggestion rendered in-place after the caret (desktop-first)
Popup mode — compact overlay near caret (touch-first, Android/iOS)
Platform defaults and when to override them
Accepting suggestions with Tab or Right Arrow keys
Platform limitations (Tab key not supported on Android/iOS)

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

内联模式——建议在光标后原位呈现（优先适配桌面端）
弹窗模式——光标附近的紧凑覆盖层（优先适配触控端，Android/iOS）
平台默认设置以及何时覆盖它们
使用Tab键或右键箭头键接受建议
平台限制（Android/iOS不支持Tab键）

Customization

自定义选项

📄 Read: references/customization.md

Setting and data-binding editor text via
```
Text
```
property
Font and color via
```
TextStyle
```
(
```
SmartTextEditorStyle
```
)
Placeholder text and
```
PlaceholderColor
```
```
SuggestionTextColor
```
— style the suggestion preview text
```
SuggestionPopupBackground
```
— background color of popup suggestions
```
MaxLength
```
— enforce a character limit

📄 阅读： references/customization.md

通过
```
Text
```
属性设置和数据绑定编辑器文本
通过
```
TextStyle
```
（
```
SmartTextEditorStyle
```
）设置字体和颜色
占位符文本和
```
PlaceholderColor
```
```
SuggestionTextColor
```
——设置建议预览文本的样式
```
SuggestionPopupBackground
```
——弹窗建议的背景颜色
```
MaxLength
```
——强制字符限制

Events

事件

📄 Read: references/events.md

```
TextChanged
```
event with
```
OldTextValue
```
and
```
NewTextValue
```
XAML event subscription and C# handler pattern
```
TextChangedCommand
```
for MVVM / data-binding scenarios
ViewModel command setup example

📄 阅读： references/events.md

带有
```
OldTextValue
```
和
```
NewTextValue
```
的
```
TextChanged
```
事件
XAML事件订阅和C#处理程序模式
适用于MVVM/数据绑定场景的
```
TextChangedCommand
```
ViewModel命令设置示例

AI Service Configuration (Azure OpenAI / OpenAI / Ollama)

AI服务配置（Azure OpenAI / OpenAI / Ollama）

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

Azure OpenAI — required NuGet packages, endpoint/key/model configuration
OpenAI — API key and model setup
Ollama — self-hosted local model configuration

Registering the chat client and

ConfigureSyncfusionAIServices()

MauiProgram.cs

Choosing the right provider for your scenario

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

Azure OpenAI——所需NuGet包、端点/密钥/模型配置
OpenAI——API密钥和模型设置
Ollama——自托管本地模型配置

在

MauiProgram.cs

中注册聊天客户端和

ConfigureSyncfusionAIServices()

为您的场景选择合适的提供商

Custom AI Services (Claude / DeepSeek / Gemini / Groq)

自定义AI服务（Claude / DeepSeek / Gemini / Groq）

📄 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
Troubleshooting when no suggestions appear

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

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

Liquid Glass Effect

液态玻璃效果

📄 Read: references/liquid-glass-effect.md

Prerequisites: .NET 10, macOS 26+ or iOS 26+
Wrapping
```
SfSmartTextEditor
```
in
```
SfGlassEffectView
```
Enabling via
```
EnableLiquidGlassEffect="True"
```
Setting
```
Background="Transparent"
```
for correct glass tinting
Full XAML and C# examples

📄 阅读： references/liquid-glass-effect.md

先决条件：.NET 10、macOS 26+或iOS 26+
将
```
SfSmartTextEditor
```
包装在
```
SfGlassEffectView
```
中
通过
```
EnableLiquidGlassEffect="True"
```
启用
设置
```
Background="Transparent"
```
以实现正确的玻璃色调
完整的XAML和C#示例