From 7f91c241a8236cb221150c3a70e5c61d45e74a81 Mon Sep 17 00:00:00 2001 From: MonikaTheerthagiri Date: Wed, 8 Jul 2026 18:38:23 +0530 Subject: [PATCH 1/2] Committing the updated SmartTextEditor UG content --- wpf/SmartTextEditor/commands.md | 76 ++++++++++++++---- wpf/SmartTextEditor/customization.md | 40 ++++++---- wpf/SmartTextEditor/getting-started.md | 80 ++++++++++++++----- wpf/SmartTextEditor/overview.md | 29 +++++-- .../suggestion-display-mode.md | 51 ++++++++++-- 5 files changed, 209 insertions(+), 67 deletions(-) diff --git a/wpf/SmartTextEditor/commands.md b/wpf/SmartTextEditor/commands.md index 48a46c5777..9c787ca0b1 100644 --- a/wpf/SmartTextEditor/commands.md +++ b/wpf/SmartTextEditor/commands.md @@ -7,37 +7,79 @@ control: SfSmartTextEditor documentation: ug --- -# Commands in WPF AI-Powered Text Editor (SfSmartTextEditor) +# TextChangedCommand in WPF Smart Text Editor (SfSmartTextEditor) -The AI-Powered Text Editor provides the `TextChangedCommand` command, is triggered whenever the text in the smart text editor changes. +The WPF Smart Text Editor provides the `TextChangedCommand` command, which is triggered whenever the text in the editor changes. This page documents the `TextChangedCommand` and the set of supported commands; refer to the [SfSmartTextEditor API reference](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.SmartComponents.html) for the complete and version-specific list. ### TextChangedCommand -The `SfSmartTextEditor` includes a built-in property called `TextChangedCommand`, which is triggered whenever the text in the smart text editor changes. This event can be invoked through the `TextChangedCommand`. +The `SfSmartTextEditor` includes a built-in command called `TextChangedCommand`, which is triggered whenever the text in the editor changes. You can invoke this command through the `TextChangedCommand` property. + +N> The exact parameter passed to the command's `Execute` and `CanExecute` methods (for example, the new text, the old text, or a `TextChangedEventArgs`-like object) depends on the installed Syncfusion version. Refer to the `SfSmartTextEditor` API reference for the precise `ICommand` contract. + +## Supported commands + +The following command is documented on this page: + +- `TextChangedCommand` — Raised whenever the text in the editor changes. + +N> The set of commands supported by the control, including the parameter types and any additional commands such as suggestion-accepted events, depends on the installed Syncfusion version. Refer to the [SfSmartTextEditor API reference](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.SmartComponents.html) for the complete and version-specific list. + +## Version compatibility + +The command infrastructure described in this page is available in the `Syncfusion.SfSmartComponents.WPF` package. The specific command names, parameter types, and available members may differ between Syncfusion versions. Refer to the release notes for your installed version. + +## Setting up the project to use `TextChangedCommand` + +Before you wire up `TextChangedCommand` in your view, complete the following steps: + +1. Add a reference to the `Syncfusion.SfSmartComponents.WPF` assembly in your WPF project (the same NuGet package installed in the Getting Started walkthrough). +2. In your XAML page, declare the `Syncfusion.UI.Xaml.SmartComponents` namespace (for example, as `xmlns:smarttexteditor`) so the `SfSmartTextEditor` element and its `TextChangedCommand` property resolve. +3. If you bind `TextChangedCommand` to a property on a view model or code-behind class, make sure the binding source (the `DataContext`) exposes a property of type `System.Windows.Input.ICommand` named `TextChangedCommand` (or matching the binding path you use in XAML). Add the `using System.Windows.Input;` directive in the C# file that defines the command property. +4. If you are using a third-party `ICommand` implementation such as `RelayCommand` or `DelegateCommand`, install the corresponding NuGet package (for example, `CommunityToolkit.Mvvm`) and add the required `using` directive for that namespace. The `Command` type referenced in the sample below is a placeholder — substitute it with the `ICommand` implementation available in your project. {% tabs %} -{% highlight xaml tabtitle="MainPage.xaml" hl_lines="2" %} +{% highlight xaml tabtitle="MainPage.xaml" hl_lines="8" %} - + - + - + + + + {% endhighlight %} -{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="3,6,8" %} +{% highlight c# tabtitle="MainPage.xaml.cs" %} -public class SmartTextEditorViewModel +using System.Windows; +using System.Windows.Input; +using Syncfusion.UI.Xaml.SmartComponents; + +namespace WpfApplication1 { - public ICommand TextChangedCommand { get; set; } - public SmartTextEditorViewModel() + public partial class MainWindow : Window { - TextChangedCommand = new Command(TextChangedCommand); - } - private void TextChangedCommand() - { - // To do your requirement here. + public MainWindow() + { + InitializeComponent(); + // Use a concrete ICommand implementation such as RelayCommand. + // Substitute "RelayCommand" with the ICommand implementation available in your project + // (for example, CommunityToolkit.Mvvm's RelayCommand, Prism's DelegateCommand, or your own). + TextChangedCommand = new RelayCommand(OnTextChanged); + } + + public ICommand TextChangedCommand { get; set; } + + private void OnTextChanged(object parameter) + { + // To do your requirement here. + } } } diff --git a/wpf/SmartTextEditor/customization.md b/wpf/SmartTextEditor/customization.md index 9915275910..eca9a8bcfb 100644 --- a/wpf/SmartTextEditor/customization.md +++ b/wpf/SmartTextEditor/customization.md @@ -11,7 +11,7 @@ documentation: ug 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. +Set or bind the WPF Smart Text Editor’s text using the `Text` property. You can use this to set preloaded content or bind it to a field in your view model for data binding. {% tabs %} {% highlight xaml tabtitle="XAML" %} @@ -80,7 +80,9 @@ Add a helpful placeholder to guide users and use `PlaceholderStyle` to make the ## Suggestion text color -Customize the color of the suggestion text using the `SuggestionInlineStyle` property to match your theme and improves readability. +Customize the color of the suggestion text using the `SuggestionInlineStyle` property to match your theme and improve readability. + +N> The `SuggestionInlineStyle` property accepts a `Style` whose `TargetType` is the suggestion text element (commonly `TextBlock`). The settable properties depend on the target element. Common setters include `FontSize`, `FontFamily`, `FontWeight`, `Foreground`, and `Background`. The full list of supported style setters depends on the installed Syncfusion version; refer to the API reference for the complete contract. {% tabs %} {% highlight xaml tabtitle="XAML" %} @@ -100,20 +102,24 @@ Customize the color of the suggestion text using the `SuggestionInlineStyle` pro ![Suggestion Text Color in WPF Smart Text Editor.](images/customization/wpf-smarttexteditor-inline-textcolor.gif) ## 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. +Change the background color of the suggestion popup using the `SuggestionPopupStyle` property in Popup mode. This helps the suggestion align with your app's design. {% tabs %} {% highlight xaml tabtitle="XAML" %} - - - - - + + + + + + + {% endhighlight %} {% endtabs %} @@ -121,7 +127,9 @@ Change the background color of the suggestion popup using the `SuggestionPopupSt ![Customization in WPF Smart Text Editor.](images/customization/wpf-smarttexteditor-customization.gif) ## Maximum input length -Set a limit on the number of characters the user can enter in the smart text editor using the `MaxLength` property. +Set a limit on the number of characters the user can enter in the WPF Smart Text Editor using the `MaxLength` property. + +N> The default value, the behavior when the limit is reached (for example, prevents further input versus silently truncates), and the minimum allowed value of `MaxLength` depend on the installed Syncfusion version. Refer to the API reference for the exact contract, and choose a positive integer appropriate for your scenario. {% tabs %} {% highlight xaml tabtitle="XAML" %} @@ -138,4 +146,8 @@ var smarttexteditor = new SfSmartTextEditor }; {% endhighlight %} -{% endtabs %} \ No newline at end of file +{% endtabs %} + +## Version compatibility + +The properties documented on this page (`Text`, `Style`, `Placeholder`, `PlaceholderStyle`, `SuggestionInlineStyle`, `SuggestionPopupStyle`, `SuggestionDisplayMode`, `MaxLength`, and related members) are available in the `Syncfusion.SfSmartComponents.WPF` package. The exact property names, types, and supported values may differ between Syncfusion versions. Refer to the release notes for your installed version. \ No newline at end of file diff --git a/wpf/SmartTextEditor/getting-started.md b/wpf/SmartTextEditor/getting-started.md index 7f26caefff..467cb4c4de 100644 --- a/wpf/SmartTextEditor/getting-started.md +++ b/wpf/SmartTextEditor/getting-started.md @@ -11,36 +11,49 @@ documentation: ug This section explains how to add the [WPF SmartTextEditor](https://www.syncfusion.com/wpf-controls/smart-text-editor) control. It covers only the basic features needed to get started with the Syncfusion AI-Powered Text Editor. Follow the steps below to add a WPF AI-Powered Text Editor control to your project. -N> The Smart Text Editor is distributed as part of the `Syncfusion.SfSmartComponents.WPF` package provides advanced AI-assisted features to enhance text editing and content management. Ensure your application has the required AI service configuration to enable these features. +N> The Smart Text Editor is distributed as part of the `Syncfusion.SfSmartComponents.WPF` package, which provides advanced AI-assisted features to enhance text editing and content management. Ensure your application has the required AI service configuration to enable these features. ## Prerequisites Before proceeding, ensure the following are set up: -1. Install .NET SDK - - [.NET 9 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/9.0) or later must be installed. -2. Set up a WPF Environment with Visual Studio. Supported Visual Studio Versions: - - Visual Studio 2022: Version 17.13 or later (e.g., 17.14.7) for .NET 9 development. - - Visual Studio 2026: Required for .NET 10 development. + +1. Install the **.NET SDK**: [Download .NET 9 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/9.0) or later must be installed on your machine. +2. Set up a **WPF development environment** with Visual Studio. Supported Visual Studio versions are listed below. Make sure the **.NET desktop development** workload is installed (this provides the WPF project templates, MSBuild support, and the WPF SDK reference assemblies required by your project): + - **Visual Studio 2022** (Version 17.13 or later, for example 17.14.7) for **.NET 9** development. + - **Visual Studio 2026** for **.NET 10** development. +3. **Enable WPF in your project**: for a .NET 9 (or later) console-style or library project, ensure your project file contains `true`. The default WPF App template from Visual Studio includes this setting; only add or verify it if you are configuring the project manually. WPF project templates automatically include the necessary WPF targeting pack; if you are building from the command line, install the [Microsoft.WindowsDesktop.App](https://www.nuget.org/packages/Microsoft.WindowsDesktop.App) targeting pack for your target framework. Refer to the official Microsoft WPF setup guide for details specific to your development environment. +4. **Configure an AI service** (required only if you want AI-powered completions; the control also works in offline mode with `UserPhrases`): the example in this walkthrough uses **Azure OpenAI**. Before you begin, create an Azure OpenAI resource in the [Azure portal](https://portal.azure.com/) and note down the following values — you will need them in **Step 5**: + - **API key** for the Azure OpenAI resource. + - **Endpoint URL** of the Azure OpenAI resource (for example, `https://.openai.azure.com/`). + - **Deployment name** of the model you intend to use (for example, `gpt-4o-mini` or your custom deployment name). For non-Azure providers (such as OpenAI or other compatible services), use the equivalent endpoint, API key, and model name and refer to that provider's documentation for the corresponding `Microsoft.Extensions.AI` configuration package and parameters. ## Step 1: Create a New WPF Project -1. Go to **File > New > Project** and choose the **WPF App** template. +1. In Visual Studio, go to **File > New > Project**. In the project template dialog, search for and select the **WPF App** template (C#), *not* "WPF App (.NET Framework)" — the **WPF App** template targets .NET 9 (or later) and is the template required for the `Syncfusion.SfSmartComponents.WPF` package. **WPF App (.NET Framework)** targets the older .NET Framework and is not supported by the SmartComponents WPF package. 2. Name the project and choose a location. Then click **Next**. -3. Select the .NET framework version and click **Create**. +3. On the next screen, select **.NET 9.0** (or a later supported version) as the target framework and click **Create**. ## Step 2: Install the Syncfusion® WPF SmartComponents NuGet Package 1. In **Solution Explorer,** right-click the project and choose **Manage NuGet Packages.** -2. Search for [Syncfusion.SfSmartComponents.WPF](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.SmartComponents.html) and install the latest version. +2. Search for [Syncfusion.SfSmartComponents.WPF](https://www.nuget.org/packages/Syncfusion.SfSmartComponents.WPF) and install the latest version of the package that supports `SfSmartTextEditor`. The corresponding API reference for the package namespace is available at [Syncfusion.UI.Xaml.SmartComponents](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.SmartComponents.html). Refer to the Syncfusion release notes for the version of `Syncfusion.SfSmartComponents.WPF` that first introduced the `SfSmartTextEditor` control. 3. Ensure the necessary dependencies are installed correctly, and the project is restored. -## Step 3: Adding control via Designer +N> The NuGet package ID and the assembly name are case-sensitive in some WPF scenarios. After installation, confirm that the `assembly=…` value in your XAML matches the casing of the built assembly under the project's `bin` folder. Refer to the API reference for the exact assembly name. + +## Step 3: Adding the control to your application + +You can add the `SfSmartTextEditor` control either by dragging it from the Visual Studio **Toolbox** into the Designer, or by declaring it manually in XAML or C#. The required assembly references are added automatically by the Toolbox; for the manual path, you need to add them yourself. -SfSmartTextEditor control can be added to the application by dragging it from Toolbox and dropping it in Designer view. The required assembly references will be added automatically. +### Option A — Adding the control via the Toolbox (Designer) -### Adding control manually in XAML +1. Build the project after the NuGet package is restored so that `SfSmartTextEditor` appears in the Visual Studio **Toolbox**. +2. Drag the **SfSmartTextEditor** item from the **Toolbox** onto the Designer surface (the **Window** or a containing layout panel such as a `Grid`). +3. The required assembly references and the namespace declaration are added automatically. -In order to add control manually in XAML, do the below steps, +### Option B — Adding the control manually in XAML + +In order to add the control manually in XAML, do the below steps, 1. Add the below required assembly references to the project, * Syncfusion.SfSmartComponents.WPF @@ -52,10 +65,10 @@ In order to add control manually in XAML, do the below steps, {% highlight xaml %} - + @@ -122,19 +135,22 @@ Set the writing context and preferred expressions to guide completions: {% endhighlight %} {% endtabs %} -N> If no AI inference service is configured, the editor generates offline suggestions from your UserPhrases. +N> If no AI inference service is configured, the editor generates offline suggestions from your `UserPhrases`. The `UserRole` and `UserPhrases` properties are part of the control's offline-suggestion API; the supported `UserPhrases` collection type and any default value depend on the installed Syncfusion version. Refer to the API reference for the exact contract. + +N> You can complete Steps 1 through 4 to build and run the application with offline suggestions only. To enable AI-powered completions, continue with **Step 5: Register the AI Service** below. ## Step 5: Register the AI Service -To configure the AI services, you must provide the **`azureApiKey`** in the **`App.xaml.cs`** file. +To enable AI-powered completions, configure the AI service in the `App.xaml.cs` file. **For production applications, store the API key, endpoint, and deployment name in a secure configuration source (for example, user secrets, environment variables, or Azure Key Vault) and read them at runtime — do not commit them to source control.** Follow the steps below to set up the AI services: 1. Open **NuGet Package Manager** and search for the following packages. -2. Install the **latest versions** of each package: +2. Install the **latest versions** of each package that are compatible with the installed `Syncfusion.SfSmartComponents.WPF` version: * **Azure.AI.OpenAI** * **Microsoft.Extensions.AI** * **Microsoft.Extensions.AI.OpenAI** +3. Open the `App.xaml.cs` file in your project. Configure the AI service inside the `OnStartup` override so that the chat client is registered before the application's main window is shown. Replace the placeholder values for `azureApiKey`, `azureEndpoint`, and `deploymentName` with the values from the Azure OpenAI resource you created in the **Prerequisites** section. For non-Azure providers, use the equivalent `Microsoft.Extensions.AI` provider package and refer to its documentation for the correct configuration parameters. ```csharp using Azure.AI.OpenAI; @@ -169,10 +185,34 @@ namespace WpfApplication1 ## Step 6: Running the Application -Press **F5** to build and run the application. Once compiled, the smart text editor will be displayed with the data provided, and AI features will be available after configuration. +Press **F5** to build and run the application. Once compiled, the WPF Smart Text Editor will appear, and AI features will be available after configuration. Here is the result of the previous codes, ![Getting Started in WPF Smart Text Editor.](images/getting-started/wpf-smarttexteditor-getting-started.gif) -N> You can refer to our [WPF Smart Text Editor](https://www.syncfusion.com/wpf-controls/smart-text-editor) feature tour page for its groundbreaking feature representations. \ No newline at end of file +N> You can refer to our [WPF Smart Text Editor](https://www.syncfusion.com/wpf-controls/smart-text-editor) feature tour page for its groundbreaking feature representations. + +## Troubleshooting + +The following are common issues when setting up the WPF Smart Text Editor. Refer to the AI service provider's documentation for full troubleshooting guidance. + +- **Suggestions are not generated from the AI service**: + - Verify that the AI service is reachable from the application (network, firewall, or proxy settings). + - Confirm that the API key, endpoint, and deployment name are valid and have the correct permissions. + - Check the application output for AI service errors (401/403 indicate authentication or authorization failures; 429 indicates rate limiting). + - Ensure the `IChatClient` is registered with `SyncfusionAIExtension.Services` before `ConfigureSyncfusionAIServices()` is called. +- **Offline-only behavior is used unexpectedly**: + - This indicates that the AI service is not configured, or the registration in `App.xaml.cs` failed silently. Confirm the packages in **Step 5** are installed and the call to `ConfigureSyncfusionAIServices()` runs. +- **The control does not appear or throws a `XamlParseException`**: + - Verify that the `Syncfusion.SfSmartComponents.WPF` assembly is referenced and the `xmlns:smarttexteditor` (or equivalent) namespace matches the installed assembly's casing. +- **Suggestions are generated but never accepted**: + - Confirm the focus is on the editor when pressing **Tab** or **Right Arrow**. + +For additional troubleshooting, refer to the Syncfusion WPF Smart Text Editor API reference and the release notes for your installed version. + +## Next steps + +- [Commands in WPF Smart Text Editor](commands.md) — Handle text-change events through the `TextChangedCommand`. +- [Customization in WPF Smart Text Editor](customization.md) — Style the editor and customize the suggestion display. +- [Suggestion display modes](suggestion-display-mode.md) — Switch between inline and popup suggestions. \ No newline at end of file diff --git a/wpf/SmartTextEditor/overview.md b/wpf/SmartTextEditor/overview.md index 9c71857a19..76a206e78d 100644 --- a/wpf/SmartTextEditor/overview.md +++ b/wpf/SmartTextEditor/overview.md @@ -15,18 +15,31 @@ Syncfusion [WPF AI-Powered Text Editor](https://www.syncfusion.com/wpf-controls/ ## Key features -* **Suggestion display modes**: Customization of suggestions is possible in both inline and popup modes. +Features with a dedicated documentation page are linked below. -* **AI powered suggestions**: IChatInferenceService provides clever, context-aware completions. +* **Suggestion display modes** (see [Suggestion display modes](suggestion-display-mode.md)): Customize suggestions using either inline or popup modes. -* **Custom phrase library**: Preserves backup phrases in case AI recommendations aren't available. +* **AI powered suggestions**: The WPF Smart Text Editor provides context-aware completions through a chat client (for example, `IChatClient` from `Microsoft.Extensions.AI`). -* **Maximum length validation**: To guarantee accurate input control, character restrictions are enforced. +* **Custom phrase library**: The custom phrase library preserves backup phrases for offline use when AI recommendations aren't available. -* **Keyboard integration**: Makes it possible to accept ideas quickly by utilizing the Tab or Right Arrow keys. +* **Maximum length validation**: The `MaxLength` property enforces a character limit to keep input within the allowed range (see [Maximum input length](customization.md#maximum-input-length)). -* **Gesture support**: Allows touch users to tap or click recommendations in the pop-up for quick input. +* **Keyboard integration**: Allows you to accept suggestions quickly by using the Tab or Right Arrow keys. -* **Placeholder text**: Enables placeholders to be configured with customizable color styling. +* **Gesture support**: Allows touch users to tap or click recommendations in the popup for quick input. -* **Customization**: Enables users to fully customize the user interface by controlling fonts, colors, sizes, and styles. \ No newline at end of file +* **Placeholder text**: The `Placeholder` and `PlaceholderStyle` properties allow configuration of a placeholder with customizable color styling (see [Placeholder text and color customization](customization.md#placeholder-text-and-color-customization)). + +* **Customization**: Enables users to fully customize the user interface by controlling fonts, colors, sizes, and styles (see [Customization in WPF Smart Text Editor](customization.md)). + +* **Commands**: `TextChangedCommand` is raised whenever the text in the editor changes (see [Commands in WPF Smart Text Editor](commands.md)). + +## Next steps + +- [Getting started with WPF Smart Text Editor](getting-started.md) — Add the control to your project and configure an AI service. +- [Commands in WPF Smart Text Editor](commands.md) — Handle text-change events through the `TextChangedCommand`. +- [Customization in WPF Smart Text Editor](customization.md) — Style the editor and customize the suggestion display. +- [Suggestion display modes](suggestion-display-mode.md) — Switch between inline and popup suggestions. + +N> For the complete list of properties, methods, and events, see the [SfSmartTextEditor API reference](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.SmartComponents.html). \ No newline at end of file diff --git a/wpf/SmartTextEditor/suggestion-display-mode.md b/wpf/SmartTextEditor/suggestion-display-mode.md index 3084223277..c00a964dba 100644 --- a/wpf/SmartTextEditor/suggestion-display-mode.md +++ b/wpf/SmartTextEditor/suggestion-display-mode.md @@ -11,20 +11,21 @@ documentation: ug The AI-Powered Text Editor supports two display modes for showing completions as you type: `Inline` and `Popup`. - `Inline`: Renders the predicted text in place after the caret, matching your text style. -- `Popup` : Shows a compact hint near the caret that you can tap or accept via key press. +- `Popup`: Shows a compact hint near the caret that you can tap the suggestion to accept it or accept it via a key press. + +N> `SuggestionDisplayMode` is an enum defined in the `Syncfusion.UI.Xaml.SmartComponents` namespace. The supported values shown above (`Inline` and `Popup`) reflect the values used in the samples on this page. The full enum, the default value, and any additional values depend on the installed Syncfusion version. Refer to the [SfSmartTextEditor API reference](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.SmartComponents.html) for the version-specific list. N> -- Windows and Mac Catalyst default to **Inline**; Android and iOS default to **Popup**. +- On Windows, the default display mode is **Inline**. - Suggestions can be applied using the **Tab** or **Right Arrow** keys in both modes. -- Applying inline suggestions with the **Tab** key is not supported on Android and iOS. ## Inline suggestion mode Inline mode displays the suggested text directly within the editor, seamlessly continuing your typing flow. This approach is ideal for desktop environments where uninterrupted input feels natural and efficient. {% tabs %} -{% highlight C# tabtitle="XAML" hl_lines="9" %} +{% highlight xaml tabtitle="XAML" hl_lines="9" %} - @@ -56,9 +57,9 @@ var smarttexteditor = new SfSmartTextEditor Popup mode displays the suggested text in a small overlay near the caret, making it easy to review and accept without interrupting your typing. This mode is especially useful on touch based devices where tapping the suggestion feels natural and convenient. {% tabs %} -{% highlight C# tabtitle="XAML" hl_lines="9" %} +{% highlight xaml tabtitle="XAML" hl_lines="9" %} - @@ -84,4 +85,38 @@ var smarttexteditor = new SfSmartTextEditor {% endhighlight %} {% endtabs %} -![Popup Suggestion in WPF Smart Text Editor.](images/suggestion-display-mode/wpf-smarttexteditor-popup-mode.gif) \ No newline at end of file +![Popup Suggestion in WPF Smart Text Editor.](images/suggestion-display-mode/wpf-smarttexteditor-popup-mode.gif) + +## Switching the suggestion display mode at runtime + +The `SuggestionDisplayMode` property is a regular dependency property, so you can change it at runtime either from code or through data binding. The two examples below show the simplest approach for each. + +### Change the mode from code-behind + +1. Give the editor an `x:Name` in XAML (for example, `x:Name="smartTextEditor"`). +2. In the code-behind file, set the `SuggestionDisplayMode` property to a different `SuggestionDisplayMode` enum value when your application needs to (for example, in a button click handler, in response to a settings change, or when the user toggles a preference). + +{% tabs %} +{% highlight c# tabtitle="C#" hl_lines="6" %} + +using Syncfusion.UI.Xaml.SmartComponents; + +// Toggle between Inline and Popup suggestion display at runtime. +smartTextEditor.SuggestionDisplayMode = + smartTextEditor.SuggestionDisplayMode == SuggestionDisplayMode.Inline + ? SuggestionDisplayMode.Popup + : SuggestionDisplayMode.Inline; + +{% endhighlight %} +{% endtabs %} + +### Change the mode through data binding + +1. Expose a property of type `SuggestionDisplayMode` on your view model (or other binding source) and raise `PropertyChanged` when its value changes so the editor updates automatically. +2. Bind the `SuggestionDisplayMode` property of `SfSmartTextEditor` to that property. + +N> The exact `SuggestionDisplayMode` enum values available for binding depend on the installed Syncfusion version. Refer to the API reference for the version-specific enum. + +## Version compatibility + +The `SuggestionDisplayMode` property and the `Inline` / `Popup` values are available in the `Syncfusion.SfSmartComponents.WPF` package. The default value, supported enum members, and behavior between versions may differ. Refer to the release notes for your installed version. \ No newline at end of file From 176362716b129ddf5a5568592fa65e0415a7d190 Mon Sep 17 00:00:00 2001 From: MonikaTheerthagiri Date: Wed, 8 Jul 2026 19:04:47 +0530 Subject: [PATCH 2/2] Committing the correction of CI status --- wpf/SmartTextEditor/commands.md | 2 +- wpf/SmartTextEditor/getting-started.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/wpf/SmartTextEditor/commands.md b/wpf/SmartTextEditor/commands.md index 9c787ca0b1..324a79ddba 100644 --- a/wpf/SmartTextEditor/commands.md +++ b/wpf/SmartTextEditor/commands.md @@ -34,7 +34,7 @@ The command infrastructure described in this page is available in the `Syncfusio Before you wire up `TextChangedCommand` in your view, complete the following steps: 1. Add a reference to the `Syncfusion.SfSmartComponents.WPF` assembly in your WPF project (the same NuGet package installed in the Getting Started walkthrough). -2. In your XAML page, declare the `Syncfusion.UI.Xaml.SmartComponents` namespace (for example, as `xmlns:smarttexteditor`) so the `SfSmartTextEditor` element and its `TextChangedCommand` property resolve. +2. In your XAML page, declare the `Syncfusion.UI.Xaml.SmartComponents` namespace.so the `SfSmartTextEditor` element and its `TextChangedCommand` property resolve. 3. If you bind `TextChangedCommand` to a property on a view model or code-behind class, make sure the binding source (the `DataContext`) exposes a property of type `System.Windows.Input.ICommand` named `TextChangedCommand` (or matching the binding path you use in XAML). Add the `using System.Windows.Input;` directive in the C# file that defines the command property. 4. If you are using a third-party `ICommand` implementation such as `RelayCommand` or `DelegateCommand`, install the corresponding NuGet package (for example, `CommunityToolkit.Mvvm`) and add the required `using` directive for that namespace. The `Command` type referenced in the sample below is a placeholder — substitute it with the `ICommand` implementation available in your project. diff --git a/wpf/SmartTextEditor/getting-started.md b/wpf/SmartTextEditor/getting-started.md index 467cb4c4de..07ef85b7b1 100644 --- a/wpf/SmartTextEditor/getting-started.md +++ b/wpf/SmartTextEditor/getting-started.md @@ -205,7 +205,7 @@ The following are common issues when setting up the WPF Smart Text Editor. Refer - **Offline-only behavior is used unexpectedly**: - This indicates that the AI service is not configured, or the registration in `App.xaml.cs` failed silently. Confirm the packages in **Step 5** are installed and the call to `ConfigureSyncfusionAIServices()` runs. - **The control does not appear or throws a `XamlParseException`**: - - Verify that the `Syncfusion.SfSmartComponents.WPF` assembly is referenced and the `xmlns:smarttexteditor` (or equivalent) namespace matches the installed assembly's casing. + - Verify that the `Syncfusion.SfSmartComponents.WPF` assembly is referenced and the namespace matches the installed assembly's casing. - **Suggestions are generated but never accepted**: - Confirm the focus is on the editor when pressing **Tab** or **Right Arrow**.