Weekly Nuget Release
diff --git a/wpf/Color-Picker-Palette/Getting-Started.md b/wpf/Color-Picker-Palette/Getting-Started.md
index 2ea167923..479a51181 100644
--- a/wpf/Color-Picker-Palette/Getting-Started.md
+++ b/wpf/Color-Picker-Palette/Getting-Started.md
@@ -34,7 +34,7 @@ Refer to the [control dependencies](https://help.syncfusion.com/wpf/control-depe
You can find more details about installing the NuGet package in a WPF application in the following link:
-[How to install nuget packages](https://help.syncfusion.com/wpf/visual-studio-integration/nuget-packages)
+[How to install nuget packages](https://help.syncfusion.com/wpf/installation/install-nuget-packages)
## Adding WPF ColorPickerPalette via designer
@@ -290,7 +290,7 @@ colorPickerPalette.Height = 40;

-N> We can show or hide all color panels. Refer the [Dealing with ColorPickerPalette](https://help.syncfusion.com/wpf/color-picker-palette/dealing-with-colorpickerpalette) page that explains the panel visibility support.
+N> We can show or hide all color panels. Refer the [Dealing with ColorPickerPalette](https://help.syncfusion.com/wpf/color-picker-palette/working-with-colorpickerpalette) page that explains the panel visibility support.
## Reset selected color
diff --git a/wpf/Common/claude-service.md b/wpf/Common/claude-service.md
new file mode 100644
index 000000000..80d3afd47
--- /dev/null
+++ b/wpf/Common/claude-service.md
@@ -0,0 +1,176 @@
+---
+layout: post
+title: Claude AI for AI-Powered Components | Syncfusion®
+description: Learn how to implement a custom AI service using the Claude API with Syncfusion® AI-Powered Components.
+platform: wpf
+control: SmartComponents
+documentation: ug
+---
+
+# Claude AI Integration with WPF Smart Components
+
+The Syncfusion WPF AI-powered components can enhance applications with intelligent capabilities. You can integrate Anthropic `Claude AI` using the `IChatInferenceService` interface, which acts as a bridge between the editor and your custom AI service.
+
+## Setting Up Claude
+
+1. **Create an Anthropic Account**
+ Visit [Anthropic Console](https://console.anthropic.com), sign up, and complete the verification process.
+2. **Obtain an API Key**
+ Navigate to [API Keys](https://console.anthropic.com/settings/keys) and click "Create Key."
+3. **Review Model Specifications**
+ Refer to [Claude Models Documentation](https://docs.anthropic.com/claude/docs/models-overview) for details on available models.
+
+## Define Request and Response Models
+
+Create a file named `ClaudeModels.cs` in the Services folder and add:
+
+{% tabs %}
+{% highlight c# tabtitle="ClaudeModels.cs" %}
+
+public class ClaudeChatRequest
+{
+ public string? Model { get; set; }
+ public int Max_tokens { get; set; }
+ public List? Messages { get; set; }
+ public List? Stop_sequences { get; set; }
+}
+
+public class ClaudeMessage
+{
+ public string? Role { get; set; }
+ public string? Content { get; set; }
+}
+
+public class ClaudeChatResponse
+{
+ public List? Content { get; set; }
+}
+
+public class ClaudeContentBlock
+{
+ public string? Text { get; set; }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Create a Claude AI Service
+
+This service handles communication with the Claude API, including authentication and response parsing.
+
+1. Create a `Services` folder in your project.
+2. Add a new file named `ClaudeAIService.cs` in the `Services` folder.
+3. Implement the service as shown below:
+
+{% tabs %}
+{% highlight c# tabtitle="ClaudeAIService.cs" %}
+
+using System.Net;
+using System.Text;
+using System.Text.Json;
+using Microsoft.Extensions.AI;
+
+public class ClaudeAIService
+{
+ private readonly string _apiKey = ""; // API key
+ private readonly string _modelName = "claude-3-5-sonnet-20241022"; // Example model
+ private readonly string _endpoint = "https://api.anthropic.com/v1/messages";
+ private static readonly HttpClient HttpClient = new(new SocketsHttpHandler
+ {
+ PooledConnectionLifetime = TimeSpan.FromMinutes(30),
+ EnableMultipleHttp2Connections = true
+ })
+ {
+ DefaultRequestVersion = HttpVersion.Version20 // Fallback to HTTP/2 for compatibility
+ };
+ private static readonly JsonSerializerOptions JsonOptions = new()
+ {
+ PropertyNamingPolicy = JsonNamingPolicy.CamelCase
+ };
+
+ public ClaudeAIService()
+ {
+ if (!HttpClient.DefaultRequestHeaders.Contains("x-api-key"))
+ {
+ HttpClient.DefaultRequestHeaders.Clear();
+ HttpClient.DefaultRequestHeaders.Add("x-api-key", _apiKey);
+ HttpClient.DefaultRequestHeaders.Add("anthropic-version", "2023-06-01"); // Check latest version in Claude API docs
+ }
+ }
+
+ public async Task CompleteAsync(List chatMessages)
+ {
+ var requestBody = new ClaudeChatRequest
+ {
+ Model = _modelName,
+ Max_tokens = 1000, // Maximum tokens in response
+ Messages = chatMessages.Select(m => new ClaudeMessage
+ {
+ Role = m.Role == ChatRole.User ? "user" : "assistant",
+ Content = m.Text
+ }).ToList(),
+ Stop_sequences = new List { "END_INSERTION", "NEED_INFO", "END_RESPONSE" } // Configurable stop sequences
+ };
+
+ var content = new StringContent(JsonSerializer.Serialize(requestBody, JsonOptions), Encoding.UTF8, "application/json");
+
+ try
+ {
+ var response = await HttpClient.PostAsync(_endpoint, content);
+ response.EnsureSuccessStatusCode();
+ var responseString = await response.Content.ReadAsStringAsync();
+ var responseObject = JsonSerializer.Deserialize(responseString, JsonOptions);
+ return responseObject?.Content?.FirstOrDefault()?.Text ?? "No response from Claude model.";
+ }
+ catch (Exception ex) when (ex is HttpRequestException || ex is JsonException)
+ {
+ throw new InvalidOperationException("Failed to communicate with Claude API.", ex);
+ }
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Implement IChatInferenceService
+
+Create `ClaudeInferenceService.cs`:
+
+{% tabs %}
+{% highlight c# tabtitle="ClaudeInferenceService.cs" %}
+
+using Syncfusion.UI.Xaml.SmartComponents;
+
+public class ClaudeInferenceService : IChatInferenceService
+{
+ private readonly ClaudeAIService _claudeService;
+
+ public ClaudeInferenceService(ClaudeAIService claudeService)
+ {
+ _claudeService = claudeService;
+ }
+
+ public async Task GenerateResponseAsync(List chatMessages)
+ {
+ return await _claudeService.CompleteAsync(chatMessages);
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Register Services in WPF
+
+Update `App.xaml.cs`:
+
+{% tabs %}
+{% highlight c# tabtitle="App.xaml.cs" hl_lines="9 10" %}
+
+using Syncfusion.UI.Xaml.SmartComponents;
+
+SyncfusionAIExtension.Services.AddSingleton();
+SyncfusionAIExtension.Services.AddSingleton();
+
+
+{% endhighlight %}
+{% endtabs %}
\ No newline at end of file
diff --git a/wpf/Common/configure-ai-service.md b/wpf/Common/configure-ai-service.md
new file mode 100644
index 000000000..5cd229d49
--- /dev/null
+++ b/wpf/Common/configure-ai-service.md
@@ -0,0 +1,167 @@
+---
+layout: post
+title: Configure Chat Client with AI-Powered Components | Syncfusion®
+description: Learn how to implement a configure chat client with Syncfusion® AI-Powered Components.
+platform: wpf
+control: SmartComponents
+documentation: ug
+---
+
+# Configure Chat Client With Smart Components
+
+The Smart Components uses a chat inference service resolved from dependency injection to generate contextual suggestions. Register a compatible chat client and an inference adapter in `App.xaml.cs`.
+
+### Azure OpenAI
+
+For **Azure OpenAI**, first [deploy an Azure OpenAI Service resource and model](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource), then values for `azureOpenAIKey`, `azureOpenAIEndpoint` and `azureOpenAIModel` will all be provided to you.
+
+* Install the following NuGet packages to your project:
+
+{% tabs %}
+
+{% highlight c# tabtitle="Package Manager" %}
+
+Install-Package Microsoft.Extensions.AI
+Install-Package Microsoft.Extensions.AI.OpenAI
+Install-Package Azure.AI.OpenAI
+
+{% endhighlight %}
+
+{% endtabs %}
+
+* To configure the AI service, add the following settings to the **App.xaml.cs** file in your application.
+
+{% tabs %}
+{% highlight C# tabtitle="App.xaml.cs" %}
+
+using Azure.AI.OpenAI;
+using Microsoft.Extensions.AI;
+using Microsoft.Extensions.DependencyInjection;
+using Syncfusion.UI.Xaml.SmartComponents;
+using System;
+using System.ClientModel;
+using System.Windows;
+
+....
+
+{
+ ///
+ /// Interaction logic for App.xaml
+ ///
+ public partial class App : Application
+ {
+ protected override void OnStartup(StartupEventArgs e)
+ {
+ base.OnStartup(e);
+
+ string azureApiKey = "AZURE_OPENAI_KEY";
+ Uri azureEndPoint = "AZURE_OPENAI_ENDPOINT";
+ string deploymentName = "AZURE_OPENAI_MODEL";
+ AzureOpenAIClient azureClient = new AzureOpenAIClient(azureEndPoint, new ApiKeyCredential(azureApiKey));
+ IChatClient azureChatClient = azureClient.GetChatClient(deploymentName).AsIChatClient();
+ SyncfusionAIExtension.Services.AddSingleton(azureChatClient);
+ SyncfusionAIExtension.ConfigureSyncfusionAIServices();
+
+ }
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+### OpenAI
+
+For **OpenAI**, create an API key and place it at `openAIApiKey`. The value for `openAIModel` is the model you wish.
+
+* Install the following NuGet packages to your project:
+
+{% tabs %}
+
+{% highlight c# tabtitle="Package Manager" %}
+
+Install-Package Microsoft.Extensions.AI
+Install-Package Microsoft.Extensions.AI.OpenAI
+
+{% endhighlight %}
+
+{% endtabs %}
+
+* To configure the AI service, add the following settings to the **App.xaml.cs** file in your app.
+
+{% tabs %}
+{% highlight C# tabtitle="App.xaml.cs" hl_lines="3 23" %}
+
+using Microsoft.Extensions.AI;
+using OpenAI;
+using Syncfusion.UI.Xaml.SmartComponents;
+
+
+....
+
+string openAIApikey = "API-KEY";
+string openAIModel = "gpt-4o-mini"; // example
+
+var openAIClient = new OpenAIClient(
+ new ApiKeyCredential(openAIApikey),
+ new OpenAIClientOptions
+ {
+ // Default OpenAI endpoint; include /v1 if your SDK expects it
+ Endpoint = new Uri("https://api.openai.com/v1/")
+ });
+
+IChatClient openAIChatClient = openAIClient.GetChatClient(openAIModel).AsIChatClient();
+SyncfusionAIExtension.Services.AddChatClient(openAIClient);
+
+SyncfusionAIExtension.ConfigureSyncfusionAIServices();
+
+{% endhighlight %}
+{% endtabs %}
+
+### Ollama
+
+To use Ollama for running self hosted models:
+
+1. **Download and install Ollama**
+ Visit [Ollama's official website](https://ollama.com) and install the application appropriate for your operating system.
+
+2. **Install the desired model from the Ollama library**
+ You can browse and install models from the [Ollama Library](https://ollama.com/library) (e.g., `llama2:13b`, `mistral:7b`, etc.).
+
+3. **Configure your application**
+
+ - Provide the `Endpoint` URL where the model is hosted (e.g., `http://localhost:11434`).
+ - Set `ModelName` to the specific model you installed (e.g., `llama2:13b`).
+
+* Install the following NuGet packages to your project:
+
+{% tabs %}
+
+{% highlight c# tabtitle="Package Manager" %}
+
+Install-Package Microsoft.Extensions.AI
+Install-Package OllamaSharp
+
+{% endhighlight %}
+
+{% endtabs %}
+
+* Add the following settings to the **App.xaml.cs** file in your application.
+
+{% tabs %}
+{% highlight C# tabtitle="App.xaml.cs" hl_lines="3 13" %}
+
+using Microsoft.Extensions.AI;
+using OllamaSharp;
+using Syncfusion.UI.Xaml.SmartComponents;
+
+
+....
+
+string ModelName = "MODEL_NAME";
+IChatClient chatClient = new OllamaApiClient("http://localhost:11434", ModelName);
+SyncfusionAIExtension.Services.AddChatClient(chatClient);
+
+SyncfusionAIExtension.ConfigureSyncfusionAIServices();
+
+{% endhighlight %}
+{% endtabs %}
\ No newline at end of file
diff --git a/wpf/Common/custom-ai-service.md b/wpf/Common/custom-ai-service.md
new file mode 100644
index 000000000..6966620ae
--- /dev/null
+++ b/wpf/Common/custom-ai-service.md
@@ -0,0 +1,92 @@
+---
+layout: post
+title: Custom AI for AI-Powered Components | Syncfusion®
+description: Learn how to use IChatInferenceService to integrate custom AI services with Syncfusion® WPF AI-Powered Components.
+platform: wpf
+control: SmartComponents
+documentation: ug
+---
+
+# Custom AI Service Integration with WPF Smart Components
+
+The Syncfusion WPF Smart Components can leverage AI to provide intelligent assistance during user interaction. By default, it works with providers like `OpenAI` or `Azure OpenAI`, but you can also integrate your own AI service using the `IChatInferenceService` interface. This interface ensures smooth communication between the smart components and your custom AI logic.
+
+## IChatInferenceService Interface
+
+The `IChatInferenceService` interface defines how the Smart Components interacts with an AI service. It sends user input and context messages and expects an AI-generated response.
+
+{% tabs %}
+{% highlight xaml tabtitle="C#" %}
+
+using Syncfusion.UI.Xaml.SmartComponents;
+
+Public interface IChatInferenceService
+{
+ Task GenerateResponseAsync(List chatMessages);
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+- **Purpose**: Provides a standard way to connect any AI service.
+- **Parameter**: The `chatMessages` contains the user’s text and previous context.
+- **Benefit**: Lets you switch AI providers without changing the editor code.
+
+## Custom AI Service Implementation
+
+Here’s a simple example of a mock AI service that implements `IChatInferenceService`. You can replace the logic with your own AI integration:
+
+{% tabs %}
+{% highlight xaml tabtitle="C#" %}
+
+using Microsoft.Extensions.AI;
+using Syncfusion.UI.Xaml.SmartComponents;
+
+public class MockAIService : IChatInferenceService
+{
+ public Task GenerateResponseAsync(List chatMessages);
+ {
+
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Registering the Custom AI Service
+
+Register the custom AI service in **App.xaml.cs**:
+
+{% tabs %}
+{% highlight xaml tabtitle="C#" %}
+
+using Syncfusion.UI.Xaml.SmartComponents;
+
+SyncfusionAIExtension.Services.AddSingleton();
+
+{% endhighlight %}
+{% endtabs %}
+
+## How to test Custom AI Integration
+
+1. Implement and register your custom AI service.
+2. Add SfSmartTextEditor to your page.
+3. Run the app and start typing.
+4. Check if suggestions appear based on your AI logic.
+5. Use SuggestionDisplayMode to choose Inline or Popup display.
+
+## Implemented AI Services
+
+Here are examples of AI services integrated using the `IChatInferenceService` interface. These are only examples; you can use `IChatInferenceService` to create your own service.
+
+| Service | Documentation |
+|---------|---------------|
+| Claude | [Claude Integration]() |
+| DeepSeek | [DeepSeek Integration]() |
+| Groq | [Groq Integration]() |
+| Gemini | [Gemini Integration]() |
+
+## Troubleshooting
+
+If the custom AI service does not work as expected, try the following:
+- **No Suggestions Displayed**: Ensure the `IChatInferenceService` implementation is registered in **App.xaml.cs** and returns valid responses. Check for errors in the `GenerateResponseAsync` method.
\ No newline at end of file
diff --git a/wpf/Common/deepseek-service.md b/wpf/Common/deepseek-service.md
new file mode 100644
index 000000000..d707f7a19
--- /dev/null
+++ b/wpf/Common/deepseek-service.md
@@ -0,0 +1,172 @@
+---
+layout: post
+title: DeepSeek AI for AI-Powered Components | Syncfusion®
+description: Learn how to integrate the DeepSeek AI services with Syncfusion® AI-Powered Components.
+platform: wpf
+control: SmartComponents
+documentation: ug
+---
+
+# DeepSeek AI Integration with WPF Smart Components
+
+The Syncfusion WPF AI-powered components can enhance applications with intelligent capabilities. You can integrate DeepSeek using the `IChatInferenceService` interface, which standardizes communication between the editor and your custom AI service.
+
+## Setting Up DeepSeek
+
+1. **Obtain a DeepSeek API Key**
+ Create an account at [DeepSeek Platform](https://platform.deepseek.com), sign in, and navigate to [API Keys](https://platform.deepseek.com/api_keys) to generate an API key.
+2. **Review Model Specifications**
+ Refer to [DeepSeek Models Documentation](https://api-docs.deepseek.com/quick_start/pricing) for details on available models (e.g., `deepseek-chat`).
+
+## Define Request and Response Models
+
+Create a file named `DeepSeekModels.cs` in the Services folder and add:
+
+{% tabs %}
+{% highlight c# tabtitle="DeepSeekModels.cs" %}
+
+public class DeepSeekMessage
+{
+ public string? Role { get; set; }
+ public string? Content { get; set; }
+}
+
+public class DeepSeekChatRequest
+{
+ public string? Model { get; set; }
+ public float Temperature { get; set; }
+ public List? Messages { get; set; }
+}
+
+public class DeepSeekChatResponse
+{
+ public List? Choices { get; set; }
+}
+
+public class DeepSeekChoice
+{
+ public DeepSeekMessage? Message { get; set; }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Create a DeepSeek AI Service
+
+This service manages requests to the `DeepSeek` Chat Completions endpoint and returns the generated text.
+
+1. Create a `Services` folder in your project.
+2. Add a new file named `DeepSeekAIService.cs` in the `Services` folder.
+3. Implement the service as shown below:
+
+{% tabs %}
+{% highlight c# tabtitle="DeepSeekAIService.cs" %}
+
+using Microsoft.Extensions.AI;
+using Microsoft.Extensions.Configuration;
+using System.Net;
+using System.Text;
+using System.Text.Json;
+
+public class DeepSeekAIService
+{
+ private readonly string _apiKey = ""; // API key
+ private readonly string _modelName = "deepseek-chat"; // Example model
+ private readonly string _endpoint = "https://api.deepseek.com/v1/chat/completions";
+ private static readonly HttpClient HttpClient = new(new SocketsHttpHandler
+ {
+ PooledConnectionLifetime = TimeSpan.FromMinutes(30),
+ EnableMultipleHttp2Connections = true
+ })
+ {
+ DefaultRequestVersion = HttpVersion.Version20 // Fallback to HTTP/2 for compatibility
+ };
+ private static readonly JsonSerializerOptions JsonOptions = new()
+ {
+ PropertyNamingPolicy = JsonNamingPolicy.CamelCase
+ };
+
+ public DeepSeekAIService()
+ {
+ if (!HttpClient.DefaultRequestHeaders.Contains("Authorization"))
+ {
+ HttpClient.DefaultRequestHeaders.Clear();
+ HttpClient.DefaultRequestHeaders.Add("Authorization", $"Bearer {_apiKey}");
+ }
+ }
+
+ public async Task CompleteAsync(List chatMessages)
+ {
+ var requestBody = new DeepSeekChatRequest
+ {
+ Model = _modelName,
+ Temperature = 0.7f, // Controls response randomness (0.0 to 1.0)
+ Messages = chatMessages.Select(m => new DeepSeekMessage
+ {
+ Role = m.Role == ChatRole.User ? "user" : "system", // Align with DeepSeek API roles
+ Content = m.Text
+ }).ToList()
+ };
+
+ var content = new StringContent(JsonSerializer.Serialize(requestBody, JsonOptions), Encoding.UTF8, "application/json");
+
+ try
+ {
+ var response = await HttpClient.PostAsync(_endpoint, content);
+ response.EnsureSuccessStatusCode();
+ var responseString = await response.Content.ReadAsStringAsync();
+ var responseObject = JsonSerializer.Deserialize(responseString, JsonOptions);
+ return responseObject?.Choices?.FirstOrDefault()?.Message?.Content ?? "No response from DeepSeek.";
+ }
+ catch (Exception ex) when (ex is HttpRequestException || ex is JsonException)
+ {
+ throw new InvalidOperationException("Failed to communicate with DeepSeek API.", ex);
+ }
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Implement IChatInferenceService
+
+Create `DeepSeekInferenceService.cs`:
+
+{% tabs %}
+{% highlight c# tabtitle="DeepSeekInferenceService.cs" %}
+
+using Syncfusion.UI.Xaml.SmartComponents;
+
+public class DeepSeekInferenceService : IChatInferenceService
+{
+ private readonly DeepSeekAIService _deepSeekService;
+
+ public DeepSeekInferenceService(DeepSeekAIService deepSeekService)
+ {
+ _deepSeekService = deepSeekService;
+ }
+
+ public async Task GenerateResponseAsync(List chatMessages)
+ {
+ return await _deepSeekService.CompleteAsync(chatMessages);
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Register Services in WPF
+
+Update `App.xaml.cs`:
+
+{% tabs %}
+{% highlight c# tabtitle="App.xaml.cs" hl_lines="9 10" %}
+
+using Syncfusion.UI.Xaml.SmartComponents;
+
+SyncfusionAIExtension.Services.AddSingleton();
+SyncfusionAIExtension.Services.AddSingleton();
+
+
+{% endhighlight %}
+{% endtabs %}
\ No newline at end of file
diff --git a/wpf/Common/gemini-service.md b/wpf/Common/gemini-service.md
new file mode 100644
index 000000000..2a1e3ea84
--- /dev/null
+++ b/wpf/Common/gemini-service.md
@@ -0,0 +1,196 @@
+---
+layout: post
+title: Gemini AI for AI-Powered Components | Syncfusion®
+description: Learn how to implement a custom AI service using Google's Gemini API with Syncfusion® AI-Powered Components.
+platform: wpf
+control: SmartComponents
+documentation: ug
+---
+
+# Gemini AI Integration with WPF Smart Components
+
+The Syncfusion WPF AI-powered components can enhance applications with intelligent capabilities. By default, it works with providers like OpenAI or Azure OpenAI, but you can integrate `Google Gemini AI` using the `IChatInferenceService` interface. This guide explains how to implement and register Gemini AI for the Smart Text Editor in a WPF app.
+
+## Setting Up Gemini
+
+1. **Get a Gemini API Key**
+ Visit [Google AI Studio](https://ai.google.dev/gemini-api/docs/api-key), sign in, and generate an API key.
+2. **Review Model Details**
+ Refer to [Gemini Models Documentation](https://ai.google.dev/gemini-api/docs/models) for details on available models.
+
+## Define Request and Response Models
+
+Create a file named `GeminiModels.cs` in the Services folder and add:
+
+{% tabs %}
+{% highlight c# tabtitle="GeminiModels.cs" %}
+
+
+public class Part { public string Text { get; set; } }
+public class Content { public Part[] Parts { get; init; } = Array.Empty(); }
+public class Candidate { public Content Content { get; init; } = new(); }
+public class GeminiResponseObject { public Candidate[] Candidates { get; init; } = Array.Empty(); }
+
+public class ResponseContent
+{
+ public List Parts { get; init; }
+ public string Role { get; init; }
+ public ResponseContent(string text, string role)
+ {
+ Parts = new List { new Part { Text = text } };
+ Role = role;
+ }
+}
+
+public class GenerationConfig
+{
+ public int MaxOutputTokens { get; init; } = 2048;
+ public List StopSequences { get; init; } = new();
+}
+
+public class SafetySetting
+{
+ public string Category { get; init; } = string.Empty;
+ public string Threshold { get; init; } = string.Empty;
+}
+
+public class GeminiChatParameters
+{
+ public List Contents { get; init; } = new();
+ public GenerationConfig GenerationConfig { get; init; } = new();
+ public List SafetySettings { get; init; } = new();
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Create a Gemini AI Service
+
+Create a service class to handle `Gemini API` calls, including authentication, request/response handling, and safety settings.
+
+1. Create a `Services` folder in your WPF project.
+2. Add a new file named `GeminiService.cs` in the Services folder.
+3. Implement the service as shown below:
+
+{% tabs %}
+{% highlight c# tabtitle="GeminiService.cs" %}
+
+using System.Net;
+using System.Text;
+using System.Text.Json;
+using Microsoft.Extensions.AI;
+
+public class GeminiService
+{
+ private readonly string _apiKey = "";
+ private readonly string _modelName = "gemini-2.0-flash"; // Example model
+ private readonly string _endpoint = "https://generativelanguage.googleapis.com/v1beta/models/";
+ private static readonly HttpClient HttpClient = new(new SocketsHttpHandler
+ {
+ PooledConnectionLifetime = TimeSpan.FromMinutes(30),
+ EnableMultipleHttp2Connections = true
+ })
+ {
+ DefaultRequestVersion = HttpVersion.Version20
+ };
+
+ private static readonly JsonSerializerOptions JsonOptions = new()
+ {
+ PropertyNamingPolicy = JsonNamingPolicy.CamelCase
+ };
+
+ public GeminiService()
+ {
+ HttpClient.DefaultRequestHeaders.Clear();
+ HttpClient.DefaultRequestHeaders.Add("x-goog-api-key", _apiKey);
+ }
+
+ public async Task CompleteAsync(List chatMessages)
+ {
+ var requestUri = $"{_endpoint}{_modelName}:generateContent";
+ var parameters = BuildGeminiChatParameters(chatMessages);
+ var payload = new StringContent(JsonSerializer.Serialize(parameters, JsonOptions), Encoding.UTF8, "application/json");
+
+ try
+ {
+ using var response = await HttpClient.PostAsync(requestUri, payload);
+ response.EnsureSuccessStatusCode();
+ var json = await response.Content.ReadAsStringAsync();
+ var result = JsonSerializer.Deserialize(json, JsonOptions);
+ return result?.Candidates?.FirstOrDefault()?.Content?.Parts?.FirstOrDefault()?.Text ?? "No response from model.";
+ }
+ catch (Exception ex) when (ex is HttpRequestException or JsonException)
+ {
+ throw new InvalidOperationException("Gemini API error.", ex);
+ }
+ }
+
+ private GeminiChatParameters BuildGeminiChatParameters(List messages)
+ {
+ var contents = messages.Select(m => new ResponseContent(m.Text, m.Role == ChatRole.User ? "user" : "model")).ToList();
+ return new GeminiChatParameters
+ {
+ Contents = contents,
+ GenerationConfig = new GenerationConfig
+ {
+ MaxOutputTokens = 2000,
+ StopSequences = new List { "END_INSERTION", "NEED_INFO", "END_RESPONSE" }
+ },
+ SafetySettings = new List
+ {
+ new() { Category = "HARM_CATEGORY_HARASSMENT", Threshold = "BLOCK_ONLY_HIGH" },
+ new() { Category = "HARM_CATEGORY_HATE_SPEECH", Threshold = "BLOCK_ONLY_HIGH" },
+ new() { Category = "HARM_CATEGORY_SEXUALLY_EXPLICIT", Threshold = "BLOCK_ONLY_HIGH" },
+ new() { Category = "HARM_CATEGORY_DANGEROUS_CONTENT", Threshold = "BLOCK_ONLY_HIGH" },
+ new() { Category = "HARM_CATEGORY_DANGEROUS_CONTENT", Threshold = "BLOCK_ONLY_HIGH" },
+ }
+ };
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Implement IChatInferenceService
+
+Create `GeminiInferenceService.cs`:
+
+{% tabs %}
+{% highlight c# tabtitle="GeminiInferenceService.cs" %}
+
+
+using Syncfusion.UI.Xaml.SmartComponents;
+
+public class GeminiInferenceService : IChatInferenceService
+{
+ private readonly GeminiService _geminiService;
+
+ public GeminiInferenceService(GeminiService geminiService)
+ {
+ _geminiService = geminiService;
+ }
+
+ public async Task GenerateResponseAsync(List chatMessages)
+ {
+ return await _geminiService.CompleteAsync(chatMessages);
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Register Services in WPF
+
+Update `App.xaml.cs`:
+
+{% tabs %}
+{% highlight c# tabtitle="App.xaml.cs" hl_lines="9 10" %}
+
+using Syncfusion.UI.Xaml.SmartComponents;
+
+SyncfusionAIExtension.Services.AddSingleton();
+SyncfusionAIExtension.Services.AddSingleton();
+
+
+{% endhighlight %}
+{% endtabs %}
\ No newline at end of file
diff --git a/wpf/Common/groq-service.md b/wpf/Common/groq-service.md
new file mode 100644
index 000000000..46ea641dd
--- /dev/null
+++ b/wpf/Common/groq-service.md
@@ -0,0 +1,176 @@
+---
+layout: post
+title: Groq AI Integration with AI-Powered Components | Syncfusion®
+description: Learn how to implement a custom AI service using the Groq API with Syncfusion® AI-Powered Components.
+platform: wpf
+control: SmartComponents
+documentation: ug
+---
+
+# Groq AI Integration with WPF Smart Components
+
+The Syncfusion WPF AI-powered components can enhance applications with intelligent capabilities. You can integrate `Groq` by implementing the `IChatInferenceService` interface and leveraging Groq’s OpenAI-compatible Chat Completions API to deliver fast, low-latency results.
+
+## Setting Up Groq
+
+1. **Create a Groq account & API key**
+ Visit [Groq Cloud Console](https://console.groq.com), and create an API key. Use the Authorization: Bearer {GROQ_API_KEY} header when calling the API
+2. **Endpoint (OpenAI‑compatible)**
+ Chat Completions: POST https://api.groq.com/openai/v1/chat/completions.
+3. **Choose a Model**
+ Refer to [Groq Models Documentation](https://console.groq.com/docs/models) for details on available models (e.g., `llama3-8b-8192`).
+
+## Define Request and Response Models
+
+Create a file named `GroqModels.cs` in the Services folder and add:
+
+{% tabs %}
+{% highlight c# tabtitle="GroqModels.cs" %}
+
+public class Choice
+{
+ public Message? Message { get; set; }
+}
+
+public class Message
+{
+ public string? Role { get; set; }
+ public string? Content { get; set; }
+}
+
+public class GroqChatParameters
+{
+ public string? Model { get; set; }
+ public List? Messages { get; set; }
+ public List? Stop { get; set; }
+}
+
+public class GroqResponseObject
+{
+ public string? Model { get; set; }
+ public List? Choices { get; set; }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Create a Groq AI Service
+
+This service calls Groq’s Chat Completions endpoint and returns the first assistant message. It keeps your code simple and OpenAI‑compatible.
+
+1. Create a `Services` folder in your project.
+2. Add a new file named `GroqService.cs` in the `Services` folder.
+3. Implement the service as shown below.
+
+{% tabs %}
+{% highlight c# tabtitle="GroqService.cs" %}
+
+using Microsoft.Extensions.AI;
+using Syncfusion.UI.Xaml.SmartComponents;
+using System.Net;
+using System.Text;
+using System.Text.Json;
+using System.Text.Json.Serialization;
+
+public class GroqService
+{
+ private readonly string _apiKey;
+ private readonly string _modelName = "llama3-8b-8192"; // Example model
+ private readonly string _endpoint = "https://api.groq.com/openai/v1/chat/completions";
+ private static readonly HttpClient HttpClient = new(new SocketsHttpHandler
+ {
+ PooledConnectionLifetime = TimeSpan.FromMinutes(30),
+ EnableMultipleHttp2Connections = true
+ })
+ {
+ DefaultRequestVersion = HttpVersion.Version20 // Fallback to HTTP/2 for broader compatibility
+ };
+ private static readonly JsonSerializerOptions JsonOptions = new()
+ {
+ PropertyNamingPolicy = JsonNamingPolicy.CamelCase
+ };
+
+ public GroqService()
+ {
+ if (!HttpClient.DefaultRequestHeaders.Contains("Authorization"))
+ {
+ HttpClient.DefaultRequestHeaders.Clear();
+ HttpClient.DefaultRequestHeaders.Add("Authorization", $"Bearer {_apiKey}");
+ }
+ }
+
+ public async Task CompleteAsync(List chatMessages)
+ {
+ var requestPayload = new GroqChatParameters
+ {
+ Model = _modelName,
+ Messages = chatMessages.Select(m => new Message
+ {
+ Role = m.Role == ChatRole.User ? "user" : "assistant",
+ Content = m.Text
+ }).ToList(),
+ Stop = new List { "END_INSERTION", "NEED_INFO", "END_RESPONSE" } // Configurable stop sequences
+ };
+
+ var content = new StringContent(JsonSerializer.Serialize(requestPayload, JsonOptions), Encoding.UTF8, "application/json");
+
+ try
+ {
+ var response = await HttpClient.PostAsync(_endpoint, content);
+ response.EnsureSuccessStatusCode();
+ var responseString = await response.Content.ReadAsStringAsync();
+ var responseObject = JsonSerializer.Deserialize(responseString, JsonOptions);
+ return responseObject?.Choices?.FirstOrDefault()?.Message?.Content ?? "No response from model.";
+ }
+ catch (Exception ex) when (ex is HttpRequestException || ex is JsonException)
+ {
+ throw new InvalidOperationException("Failed to communicate with Groq API.", ex);
+ }
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Implement IChatInferenceService
+
+Create `GroqInferenceService.cs`:
+
+{% tabs %}
+{% highlight c# tabtitle="GroqInferenceService.cs" %}
+
+using Syncfusion.UI.Xaml.SmartComponents;
+
+public class GroqInferenceService : IChatInferenceService
+{
+ private readonly GroqService _groqService;
+
+ public GroqInferenceService(GroqService groqService)
+ {
+ _groqService = groqService;
+ }
+
+ public async Task GenerateResponseAsync(List chatMessages)
+ {
+ return await _groqService.CompleteAsync(chatMessages);
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Register Services in WPF
+
+Update `App.xaml.cs`:
+
+{% tabs %}
+{% highlight c# tabtitle="App.xaml.cs" hl_lines="9 10" %}
+
+using Syncfusion.UI.Xaml.SmartComponents;
+
+SyncfusionAIExtension.Services.AddSingleton();
+SyncfusionAIExtension.Services.AddSingleton();
+
+
+{% endhighlight %}
+{% endtabs %}
\ No newline at end of file
diff --git a/wpf/Control-Dependencies.md b/wpf/Control-Dependencies.md
index b7ef331d2..13adf7b5c 100644
--- a/wpf/Control-Dependencies.md
+++ b/wpf/Control-Dependencies.md
@@ -9,7 +9,7 @@ documentation: ug
# Control Dependencies in Syncfusion®'s WPF Controls
-This section contains a list of assembly or NuGet references required to use any control in the application. You can refer to the [installation and deployment section](https://help.syncfusion.com/wpf/installation-and-upgrade/system-requirements) to know about assembly installation location and [NuGet packages](https://help.syncfusion.com/wpf/visual-studio-integration/nuget-packages) section to know how to add NuGet reference.
+This section contains a list of assembly or NuGet references required to use any control in the application. You can refer to the [installation and deployment section](https://help.syncfusion.com/wpf/installation-and-upgrade/system-requirements) to know about assembly installation location and [NuGet packages](https://help.syncfusion.com/wpf/installation/install-nuget-packages) section to know how to add NuGet reference.
You can refer to the [syncfusion controls section](https://help.syncfusion.com/wpf/add-syncfusion-controls) to learn how to add syncfusion® control.
@@ -1418,6 +1418,25 @@ Syncfusion.SfMaps.WPF
+## SfMarkdownViewer
+
+
diff --git a/wpf/Currency-TextBox/Overview.md b/wpf/Currency-TextBox/Overview.md
index ef2a7d842..4d828d6fc 100644
--- a/wpf/Currency-TextBox/Overview.md
+++ b/wpf/Currency-TextBox/Overview.md
@@ -2,31 +2,49 @@
layout: post
title: About WPF Currency TextBox control | Syncfusion®
description: Learn here all about introduction of Syncfusion® WPF Currency TextBox control, its elements and more.
-platform: WPF
+platform: wpf
control: CurrencyTextBox
documentation: ug
---
# WPF Currency TextBox Overview
-
-The [CurrencyTextBox](https://www.syncfusion.com/wpf-controls/currency-textbox) control restricts text box input to only decimal values and displays it in the currency format with support for data binding, Watermark, Null Value, and culture support. It provides many customization options to enhance its appearance and to suit your applications.
+The `CurrencyTextBox` is a specialized input control designed to accept, format, and display numeric values as currency in WPF applications. It enforces numeric input, formats numbers according to currency conventions, and exposes a concise API for common scenarios such as data binding, range validation, culture-aware formatting, and UI-driven value adjustment. The control is intended for forms, financial entry screens, reporting dialogs, dashboards, and any UI that requires reliable currency input and presentation.
## Control structure
+The `CurrencyTextBox` combines a text-editing area with a number-formatting layer and optional adorner for visual feedback. Typical visual elements include a watermark (placeholder text) when the control is empty, the formatted currency text, and an optional range adorner that can act like a progress indicator based on `MinValue`/`MaxValue`.
+


-## Features
+## Typical usage scenarios
+
+- Data-entry forms where users input monetary values (invoices, purchase orders, budgets).
+- Financial dashboards that present editable currency fields with immediate formatting.
+- Localized applications that must display currency values according to the user's culture and regional settings.
+- UI components that need numeric constraints, e.g., limits, step increments, or visual progress indication for values within a range.
+
+## Key capabilities
+
+- Value enforcement and parsing: accepts only decimal-compatible characters and exposes the current numeric value through the `Value` property.
+- Formatting and culture support: formats the displayed value as currency using either a `NumberFormatInfo` instance or the `Culture` property; supports dedicated formatting properties such as `CurrencySymbol`, `CurrencyDecimalDigits`, and `CurrencyGroupSeparator`. See details in [Culture and Formatting](Culture-and-Number-Formats.md).
+- Range and validation: allows `MinValue` and `MaxValue` limits and configurable validation timing (`OnKeyPress` or `OnLostFocus`). Advanced options control behavior when entered digits exceed the allowed limits. See [Restriction or Validation](Restriction-or-Validation.md) for full guidance.
+- Range adorner: optionally renders a colored fill inside the control to indicate a value proportion within the configured range. This is useful for quick visual feedback and is documented in [Range Adorner](Range-Adorner.md).
+- Incrementing/scrolling: supports keyboard arrow keys and mouse wheel increments with a configurable `ScrollInterval` and circular scrolling options.
+- Data binding and notifications: supports two‑way binding on the `Value` property and exposes value-change notifications so view models can react immediately to user edits.
+- Accessibility and read-only mode: supports `IsReadOnly` and related caret behavior to present values without allowing edits while keeping selection and focusable behavior as needed.
+
+## Integration and quick start
+
+To add a `CurrencyTextBox` to your view and get started quickly, see the step-by-step instructions in [Getting Started](Getting-Started.md). That page shows the required assembly reference, XAML and C# examples, and the preferred `Value`-based approach for setting and binding currency data.
+
+## Behavior and developer notes
+
+- Prefer the `Value` property rather than `Text` when reading or setting the control programmatically; `Value` always represents the parsed numeric value.
+- When both `NumberFormat` and `Culture` are specified, `NumberFormat` takes precedence for display formatting.
+- `CurrencyDecimalDigits`, `MinimumCurrencyDecimalDigits`, and `MaximumCurrencyDecimalDigits` control decimal precision and interact according to explicit precedence rules documented in the formatting guide.
-The core features of the `CurrencyTextBox` are as follows:
+## Theming, styling and extensibility
-* Provides the ability to control the range of input values by using the `MinValue` and `MaxValue` properties.
-* Provides different foreground brushes for positive, negative, and zero values.
-* Provides data binding support.
-* Provides built-in Visual Styles and themes.
-* Provides Watermark support.
-* Provides Number Format support.
-* Provides Blendability support.
-* Provides Null Value support.
-* Provides culture support.
+The `CurrencyTextBox` supports built-in visual themes and can be styled using standard WPF templates and brushes. Visual states for positive, negative and zero values can be customized to make value meaning immediately perceptible. For examples and theming notes see the related Getting Started and Culture/Formatting documentation.
diff --git a/wpf/DataGrid/Column-Types.md b/wpf/DataGrid/Column-Types.md
index e3921ab64..75bc28358 100644
--- a/wpf/DataGrid/Column-Types.md
+++ b/wpf/DataGrid/Column-Types.md
@@ -1313,7 +1313,7 @@ this.dataGrid.Columns.Add(new GridCheckBoxColumn() { HeaderText = "Is Delivered"
* [HorizontalAlignment](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridCheckBoxColumn.html#Syncfusion_UI_Xaml_Grid_GridCheckBoxColumn_HorizontalAlignment) - You can change the horizontal alignment of CheckBox using `HorizontalAlignment` property.
### Canceling the check box state change
-The checkbox state change can be canceled by setting `CellCheckBoxClickEventArgs.Cancel` to true in the `SfDataGrid.CellCheckBoxClick` event. Additionally, the checkbox value can be modified by setting `CellCheckBoxClickEventArgs.NewValue` within the event.
+The checkbox state change can be canceled by setting [CellCheckBoxClickEventArgs.Cancel](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.canceleventargs?view=net-10.0#properties) to true in the [SfDataGrid.CellCheckBoxClick](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_CellCheckBoxClick) event. Additionally, the checkbox value can be modified by setting [CellCheckBoxClickEventArgs.NewValue](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.CellCheckBoxClickEventArgs.html#Syncfusion_UI_Xaml_Grid_CellCheckBoxClickEventArgs_NewValue) within the event.
{% tabs %}
{% highlight c# %}
@@ -2388,7 +2388,7 @@ As above, style of the header check box can be customized using the `HeaderCellS

### Canceling the check box state change
-The checkbox state change in the `GridCheckBoxSelectorColumn` can be canceled by setting `CellCheckBoxClickEventArgs.Cancel` to true in the `SfDataGrid.CellCheckBoxClick` event. Additionally, the checkbox value can be modified by setting `CellCheckBoxClickEventArgs.NewValue` within the same event.
+The checkbox state change in the `GridCheckBoxSelectorColumn` can be canceled by setting [CellCheckBoxClickEventArgs.Cancel](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.canceleventargs?view=net-10.0#properties) to true in the [SfDataGrid.CellCheckBoxClick](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_CellCheckBoxClick) event. Additionally, the checkbox value can be modified by setting [CellCheckBoxClickEventArgs.NewValue](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.CellCheckBoxClickEventArgs.html#Syncfusion_UI_Xaml_Grid_CellCheckBoxClickEventArgs_NewValue) within the same event.
Based on this, the selection state is not changed when `e.Cancel` is set to true, and the selection is applied according to the value specified in `e.NewValue`.
diff --git a/wpf/DataGrid/Selection.md b/wpf/DataGrid/Selection.md
index 0fba101f9..b82141181 100644
--- a/wpf/DataGrid/Selection.md
+++ b/wpf/DataGrid/Selection.md
@@ -126,7 +126,7 @@ N> When the [SelectionMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xam
`SfDataGrid` allows you to select or deselect rows by interacting with the check box in a column. All the rows in a datagrid can be selected by interacting with an intuitive check box in the column header. Refer to [GridCheckBoxSelectorColumn](https://help.syncfusion.com/wpf/datagrid/column-types#gridcheckboxselectorcolumn) documentation for more information.
## Excel Like Selection
-The `SfDataGrid` provides built‑in support for **Excel‑Like Selection**, which can be enabled by setting the `EnableExcelLikeSelection` property to true.
+The `SfDataGrid` provides built‑in support for **Excel‑Like Selection**, which can be enabled by setting the [EnableExcelLikeSelection](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_EnableExcelLikeSelection) property to true.
When Excel‑Like Selection is enabled, the following settings are required for proper functionality:
* [SelectionUnit](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_SelectionUnit) must be set to `Any`.
@@ -152,7 +152,7 @@ Selecting a cell highlights both its corresponding row and column header.

### Display Selection Frame
-If a cell or row is selected, a single border displayed around all selected cells. To display the selection frame, set the `ShowSelectionFrame` property to `true`. Default value is `false`.
+If a cell or row is selected, a single border displayed around all selected cells. To display the selection frame, set the [ShowSelectionFrame](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_ShowSelectionFrame) property to `true`. Default value is `false`.
{% tabs %}
{% highlight xaml %}
@@ -188,7 +188,7 @@ SelectionFrame `BorderThickness` and `BorderBrush` can be customized by modifyin
### Column Selection
When a column header is clicked, all cells in that column are selected, and the row and column headers are highlighted.
-By default, clicking a column header performs a sorting operation. Sorting can be disabled and column selection enabled by setting the `ColumnHeaderClickAction` property to `Select`.
+By default, clicking a column header performs a sorting operation. Sorting can be disabled and column selection enabled by setting the [ColumnHeaderClickAction](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_ColumnHeaderClickAction) property to [Select](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.ColumnHeaderClickAction.html#fields).
{% tabs %}
{% highlight xaml %}
@@ -207,10 +207,10 @@ By default, clicking a column header performs a sorting operation. Sorting can b
#### Column Header Click Action
-The ColumnHeaderClickAction supports the following options:
-* Sort - Sorting is performed when the column header is clicked.
-* Select - Clicking the column header selects all cells in that column.
-* Auto – When AllowSorting is disabled, clicking the column header selects the column. When AllowSorting is enabled, the header click performs a sorting operation.
+The [ColumnHeaderClickAction](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.ColumnHeaderClickAction.html) enum supports the following options:
+* [Sort](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.ColumnHeaderClickAction.html#fields) - Sorting is performed when the column header is clicked.
+* [Select](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.ColumnHeaderClickAction.html#fields) - Clicking the column header selects all cells in that column.
+* [Auto](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.ColumnHeaderClickAction.html#fields) – When AllowSorting is disabled, clicking the column header selects the column. When AllowSorting is enabled, the header click performs a sorting operation.
This allows you to configure whether clicking a column header sorts the data or selects the entire column.
@@ -219,10 +219,10 @@ When Row header is clicked, all cells in that row are selected, and the row and

-N> The `SelectionFrame` is displayed only when `ShowSelectionFrame` is enabled. Otherwise, when clicking on the row and column headers, the cells are selected, but the border is shown only around the current cell.
+N> The `SelectionFrame` is displayed only when [ShowSelectionFrame](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_ShowSelectionFrame) is enabled. Otherwise, when clicking on the row and column headers, the cells are selected, but the border is shown only around the current cell.
### Limitations
-* Excel‑like selection is not supported when using any SelectionUnit or SelectionMode values other than the mentioned settings.
+* Excel‑like selection is not supported when using any SelectionUnit or SelectionMode values other than the [mentioned](https://help.syncfusion.com/wpf/datagrid/selection#excel-like-selection) settings.
* When grouping is enabled, clicking a column header does not select all cells in that column.
* When selecting a Summary Rows, the corresponding row and column headers are not highlighted.
* When performing drag or shift selection after grouping is applied, the selection border is rendered only if the selected cells belong to data rows.
diff --git a/wpf/Gantt/Data-Virtualization-Images/data-virtualizaton-for-gantt-control.gif b/wpf/Gantt/Data-Virtualization-Images/data-virtualizaton-for-gantt-control.gif
index 58072148f..ff7c3adba 100644
Binary files a/wpf/Gantt/Data-Virtualization-Images/data-virtualizaton-for-gantt-control.gif and b/wpf/Gantt/Data-Virtualization-Images/data-virtualizaton-for-gantt-control.gif differ
diff --git a/wpf/Gantt/data-virtualization.md b/wpf/Gantt/data-virtualization.md
index 1aee67596..24ce6480c 100644
--- a/wpf/Gantt/data-virtualization.md
+++ b/wpf/Gantt/data-virtualization.md
@@ -11,7 +11,7 @@ documentation: ug
The WPF Gantt control supports data virtualization to improve performance when working with large datasets. When virtualization is enabled, the control renders only the nodes that are currently visible in the viewport, reducing memory usage and improving scrolling responsiveness.
-## How virtualization Works
+## How virtualization works
Data virtualization in the Gantt control includes the following:
@@ -20,9 +20,9 @@ Data virtualization in the Gantt control includes the following:
This approach ensures optimal performance even when working with thousands of tasks or long‑duration schedules.
-## Enable Timeline Virtualization
+## Enable timeline virtualization
-You can enable timeline virtualization by setting the `EnableTimelineVirtualization` property to `true` in WPF `GanttControl`.
+You can enable timeline virtualization by setting the [`EnableTimelineVirtualization`](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Gantt.GanttControl.html#Syncfusion_Windows_Controls_Gantt_GanttControl_EnableTimelineVirtualization) property to `true` in WPF [`GanttControl`](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Gantt.GanttControl.html).
{% tabs %}
{% highlight xaml hl_lines="3" %}
@@ -44,7 +44,7 @@ You can enable timeline virtualization by setting the `EnableTimelineVirtualizat
-
@@ -68,24 +68,24 @@ You can enable timeline virtualization by setting the `EnableTimelineVirtualizat
{% endhighlight %}
{% highlight c# hl_lines="2" %}
- this.Gantt.ItemsSource = new ViewModel().Tasks;
- this.Gantt.EnableTimelineVirtualization = true;
+this.Gantt.ItemsSource = new ViewModel().Tasks;
+this.Gantt.EnableTimelineVirtualization = true;
- // Task attribute mapping
- TaskAttributeMapping taskAttributeMapping = new TaskAttributeMapping();
- taskAttributeMapping.TaskNameMapping = "Name";
- taskAttributeMapping.StartDateMapping = "StartDate";
- taskAttributeMapping.ChildMapping = "SubItems";
- taskAttributeMapping.FinishDateMapping = "FinishDate";
- taskAttributeMapping.ProgressMapping="Progress";
- taskAttributeMapping.InLineTaskMapping = "InLineItems";
- this.Gantt.TaskAttributeMapping = taskAttributeMapping;
+// Task attribute mapping
+TaskAttributeMapping taskAttributeMapping = new TaskAttributeMapping();
+taskAttributeMapping.TaskNameMapping = "Name";
+taskAttributeMapping.StartDateMapping = "StartDate";
+taskAttributeMapping.ChildMapping = "SubItems";
+taskAttributeMapping.FinishDateMapping = "FinishDate";
+taskAttributeMapping.ProgressMapping="Progress";
+taskAttributeMapping.InLineTaskMapping = "InLineItems";
+this.Gantt.TaskAttributeMapping = taskAttributeMapping;
{% endhighlight %}
{% highlight c# tabtitle="Task.cs" %}
- public class Task : NotificationObject
- {
+public class Task : NotificationObject
+{
private string _name;
private DateTime _startDate;
private DateTime _finishDate;
@@ -251,7 +251,7 @@ You can enable timeline virtualization by setting the `EnableTimelineVirtualizat
var tempCal = 0d;
if (_subItems.Count > 0)
{
- /// Updating the start and end date based on the chagne occur in the date of child task
+ /// Updating the start and end date based on the changes occur in the date of child task
StartDate = _subItems.Select(c => c.StartDate).Min();
FinishDate = _subItems.Select(c => c.FinishDate).Max();
Progress = (_subItems.Aggregate(tempCal, (cur, task) => cur + task.Progress)) / _subItems.Count;
@@ -259,13 +259,13 @@ You can enable timeline virtualization by setting the `EnableTimelineVirtualizat
if (_inLineItems.Count > 0)
{
- /// Updating the start and end date based on the chagne occur in the date of child task
+ /// Updating the start and end date based on the changes occur in the date of child task
StartDate = _inLineItems.Select(c => c.StartDate).Min();
FinishDate = _inLineItems.Select(c => c.FinishDate).Max();
Progress = (_inLineItems.Aggregate(tempCal, (cur, task) => cur + task.Progress)) / _inLineItems.Count;
}
}
- }
+}
{% endhighlight %}
{% highlight c# tabtitle="ViewModel.cs" %}
diff --git a/wpf/Maps/Map-Providers.md b/wpf/Maps/Map-Providers.md
index 2aea5a5b0..7010db944 100644
--- a/wpf/Maps/Map-Providers.md
+++ b/wpf/Maps/Map-Providers.md
@@ -9,16 +9,17 @@ documentation: ug
# Map Providers in WPF Maps (SfMap)
-The `SfMap` control provides support for various map providers, including `OpenStreetMap`, `Google Maps`, `Azure Maps`, and `Bing Maps.` You can also integrate other map providers by adding them as layers.
+The [SfMap](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.SfMap.html) control provides support for various map providers, including [OpenStreetMap](https://www.openstreetmap.org), [Google Maps](https://developers.google.com/maps/documentation), [Azure Maps](https://learn.microsoft.com/en-us/azure/azure-maps/), and [Bing Maps](https://www.microsoft.com/en-in/bing/features/maps/?msockid=3b94155aeb2660df1b7f03a4ea7b61d3&form=MA13FV). You can also integrate other map providers by adding them as layers.
## Open Street Map
-The `OpenStreetMap` (OSM) is a map of the world built by a community of mappers that is free to use under an open license. It allows you to view geographical data in a collaborative way from anywhere on the Earth. It provides small tile images based on our requests and combines those images into a single one to display the map area in our maps control.
+The [OpenStreetMap](https://www.openstreetmap.org) (OSM) is a map of the world built by a community of mappers that is free to use under an open license. It allows you to view geographical data in a collaborative way from anywhere on the Earth. It provides small tile images based on our requests and combines those images into a single one to display the map area in our maps control.
### Enable an OSM
-You can enable this feature by setting the [`LayerType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html#Syncfusion_UI_Xaml_Maps_ImageryLayer_LayerType) property value as `OSM`.
+You can enable this feature by setting the [LayerType](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html#Syncfusion_UI_Xaml_Maps_ImageryLayer_LayerType) property value as [OSM](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.LayerType.html#fields).
+{% tabs %}
{% highlight xaml hl_lines="2 3 4" %}
@@ -28,15 +29,26 @@ You can enable this feature by setting the [`LayerType`](https://help.syncfusio
{% endhighlight %}
+{% highlight c# hl_lines="3 4 5" %}
+
+SfMap map = new SfMap();
+map.ZoomLevel = 3;
+ImageryLayer layer = new ImageryLayer();
+layer.LayerType = LayerType.OSM;
+map.Layers.Add(layer);
+this.Content = map;
+
+{% endhighlight %}
+{% endtabs %}

### Markers
-The `Markers` are used to mark important locations on the map and provide contextual information through icons, labels, or messages.
+The [Markers](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html#Syncfusion_UI_Xaml_Maps_ImageryLayer_Markers) are used to mark important locations on the map and provide contextual information through icons, labels, or messages.
{% tabs %}
-{% highlight xaml %}
+{% highlight xaml hl_lines="3" %}
@@ -50,39 +62,40 @@ The `Markers` are used to mark important locations on the map and provide contex
{% endhighlight %}
{% highlight c# %}
- public class Model
+public class Model
+{
+ public string Name { get; set; }
+ public string Longitude { get; set; }
+ public string Latitude { get; set; }
+}
+
+public class MapViewModel
+{
+ public ObservableCollection Markers { get; set; }
+ public MapViewModel()
{
- public string Name { get; set; }
- public string Longitude { get; set; }
- public string Latitude { get; set; }
- }
-
- public class MapViewModel
- {
- public ObservableCollection Markers { get; set; }
- public MapViewModel()
- {
- this.Markers = new ObservableCollection();
- this.Markers.Add(new Model() { Name = "USA ", Latitude = "38.8833N", Longitude = "77.0167W" });
- this.Markers.Add(new Model() { Name = "Brazil ", Latitude = "15.7833S", Longitude = "47.8667W" });
- this.Markers.Add(new Model() { Name = "India ", Latitude = "21.0000N", Longitude = "78.0000E" });
- this.Markers.Add(new Model() { Name = "China ", Latitude = "35.0000N", Longitude = "103.0000E" });
- this.Markers.Add(new Model() { Name = "Indonesia ", Latitude = "6.1750S", Longitude = "106.8283E" });
- }
+ this.Markers = new ObservableCollection();
+ this.Markers.Add(new Model() { Name = "USA ", Latitude = "38.8833N", Longitude = "77.0167W" });
+ this.Markers.Add(new Model() { Name = "Brazil ", Latitude = "15.7833S", Longitude = "47.8667W" });
+ this.Markers.Add(new Model() { Name = "India ", Latitude = "21.0000N", Longitude = "78.0000E" });
+ this.Markers.Add(new Model() { Name = "China ", Latitude = "35.0000N", Longitude = "103.0000E" });
+ this.Markers.Add(new Model() { Name = "Indonesia ", Latitude = "6.1750S", Longitude = "106.8283E" });
}
+}
{% endhighlight %}
{% endtabs %}
-### Customizing the Marker Template
+### Customizing the marker template
-The default appearance of the Marker can be customized by using the [`MarkerTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html#Syncfusion_UI_Xaml_Maps_ImageryLayer_MarkerTemplate) property.
+The default appearance of the Marker can be customized by using the [MarkerTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html#Syncfusion_UI_Xaml_Maps_ImageryLayer_MarkerTemplate) property.
-{% highlight xaml %}
+{% tabs %}
+{% highlight xaml hl_lines="4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24" %}
-
+
@@ -109,35 +122,36 @@ The default appearance of the Marker can be customized by using the [`MarkerTemp
{% endhighlight %}
+{% endtabs %}

-Refer to this [`link`](https://help.syncfusion.com/wpf/maps/markers) for customizing marker icons, labels, marker alignment, marker selection and events.
+Refer to this [link](https://help.syncfusion.com/wpf/maps/markers) for customizing marker icons, labels, marker alignment, marker selection and events.
### Adding a multiple layers in OSM
-Multiple layers can be added within a single `ImageryLayer`. To achieve this, add the required layers to the `SubShapeFileLayers` property of the `ImageryLayer`.
+Multiple layers can be added within a single [ImageryLayer](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html). To achieve this, add the required layers to the [SubShapeFileLayers](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html#Syncfusion_UI_Xaml_Maps_ImageryLayer_SubShapeFileLayers) property of the [ImageryLayer](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html).
### SubShapeFileLayers
-The `SubShapeFileLayers` allows you to group multiple `SubShapeFileLayer` instances within an `ImageryLayer.` Each SubShapeFileLayer functions as an independent shapefile layer, enabling you to display multiple shape data sources on the same map imagery.
+The [SubShapeFileLayers](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html#Syncfusion_UI_Xaml_Maps_ImageryLayer_SubShapeFileLayers) allows you to group multiple [SubShapeFileLayer](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.SubShapeFileLayer.html) instances within an [ImageryLayer](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html). Each SubShapeFileLayer functions as an independent shapefile layer, enabling you to display multiple shape data sources on the same map imagery.
-The following code example demonstrates how to add multiple layers to an `ImageryLayer.`
+The following code example demonstrates how to add multiple layers to an [ImageryLayer](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html).
{% tabs %}
-{% highlight xaml %}
+{% highlight xaml hl_lines="4 5 6 7 8 9 10" %}
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
@@ -148,28 +162,28 @@ The following code example demonstrates how to add multiple layers to an `Imager
## Bing Map
-The `Bing Maps` is a global mapping service provided by Microsoft. Similar to `OpenStreetMap` (OSM), it delivers map tile images based on user requests and combines them to render the required map area.
+The [Bing Maps](https://www.microsoft.com/en-in/bing/features/maps/?msockid=3b94155aeb2660df1b7f03a4ea7b61d3&form=MA13FV) is a global mapping service provided by Microsoft. Similar to [OpenStreetMap](https://www.openstreetmap.org) (OSM), it delivers map tile images based on user requests and combines them to render the required map area.
### Enable a Bing Map
-You can enable Bing Maps by setting the `LayerType` property to `Bing.`
+You can enable Bing Maps by setting the [LayerType](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html#Syncfusion_UI_Xaml_Maps_ImageryLayer_LayerType) property to [Bing](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.LayerType.html#fields).
### Bing Map Key
-The [`BingMapKey`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html#Syncfusion_UI_Xaml_Maps_ImageryLayer_BingMapKey) is provided as input to this key property. The Bing Map key can be obtained from
+The [BingMapKey](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html#Syncfusion_UI_Xaml_Maps_ImageryLayer_BingMapKey) is provided as input to this key property. The Bing Map key can be obtained from
[https://www.microsoft.com/en-us/maps/create-a-bing-maps-key](https://www.microsoft.com/en-us/maps/bing-maps/create-a-bing-maps-key).
-The `Maps` control supports the following `Bing Maps` view styles:
+The [Maps](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.SfMap.html) control supports the following [Bing Maps](https://www.microsoft.com/en-in/bing/features/maps/?msockid=3b94155aeb2660df1b7f03a4ea7b61d3&form=MA13FV) view styles:
1. Aerial
2. AerialWithLabel
3. Road.
-By default, the Bing Maps view style is set to `Road.`
+By default, the Bing Maps view style is set to [Road](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.BingMapStyle.html#fields).
### Aerial View
-The Aerial view shows satellite images with clearly visible roads and landmarks. This view is useful for visually exploring real‑world locations. You can apply this view by setting [`BingMapStyle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html#Syncfusion_UI_Xaml_Maps_ImageryLayer_BingMapStyle) to `Aerial.`
+The Aerial view shows satellite images with clearly visible roads and landmarks. This view is useful for visually exploring real‑world locations. You can apply this view by setting [BingMapStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html#Syncfusion_UI_Xaml_Maps_ImageryLayer_BingMapStyle) to [Aerial](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.BingMapStyle.html#fields).
{% tabs %}
{% highlight xaml %}
@@ -200,7 +214,7 @@ The following screenshot illustrates the Aerial View.
### Road View
-Road view displays the default map view of roads, buildings, and geography. To apply the Road view, you need to set `BingMapStyle` as `Road`, as shown in the following code.
+Road view displays the default map view of roads, buildings, and geography. To apply the Road view, you need to set [BingMapStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html#Syncfusion_UI_Xaml_Maps_ImageryLayer_BingMapStyle) as [Road](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.BingMapStyle.html#fields), as shown in the following code.
{% tabs %}
{% highlight xaml %}
@@ -231,7 +245,7 @@ The following screenshot illustrates the Road view.
### AerialWithLabelView
-The `AerialWithLabel` view displays the Aerial map areas with labels for continent, country, ocean, etc., names. To apply this type of view style, you need to set `BingMapStyle` as `AerialWithLabel`, as shown in the following code.
+The [AerialWithLabel](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.BingMapStyle.html#fields) view displays the Aerial map areas with labels for continent, country, ocean, etc., names. To apply this type of view style, you need to set [BingMapStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html#Syncfusion_UI_Xaml_Maps_ImageryLayer_BingMapStyle) as [AerialWithLabel](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.BingMapStyle.html#fields), as shown in the following code.
{% tabs %}
{% highlight xaml %}
@@ -260,15 +274,13 @@ The following screenshot illustrates the AerialWithLabel view.

-N> You can refer to our [WPF Map](https://www.syncfusion.com/wpf-controls/map) feature tour page for its groundbreaking feature representations. You can also explore our [WPF Map example](https://github.com/syncfusion/wpf-demos/tree/master/map) to know how to render and configure the map.
-
## Azure Maps
-`Azure Maps` is an online map tile provider from Microsoft. Similar to `OSM` and `Bing Maps,` it serves map tile images on request and composites them to display the map area.
+[Azure Maps](https://learn.microsoft.com/en-us/azure/azure-maps/) is an online map tile provider from Microsoft. Similar to [OSM](https://www.openstreetmap.org) and [Bing Maps](https://www.microsoft.com/en-in/bing/features/maps/?msockid=3b94155aeb2660df1b7f03a4ea7b61d3&form=MA13FV), it serves map tile images on request and composites them to display the map area.
### Adding Azure Maps
-`Azure Maps` can be rendered by setting the `UrlTemplate` property with the tile server URL provided by the online map provider. A subscription key is required for `Azure Maps.`
+[Azure Maps](https://learn.microsoft.com/en-us/azure/azure-maps/) can be rendered by setting the [UrlTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html#Syncfusion_UI_Xaml_Maps_ImageryLayer_UrlTemplate) property with the tile server URL provided by the online map provider. A subscription key is required for [Azure Maps](https://learn.microsoft.com/en-us/azure/azure-maps/).
Follow the steps in this [link](https://docs.microsoft.com/en-us/azure/search/search-security-api-keys) to generate an API key, and then add the key to the URL.
@@ -301,41 +313,41 @@ this.Content = map;
### Adding sublayer in Azure map
-Multiple layers can be added within a single `ImageryLayer`. To achieve this, add the required layers to the `SubShapeFileLayers` property of the `ImageryLayer`.
+Multiple layers can be added within a single [ImageryLayer](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html). To achieve this, add the required layers to the [SubShapeFileLayers](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html#Syncfusion_UI_Xaml_Maps_ImageryLayer_SubShapeFileLayers) property of the [ImageryLayer](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html).
### SubShapeFileLayers
-The `SubShapeFileLayers` allows you to group multiple `SubShapeFileLayer` instances within an `ImageryLayer.` Each SubShapeFileLayer functions as an independent shapefile layer, enabling you to display multiple shape data sources on the same map imagery.
+The [SubShapeFileLayers](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html#Syncfusion_UI_Xaml_Maps_ImageryLayer_SubShapeFileLayers) allows you to group multiple [SubShapeFileLayer](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.SubShapeFileLayer.html) instances within an [ImageryLayer](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html). Each SubShapeFileLayer functions as an independent shapefile layer, enabling you to display multiple shape data sources on the same map imagery.
-The following code example demonstrates how to add multiple layers to an `ImageryLayer.`
+The following code example demonstrates how to add multiple layers to an [ImageryLayer](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html).
{% tabs %}
-{% highlight xaml hl_lines="2 3 4 5 6 7 8 9 10 11" %}
+{% highlight xaml hl_lines="2 3 4 5 6 7 8 9 10 11 12" %}
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
{% endhighlight %}
{% endtabs %}
-{:width="1000" height="488"}
-
-N>
+
- * When `UrlTemplate` is set, the `ImageryLayer` gives first preference to loading map tiles from the specified URL and ignores `LayerType` and `BingMapKey` properties.
+N>
+* When [UrlTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html#Syncfusion_UI_Xaml_Maps_ImageryLayer_UrlTemplate) is set, the [ImageryLayer](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html) gives first preference to loading map tiles from the specified URL and ignores [LayerType](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html#Syncfusion_UI_Xaml_Maps_ImageryLayer_LayerType) and [BingMapKey](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html#Syncfusion_UI_Xaml_Maps_ImageryLayer_BingMapKey) properties.
+ * If [UrlTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html#Syncfusion_UI_Xaml_Maps_ImageryLayer_UrlTemplate) is not set, the layer continues to use the configured [LayerType](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html#Syncfusion_UI_Xaml_Maps_ImageryLayer_LayerType) (such as Bing Maps or OpenStreetMap), ensuring full backward compatibility.
- * If `UrlTemplate` is not set, the layer continues to use the configured `LayerType` (such as Bing Maps or OpenStreetMap), ensuring full backward compatibility.
+ N> You can refer to our [WPF Map](https://www.syncfusion.com/wpf-controls/map) feature tour page for its groundbreaking feature representations. You can also explore our [WPF Map example](https://github.com/syncfusion/wpf-demos/tree/master/map) to know how to render and configure the map.
## See also
diff --git a/wpf/Maps/Map-Providers_images/wpf-azure-map-with-subshapefilelayer.jpg b/wpf/Maps/Map-Providers_images/wpf-azure-map-with-subshapefilelayer.jpg
deleted file mode 100644
index ed1763298..000000000
Binary files a/wpf/Maps/Map-Providers_images/wpf-azure-map-with-subshapefilelayer.jpg and /dev/null differ
diff --git a/wpf/Maps/Map-Providers_images/wpf-azure-map-with-subshapefilelayer.png b/wpf/Maps/Map-Providers_images/wpf-azure-map-with-subshapefilelayer.png
new file mode 100644
index 000000000..77d0ab008
Binary files /dev/null and b/wpf/Maps/Map-Providers_images/wpf-azure-map-with-subshapefilelayer.png differ
diff --git a/wpf/MarkdownViewer/Events.md b/wpf/MarkdownViewer/Events.md
new file mode 100644
index 000000000..b279f2ae9
--- /dev/null
+++ b/wpf/MarkdownViewer/Events.md
@@ -0,0 +1,55 @@
+---
+layout: post
+title: Event in WPF Markdown Viewer (SfMarkdownViewer) | Syncfusion
+description: Learn here all about events support in Syncfusion MarkdownViewer control, its elements and more details.
+platform: wpf
+control: SfMarkdownViewer
+documentation: ug
+---
+
+# Event in WPF Markdown Viewer (SfMarkdownViewer)
+
+## HyperlinkClicked Event
+
+The HyperlinkClicked event is triggered whenever a hyperlink in the Markdown content is clicked. This event provides access to the URL being navigated to and allows developers to cancel the default navigation behavior.
+The URL link and its details are passed through the MarkdownHyperlinkClickedEventArgs. This argument provides the following details:
+
+**URL** : Gets the URL of the clicked hyperlink.
+**Cancel** : Gets or sets whether to cancel the default navigation behavior.
+
+## How to disable hyperlink navigation in Markdown viewer control
+
+You can disable the hyperlink navigation in Markdown viewer control by setting the value of `Cancel` in the `MarkdownHyperlinkClickedEventArgs` parameter as true in the `HyperlinkClicked` event.
+Please refer to the following example for more details.
+
+{% highlight c# %}
+
+// Wires the event handler for `HyperlinkClicked` event.
+markdownViewer.HyperlinkClicked += MarkdownViewer_HyperlinkClicked;
+
+private void MarkdownViewer_HyperlinkClicked(object? sender, MarkdownHyperlinkClickedEventArgs args)
+{
+ // Gets or sets the value to handle the navigation of hyperlink.
+ args.Cancel = true;
+}
+
+{% endhighlight %}
+
+
+## How to retrieve the clicked URI from Markdown viewer
+
+You can acquire the details of the hyperlink, which is clicked in the Markdown viewer control using the arguments of `HyperlinkClicked` event.
+Please refer to the following example for more details.
+
+{% highlight c# %}
+
+// Wires the event handler for `HyperlinkClicked` event.
+markdownViewer.HyperlinkClicked += MarkdownViewer_HyperlinkClicked;
+
+private void MarkdownViewer_HyperlinkClicked(object? sender, MarkdownHyperlinkClickedEventArgs args)
+{
+ //Returns the URL clicked in the Markdown viewer control.
+ string URL = args.Url;
+}
+
+{% endhighlight %}
diff --git a/wpf/MarkdownViewer/Getting-Started.md b/wpf/MarkdownViewer/Getting-Started.md
new file mode 100644
index 000000000..48f8c3e44
--- /dev/null
+++ b/wpf/MarkdownViewer/Getting-Started.md
@@ -0,0 +1,159 @@
+---
+layout: post
+title: Getting started with WPF Markdown Viewer control | Syncfusion
+description: Learn how to get started with Syncfusion® WPF SfMarkdownViewer control and explore its capabilities for rendering Markdown content.
+platform: wpf
+control: SfMarkdownViewer
+documentation: ug
+keywords: wpf markdownviewer, syncfusion markdownviewer wpf, markdown viewer wpf, wpf markdown rendering, sfmarkdownviewer wpf, wpf markdown control, markdown rendering wpf, wpf markdown getting started
+---
+
+# Getting Started with WPF Markdown Viewer (SfMarkdownViewer)
+
+This section provides a step-by-step guide to integrate and use the [SfMarkdownViewer](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Markdown.SfMarkdownViewer.html) control in your WPF applications.
+
+## Assembly deployment
+
+Refer to the [Control Dependencies](https://help.syncfusion.com/wpf/control-dependencies#sfmarkdownviewer) section to get the list of assemblies or NuGet package that needs to be added as a reference to use the control in any application.
+
+Refer to this [documentation](https://help.syncfusion.com/wpf/installation/install-nuget-packages) to find more details about installing nuget packages in a WPF application.
+
+## Step 1: Create a New WPF Project
+
+1. Go to **File > New > Project** and choose the **WPF App** template.
+2. Name the project and choose a location. Then click **Next**.
+3. Select the .NET framework version and click **Create**.
+
+## Step 2: Install the Syncfusion® WPF MarkdownViewer NuGet Package
+
+1. In **Solution Explorer,** right-click the project and choose **Manage NuGet Packages.**
+2. Search for [Syncfusion.SfMarkdownViewer.Wpf](https://help.syncfusion.com/cr/wpf/Syncfusion.SfMarkdownViewer.Wpf.html) and install the latest version.
+3. Ensure the necessary dependencies are installed correctly, and the project is restored.
+
+## Adding WPF SfMarkdownViewer via XAML
+
+To add the `SfMarkdownViewer` manually in XAML, follow these steps:
+
+1. Create a new WPF project in Visual Studio.
+
+2. Add the following required assembly references to the project:
+
+ * Syncfusion.SfMarkdownViewer.WPF
+ * Syncfusion.Markdown
+ * Syncfusion.Shared.WPF
+
+3. Import the control namespace `Syncfusion.UI.Xaml.Markdown` in XAML, and declare the `SfMarkdownViewer` in XAML page.
+
+{% tabs %}
+{% highlight xaml %}
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Adding WPF SfMarkdownViewer via C#
+
+To add the `SfMarkdownViewer` manually in C#, follow these steps:
+
+1. Create a new WPF project in Visual Studio.
+
+2. Add the following required assembly references to the project:
+
+ * Syncfusion.SfMarkdownViewer.WPF
+ * Syncfusion.Markdown
+ * Syncfusion.Shared.WPF
+
+3. Import the control namespace `Syncfusion.UI.Xaml.Markdown` in C#, and add the `SfMarkdownViewer` in C# page.
+
+{% tabs %}
+{% highlight C# %}
+
+using Syncfusion.UI.Xaml.Markdown;
+
+namespace MarkdownViewerGettingStarted
+{
+ public partial class MainWindow : Window
+ {
+ public MainWindow()
+ {
+ InitializeComponent();
+ // Creating an instance of the SfMarkdownViewer control
+ SfMarkdownViewer markdownViewer = new SfMarkdownViewer();
+ this.Content = markdownViewer;
+
+ }
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Add Source to the SfMarkdownViewer
+
+The `Source` property is used to provide Markdown content to the control. The Source accepts raw Markdown text, file paths, or HTTP/HTTPS URLs.
+
+{% tabs %}
+{% highlight xaml %}
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+
+{% highlight C# %}
+
+public partial class MainWindow : Window
+{
+ private const string markdownContent = @"
+# What is the Markdown Viewer?
+The MarkdownViewer control is used to render and preview Markdown files. It converts markdown syntax into a clean, readable format and supports elements such as headings, lists, code blocks, tables, and other common markdown structures.
+
+# Header 1
+Used for the main title or top-level heading in a Markdown document.
+
+## Header 2
+Used to define major sections within your Markdown content.
+
+";
+
+ public MainWindow()
+ {
+ InitializeComponent();
+ SfMarkdownViewer markdownViewer = new SfMarkdownViewer();
+ markdownViewer.Source = markdownContent;
+ this.Content = markdownViewer;
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+
\ No newline at end of file
diff --git a/wpf/MarkdownViewer/Images/wpf-markdown-mermaid-block.gif b/wpf/MarkdownViewer/Images/wpf-markdown-mermaid-block.gif
new file mode 100644
index 000000000..c0c4c1243
Binary files /dev/null and b/wpf/MarkdownViewer/Images/wpf-markdown-mermaid-block.gif differ
diff --git a/wpf/MarkdownViewer/Images/wpf-markdown-viewer-gettingstarted.png b/wpf/MarkdownViewer/Images/wpf-markdown-viewer-gettingstarted.png
new file mode 100644
index 000000000..a80a373ae
Binary files /dev/null and b/wpf/MarkdownViewer/Images/wpf-markdown-viewer-gettingstarted.png differ
diff --git a/wpf/MarkdownViewer/Images/wpf-markdown-viewer-overview.png b/wpf/MarkdownViewer/Images/wpf-markdown-viewer-overview.png
new file mode 100644
index 000000000..9b50ffacd
Binary files /dev/null and b/wpf/MarkdownViewer/Images/wpf-markdown-viewer-overview.png differ
diff --git a/wpf/MarkdownViewer/Loading-Content.md b/wpf/MarkdownViewer/Loading-Content.md
new file mode 100644
index 000000000..6fb4c18f9
--- /dev/null
+++ b/wpf/MarkdownViewer/Loading-Content.md
@@ -0,0 +1,124 @@
+---
+layout: post
+title: Load Markdown Content in WPF Markdown Viewer | Syncfusion
+description: Learn how to load Markdown content from various sources (strings, local files, URLs) in the Syncfusion WPF SfMarkdownViewer control.
+platform: wpf
+control: SfMarkdownViewer
+documentation: ug
+---
+
+# Loading Markdown Content in WPF Markdown Viewer
+
+The SfMarkdownViewer control provides flexible options for loading Markdown content from multiple sources. The `Source` property intelligently detects the input type and handles content loading automatically, supporting raw Markdown strings, local file paths, and HTTP/HTTPS URLs.
+
+## Loading from Raw Markdown String
+
+Assign a Markdown-formatted string to the Source property of the SfMarkdownViewer control to render markdown content directly within your application.
+
+{% tabs %}
+{% highlight xaml %}
+
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+
+{% highlight C# %}
+
+using Syncfusion.UI.Xaml.Markdown;
+
+namespace MarkdownViewerGettingStarted
+{
+ public partial class MainWindow : Window
+ {
+ private const string markdownContent = @"
+# What is the Markdown Viewer?
+The Markdown Viewer control is used to render and preview Markdown files. It converts markdown syntax into a clean, readable format and supports elements such as headings, lists, code blocks, tables, and other common markdown structures.
+
+# Header 1
+Used for the main title or top-level heading in a Markdown document.
+
+## Header 2
+Used to define major sections within your Markdown content.";
+
+ public MainWindow()
+ {
+ InitializeComponent();
+ SfMarkdownViewer markdownViewer = new SfMarkdownViewer();
+ markdownViewer.Source = markdownContent;
+ this.Content = markdownViewer;
+ }
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Loading from Local File
+
+To load Markdown content from a local markdown file, simply assign the file path to the Source property. The control automatically detects valid file paths and reads the file contents.
+
+**C#**
+
+{% highlight C# %}
+
+public partial class MainWindow : Window
+{
+ public MainWindow()
+ {
+ InitializeComponent();
+ SfMarkdownViewer markdownViewer = new SfMarkdownViewer();
+ string filePath = @"D:\MAUI\MarkdownViewer\Files\MarkdownContent.md";
+ string markdownContent = File.ReadAllText(filePath);
+ markdownViewer.Source = markdownContent;
+ this.Content = markdownViewer;
+ }
+}
+
+{% endhighlight %}
+
+## Loading from URL
+
+The `SfMarkdownViewer` can load Markdown content directly from publicly accessible URLs. This is particularly useful for displaying remote documentation, release notes, or any Markdown content hosted online.
+
+{% tabs %}
+{% highlight xaml %}
+
+
+
+
+
+
+{% endhighlight %}
+
+{% highlight C# %}
+
+public partial class MainWindow : Window
+{
+ public MainWindow()
+ {
+ InitializeComponent();
+ SfMarkdownViewer markdownViewer = new SfMarkdownViewer();
+ markdownViewer.Source = "https://raw.githubusercontent.com/SyncfusionExamples/wpf-tabsplitter-example/refs/heads/master/README.md";
+ this.Content = markdownViewer;
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
diff --git a/wpf/MarkdownViewer/Mermaid-Diagrams.md b/wpf/MarkdownViewer/Mermaid-Diagrams.md
new file mode 100644
index 000000000..c1963b7d4
--- /dev/null
+++ b/wpf/MarkdownViewer/Mermaid-Diagrams.md
@@ -0,0 +1,98 @@
+---
+layout: post
+title: Mermaid Support in WPF Markdown Viewer | Syncfusion
+description: Learn here all about Mermaid Diagrams in Syncfusion MarkdownViewer control, its elements and more details.
+platform: wpf
+control: SfMarkdownViewer
+documentation: ug
+---
+
+# Mermaid Support in WPF Markdown Viewer
+
+The [SfMarkdownViewer](https://help.syncfusion.com/cr/wpf/Syncfusion.SfMarkdownViewer.Wpf.html) control provides built-in support for rendering Mermaid diagrams and flowcharts within Markdown content. Mermaid is a JavaScript-based diagramming and charting tool that uses text-based definitions to create and modify diagrams dynamically.
+
+## MermaidBlockTemplate Property
+
+The [MermaidBlockTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Markdown.SfMarkdownViewer.html#Syncfusion_UI_Xaml_Markdown_SfMarkdownViewer_MermaidBlockTemplate) property accepts a `DataTemplate` that defines how Mermaid code blocks should be rendered. When a code block with the language identifier `mermaid` is encountered, the control uses this template instead of the default code block rendering.
+
+{% tabs %}
+{% highlight xaml %}
+
+
+
+
+
+
+
+
+
+
+
+ B[MarkdownViewer Loads]
+ B --> C{Contains Mermaid?}
+ C -->|Yes| D[Render Diagram]
+ C -->|No| E[Render Plain Markdown]
+ D --> F[Display Enhanced Output]
+ E --> F
+ ]]>
+
+
+
+
+
+
+{% endhighlight %}
+
+{% highlight C# %}
+
+namespace MarkdownViewerGettingStarted
+{
+ public partial class MainWindow : Window
+ {
+ public MainWindow()
+ {
+ InitializeComponent();
+ }
+
+ private void mermaidDiagram_Loaded(object sender, RoutedEventArgs e)
+ {
+ if (sender is Syncfusion.UI.Xaml.Diagram.SfDiagram diagram)
+ {
+ diagram.PageSettings = null;
+ diagram.ScrollSettings.ScrollLimit = ScrollLimit.Limited;
+ var mermaidText = diagram.DataContext as string;
+ diagram.LayoutManager = new LayoutManager
+ {
+ Layout = new FlowchartLayout
+ {
+ Orientation = FlowchartOrientation.TopToBottom,
+ HorizontalSpacing = 80,
+ VerticalSpacing = 60,
+ Margin = new Thickness(0, 50, 0, 0),
+ }
+ };
+
+ diagram.LoadDiagramFromMermaid(mermaidText);
+ }
+ }
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+
diff --git a/wpf/MarkdownViewer/Overview.md b/wpf/MarkdownViewer/Overview.md
new file mode 100644
index 000000000..047ea0a72
--- /dev/null
+++ b/wpf/MarkdownViewer/Overview.md
@@ -0,0 +1,22 @@
+---
+layout: post
+title: About .NET WPF Markdown Viewer control | Syncfusion
+description: Learn about the Syncfusion® .NET WPF SfMarkdownViewer control, its rendering capabilities, and key features.
+platform: wpf
+control: SfMarkdownViewer
+documentation: ug
+---
+
+# Overview of WPF Markdown Viewer (SfMarkdownViewer)
+
+The [WPF Markdown Viewer](https://www.syncfusion.com/wpf-controls) is a UI control that converts Markdown input into a fully formatted visual representation without requiring external rendering engines or manual formatting. It provides a flexible way to display rich Markdown content within WPF applications, making it ideal for presenting documentation, release notes, help content, and other Markdown‑based information.
+
+## Key Features
+
+* **Markdown rendering** – Converts Markdown syntax such as headings, lists, links, images, tables, code blocks, block quotes, and more into styled, readable content.
+
+* **Multiple content sources** – Supports loading Markdown from a string, file, or URL.
+
+* **Hyperlink navigation** – Supports clickable links that open external URLs or trigger in-app navigation.
+
+
diff --git a/wpf/MaskedTextBox/Getting-Started.md b/wpf/MaskedTextBox/Getting-Started.md
index fdd8f7e23..f2a6c1635 100644
--- a/wpf/MaskedTextBox/Getting-Started.md
+++ b/wpf/MaskedTextBox/Getting-Started.md
@@ -2,7 +2,7 @@
layout: post
title: Getting Started with WPF MaskedTextBox control | Syncfusion®
description: Learn here about getting started with Syncfusion® WPF MaskedTextBox (SfMaskedEdit) control, its elements and more details.
-platform: WPF
+platform: wpf
control: SfMaskedEdit
documentation: ug
---
@@ -21,7 +21,7 @@ Refer to the [control dependencies](https://help.syncfusion.com/wpf/control-depe
You can find more details about installing the NuGet package in a WPF application in the following link:
-[How to install nuget packages](https://help.syncfusion.com/wpf/visual-studio-integration/nuget-packages)
+[How to install nuget packages](https://help.syncfusion.com/wpf/installation/install-nuget-packages)
## Adding WPF SfMaskedEdit via designer
@@ -134,7 +134,7 @@ sfMaskedEdit.Mask = @"-?\d+\.?\d*";
Here, the `SfMaskedEdit` accept the positive and negative whole or float type numbers.
-N> Please refer the [Restrict the user to enter valid data](https://help.syncfusion.com/wpf/maskedtextbox/working-with-sfmaskededit#restrict-the-user-to-enter-valid-data) page to know more about the various mask pattern with examples.
+N> Please refer the [Restrict the user to enter valid data](https://help.syncfusion.com/wpf/maskedtextbox/input-restriction#restrict-the-user-to-enter-valid-data) page to know more about the various mask pattern with examples.
N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/InputOptions) in GitHub
@@ -252,7 +252,7 @@ N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtext
you can notified when changing the value of `SfMaskedEdit.Value` property by using the [ValueChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfMaskedEdit.html) event.
N> Your valid input character is updated to the `Value` property based on the `ValidationMode` property.
-Refer [Input Validation](https://help.syncfusion.com/wpf/maskedtextbox/working-with-sfmaskededit#input-validation) to know more about the `ValidationMode`.
+Refer [Input Validation](https://help.syncfusion.com/wpf/maskedtextbox/input-restriction#input-validation) to know more about the `ValidationMode`.
{% tabs %}
{% highlight xaml %}
diff --git a/wpf/MaskedTextBox/Input-Restriction.md b/wpf/MaskedTextBox/Input-Restriction.md
index a1984b31e..0501fd8b1 100644
--- a/wpf/MaskedTextBox/Input-Restriction.md
+++ b/wpf/MaskedTextBox/Input-Restriction.md
@@ -2,7 +2,7 @@
layout: post
title: Input Restriction in WPF MaskedTextBox control | Syncfusion®
description: Learn here all about Input Restriction support in Syncfusion® WPF MaskedTextBox (SfMaskedEdit) control and more.
-platform: WPF
+platform: wpf
control: SfMaskedEdit
documentation: ug
---
@@ -644,7 +644,7 @@ N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtext
you can notified when changing the value of `SfMaskedEdit.Value` property by using the [ValueChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfMaskedEdit.html) event.
N> Your valid input character is updated to the `Value` property based on the `ValidationMode` property.
-Refer [Input Validation](https://help.syncfusion.com/wpf/maskedtextbox/working-with-sfmaskededit#input-validation) to know more about the `ValidationMode`.
+Refer [Input Validation](https://help.syncfusion.com/wpf/maskedtextbox/input-restriction#input-validation) to know more about the `ValidationMode`.
{% tabs %}
{% highlight xaml %}
diff --git a/wpf/Release-notes/v33.1.45.md b/wpf/Release-notes/v33.1.45.md
new file mode 100644
index 000000000..12f2fdfc5
--- /dev/null
+++ b/wpf/Release-notes/v33.1.45.md
@@ -0,0 +1,95 @@
+---
+title: Essential Studio® for WPF Release Notes - v33.1.45
+description: Learn here about the controls in the Essential Studio® for WPF Weekly Nuget Release - Release Notes - v33.1.45
+platform: WPF
+documentation: ug
+---
+
+# Essential Studio® for WPF - v33.1.45 Release Notes
+
+{% include release-info.html date="March 24, 2026" version="v33.1.45" passed="29999" failed="0" %}
+
+{% directory path: _includes/release-notes/v33.1.45 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
+
+## Test Results
+
+| Component Name | Test Cases | Passed | Failed | Remarks |
+|----------------|------------|--------|--------|---------|
+| Accordion | 49 | 49 | 0 | All Passed |
+| AI AssistView | 85 | 85 | 0 | All Passed |
+| AutoComplete | 37 | 37 | 0 | All Passed |
+| AvatarView | 229 | 229 | 0 | All Passed |
+| Badge | 8 | 8 | 0 | All Passed |
+| BreadCrumb | 8 | 8 | 0 | All Passed |
+| Bullet Graph | 151 | 151 | 0 | All Passed |
+| Busy Indicator | 10 | 10 | 0 | All Passed |
+| Button | 22 | 22 | 0 | All Passed |
+| Calendar | 62 | 62 | 0 | All Passed |
+| Card View | 27 | 27 | 0 | All Passed |
+| Carousel | 30 | 30 | 0 | All Passed |
+| Charts | 98 | 98 | 0 | All Passed |
+| CheckedListBox | 150 | 150 | 0 | All Passed |
+| Chromeless Window | 152 | 152 | 0 | All Passed |
+| Circular Gauge | 305 | 305 | 0 | All Passed |
+| Color Picker | 132 | 132 | 0 | All Passed |
+| Color Picker Palette | 104 | 104 | 0 | All Passed |
+| ComboBox | 126 | 126 | 0 | All Passed |
+| Currency TextBox | 138 | 138 | 0 | All Passed |
+| DataGrid | 4746 | 4746 | 0 | All Passed |
+| DataPager | 16 | 16 | 0 | All Passed |
+| DatePicker | 118 | 118 | 0 | All Passed |
+| DateTimePicker | 170 | 170 | 0 | All Passed |
+| Docking | 1084 | 1084 | 0 | All Passed |
+| DocumentContainer | 41 | 41 | 0 | All Passed |
+| Domain Updown | 295 | 295 | 0 | All Passed |
+| Double TextBox | 345 | 345 | 0 | All Passed |
+| Dropdown Button | 21 | 21 | 0 | All Passed |
+| Excel-like Grid | 15 | 15 | 0 | All Passed |
+| Gantt | 2549 | 2549 | 0 | All Passed |
+| GridDataControl | 519 | 519 | 0 | All Passed |
+| GridSplitter | 19 | 19 | 0 | All Passed |
+| GridTreeControl | 223 | 223 | 0 | All Passed |
+| Image Editor | 177 | 177 | 0 | All Passed |
+| Integer TextBox | 29 | 29 | 0 | All Passed |
+| Kanban Board | 112 | 112 | 0 | All Passed |
+| Linear Gauge | 27 | 27 | 0 | All Passed |
+| Maps | 1677 | 1677 | 0 | All Passed |
+| MaskedTextBox | 124 | 124 | 0 | All Passed |
+| Menu | 17 | 17 | 0 | All Passed |
+| Multi Column Dropdown | 184 | 184 | 0 | All Passed |
+| Navigation Drawer | 60 | 60 | 0 | All Passed |
+| Navigation Pane | 66 | 66 | 0 | All Passed |
+| Percent TextBox | 121 | 121 | 0 | All Passed |
+| Pivot Grid | 113 | 113 | 0 | All Passed |
+| PropertyGrid | 294 | 294 | 0 | All Passed |
+| Pulsing Tile | 12 | 12 | 0 | All Passed |
+| Radial Menu | 54 | 54 | 0 | All Passed |
+| Radial Slider | 16 | 16 | 0 | All Passed |
+| Range slider | 11 | 11 | 0 | All Passed |
+| Ribbon | 2322 | 2322 | 0 | All Passed |
+| Scheduler | 4946 | 4946 | 0 | All Passed |
+| SfTextBoxExt | 21 | 21 | 0 | All Passed |
+| Skin Manager | 274 | 274 | 0 | All Passed |
+| Smith Chart | 976 | 976 | 0 | All Passed |
+| SpellChecker | 83 | 83 | 0 | All Passed |
+| Split Button | 15 | 15 | 0 | All Passed |
+| Syntax Editor | 197 | 197 | 0 | All Passed |
+| Tab Navigation | 9 | 9 | 0 | All Passed |
+| Tab Splitter | 10 | 10 | 0 | All Passed |
+| TabControl | 130 | 130 | 0 | All Passed |
+| TaskBar | 9 | 9 | 0 | All Passed |
+| Text InputLayout | 333 | 333 | 0 | All Passed |
+| Tile View | 133 | 133 | 0 | All Passed |
+| TimePicker | 125 | 125 | 0 | All Passed |
+| TimeSpan Editor | 21 | 21 | 0 | All Passed |
+| ToolBar | 31 | 31 | 0 | All Passed |
+| Tree Navigator | 49 | 49 | 0 | All Passed |
+| TreeGrid | 2891 | 2891 | 0 | All Passed |
+| TreeMap | 741 | 741 | 0 | All Passed |
+| TreeView | 1211 | 1211 | 0 | All Passed |
+| TreeViewAdv | 284 | 284 | 0 | All Passed |
+| Wizard Control | 10 | 10 | 0 | All Passed |
\ No newline at end of file
diff --git a/wpf/SmartTextEditor/commands.md b/wpf/SmartTextEditor/commands.md
new file mode 100644
index 000000000..48a46c577
--- /dev/null
+++ b/wpf/SmartTextEditor/commands.md
@@ -0,0 +1,45 @@
+---
+layout: post
+title: Commands in AI-Powered Text Editor control | Syncfusion®
+description: Learn here all about commands support in Syncfusion® WPF AI-Powered Text Editor (SfSmartTextEditor) control and more.
+platform: wpf
+control: SfSmartTextEditor
+documentation: ug
+---
+
+# Commands in WPF AI-Powered Text Editor (SfSmartTextEditor)
+
+The AI-Powered Text Editor provides the `TextChangedCommand` command, is triggered whenever the text in the smart text editor changes.
+
+### 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`.
+
+{% tabs %}
+{% highlight xaml tabtitle="MainPage.xaml" hl_lines="2" %}
+
+
+
+
+
+
+
+{% endhighlight %}
+{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="3,6,8" %}
+
+public class SmartTextEditorViewModel
+{
+ public ICommand TextChangedCommand { get; set; }
+ public SmartTextEditorViewModel()
+ {
+ TextChangedCommand = new Command(TextChangedCommand);
+ }
+ private void TextChangedCommand()
+ {
+ // To do your requirement here.
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
\ No newline at end of file
diff --git a/wpf/SmartTextEditor/customization.md b/wpf/SmartTextEditor/customization.md
new file mode 100644
index 000000000..991527591
--- /dev/null
+++ b/wpf/SmartTextEditor/customization.md
@@ -0,0 +1,141 @@
+---
+layout: post
+title: Customization in AI-Powered Text Editor control | Syncfusion®
+description: Learn here all about how to customize behavior and features of Syncfusion® WPF AI-Powered Text Editor (SfSmartTextEditor) control and more.
+platform: wpf
+control: SfSmartTextEditor
+documentation: ug
+---
+
+# Customization in WPF AI-Powered Text Editor (SfSmartTextEditor)
+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.
+
+{% tabs %}
+{% highlight xaml tabtitle="XAML" %}
+
+
+
+{% endhighlight %}
+{% highlight c# tabtitle="C#" %}
+
+var smarttexteditor = new SfSmartTextEditor
+{
+ Text = "Thank you for contacting us."
+};
+
+{% endhighlight %}
+{% endtabs %}
+
+## Text style customization
+
+You can change the text style and font using the `Style` property to make the editor look the way you want.
+
+{% tabs %}
+{% highlight xaml tabtitle="XAML" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
+## Placeholder text and color customization
+
+Add a helpful placeholder to guide users and use `PlaceholderStyle` to make the placeholder look the way you want.
+
+{% tabs %}
+{% highlight xaml tabtitle="XAML" %}
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
+## Suggestion text color
+
+Customize the color of the suggestion text using the `SuggestionInlineStyle` property to match your theme and improves readability.
+
+{% tabs %}
+{% highlight xaml tabtitle="XAML" %}
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
+## 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.
+
+{% tabs %}
+{% highlight xaml tabtitle="XAML" %}
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
+## Maximum input length
+Set a limit on the number of characters the user can enter in the smart text editor using the `MaxLength` property.
+
+{% tabs %}
+{% highlight xaml tabtitle="XAML" %}
+
+
+
+{% endhighlight %}
+{% highlight c# tabtitle="C#" %}
+
+var smarttexteditor = new SfSmartTextEditor
+{
+ MaxLength = 500
+};
+
+{% endhighlight %}
+{% endtabs %}
\ No newline at end of file
diff --git a/wpf/SmartTextEditor/getting-started.md b/wpf/SmartTextEditor/getting-started.md
new file mode 100644
index 000000000..7f26caeff
--- /dev/null
+++ b/wpf/SmartTextEditor/getting-started.md
@@ -0,0 +1,178 @@
+---
+layout: post
+title: Getting started with AI-Powered Text Editor control | Syncfusion®
+description: Learn here about getting started with Syncfusion® WPF AI-Powered Text Editor (SfSmartTextEditor) control, its elements and more.
+platform: wpf
+control: SfSmartTextEditor
+documentation: ug
+---
+
+# Getting started with WPF Smart Text Editor
+
+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.
+
+## 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.
+
+## Step 1: Create a New WPF Project
+
+1. Go to **File > New > Project** and choose the **WPF App** template.
+2. Name the project and choose a location. Then click **Next**.
+3. Select the .NET framework version 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.
+3. Ensure the necessary dependencies are installed correctly, and the project is restored.
+
+## Step 3: Adding control via Designer
+
+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.
+
+### Adding control manually in XAML
+
+In order to add control manually in XAML, do the below steps,
+
+1. Add the below required assembly references to the project,
+ * Syncfusion.SfSmartComponents.WPF
+2. Import Syncfusion® WPF schema **http://schemas.syncfusion.com/wpf** or SfSmartTextEditor control namespace **Syncfusion.UI.Xaml.SmartComponents** in XAML page.
+3. Declare SfSmartTextEditor control in XAML page.
+
+{% capture codesnippet1 %}
+{% tabs %}
+{% highlight xaml %}
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+{% endcapture %}
+{{ codesnippet1 | OrderList_Indent_Level_1 }}
+
+### Adding control manually in C\#
+
+In order to add control manually in C#, do the below steps,
+
+1. Add the below required assembly references to the project,
+ * Syncfusion.SfSmartComponents.WPF
+2. Import SfSmartTextEditor namespace **Syncfusion.UI.Xaml.SmartComponents** .
+3. Create SfSmartTextEditor control instance and add it to the Page.
+
+{% capture codesnippet2 %}
+{% tabs %}
+{% highlight c# %}
+using Syncfusion.UI.Xaml.SmartComponents;
+namespace WpfApplication1
+{
+ public partial class MainWindow : Window
+ {
+ public MainWindow()
+ {
+ InitializeComponent();
+ SfSmartTextEditor smartTextEditor = new SfSmartTextEditor();
+ Root_Grid.Children.Add(smartTextEditor);
+ }
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+{% endcapture %}
+{{ codesnippet2 | OrderList_Indent_Level_1 }}
+
+## Step 4: Configure user role and phrases for suggestions
+
+Set the writing context and preferred expressions to guide completions:
+- **UserRole** (required): Describes who is typing and the intent, shaping the tone and relevance of suggestions.
+- **UserPhrases** (optional): A list of reusable statements that reflect your brand or frequent responses. Used for offline suggestions and to bias completions.
+
+{% tabs %}
+{% highlight xaml tabtitle="XAML" hl_lines="7 8" %}
+
+
+
+
+
+ Thanks for reaching out.
+ Please share a minimal reproducible sample.
+ We’ll update you as soon as we have more details.
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+N> If no AI inference service is configured, the editor generates offline suggestions from your UserPhrases.
+
+## Step 5: Register the AI Service
+
+To configure the AI services, you must provide the **`azureApiKey`** in the **`App.xaml.cs`** file.
+
+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:
+ * **Azure.AI.OpenAI**
+ * **Microsoft.Extensions.AI**
+ * **Microsoft.Extensions.AI.OpenAI**
+
+```csharp
+using Azure.AI.OpenAI;
+using Microsoft.Extensions.AI;
+using Microsoft.Extensions.DependencyInjection;
+using Syncfusion.UI.Xaml.SmartComponents;
+using System.ClientModel;
+using System.Windows;
+namespace WpfApplication1
+{
+ ///
+ /// Interaction logic for App.xaml
+ ///
+ public partial class App : Application
+ {
+ protected override void OnStartup(StartupEventArgs e)
+ {
+ base.OnStartup(e);
+
+ string azureApiKey = "";
+ Uri azureEndpoint = new Uri("");
+ string deploymentName = "";
+
+ AzureOpenAIClient azureClient = new AzureOpenAIClient(azureEndpoint, new ApiKeyCredential(azureApiKey));
+ IChatClient azureChatClient = azureClient.GetChatClient(deploymentName).AsIChatClient();
+ SyncfusionAIExtension.Services.AddSingleton(azureChatClient);
+ SyncfusionAIExtension.ConfigureSyncfusionAIServices();
+ }
+ }
+}
+```
+
+## 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.
+
+Here is the result of the previous codes,
+
+
+
+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
diff --git a/wpf/SmartTextEditor/images/customization/wpf-smarttexteditor-customization.gif b/wpf/SmartTextEditor/images/customization/wpf-smarttexteditor-customization.gif
new file mode 100644
index 000000000..fe81767f9
Binary files /dev/null and b/wpf/SmartTextEditor/images/customization/wpf-smarttexteditor-customization.gif differ
diff --git a/wpf/SmartTextEditor/images/customization/wpf-smarttexteditor-inline-textcolor.gif b/wpf/SmartTextEditor/images/customization/wpf-smarttexteditor-inline-textcolor.gif
new file mode 100644
index 000000000..4f8463347
Binary files /dev/null and b/wpf/SmartTextEditor/images/customization/wpf-smarttexteditor-inline-textcolor.gif differ
diff --git a/wpf/SmartTextEditor/images/customization/wpf-smarttexteditor-placeholdercolor.gif b/wpf/SmartTextEditor/images/customization/wpf-smarttexteditor-placeholdercolor.gif
new file mode 100644
index 000000000..fa1764165
Binary files /dev/null and b/wpf/SmartTextEditor/images/customization/wpf-smarttexteditor-placeholdercolor.gif differ
diff --git a/wpf/SmartTextEditor/images/customization/wpf-smarttexteditor-textcolor.gif b/wpf/SmartTextEditor/images/customization/wpf-smarttexteditor-textcolor.gif
new file mode 100644
index 000000000..8c533c4dc
Binary files /dev/null and b/wpf/SmartTextEditor/images/customization/wpf-smarttexteditor-textcolor.gif differ
diff --git a/wpf/SmartTextEditor/images/getting-started/wpf-smarttexteditor-getting-started.gif b/wpf/SmartTextEditor/images/getting-started/wpf-smarttexteditor-getting-started.gif
new file mode 100644
index 000000000..ccca4a2ad
Binary files /dev/null and b/wpf/SmartTextEditor/images/getting-started/wpf-smarttexteditor-getting-started.gif differ
diff --git a/wpf/SmartTextEditor/images/overview/wpf-smarttexteditor-overview.gif b/wpf/SmartTextEditor/images/overview/wpf-smarttexteditor-overview.gif
new file mode 100644
index 000000000..3df62689c
Binary files /dev/null and b/wpf/SmartTextEditor/images/overview/wpf-smarttexteditor-overview.gif differ
diff --git a/wpf/SmartTextEditor/images/suggestion-display-mode/wpf-smarttexteditor-inline-mode.gif b/wpf/SmartTextEditor/images/suggestion-display-mode/wpf-smarttexteditor-inline-mode.gif
new file mode 100644
index 000000000..da14afadf
Binary files /dev/null and b/wpf/SmartTextEditor/images/suggestion-display-mode/wpf-smarttexteditor-inline-mode.gif differ
diff --git a/wpf/SmartTextEditor/images/suggestion-display-mode/wpf-smarttexteditor-popup-mode.gif b/wpf/SmartTextEditor/images/suggestion-display-mode/wpf-smarttexteditor-popup-mode.gif
new file mode 100644
index 000000000..8e0376780
Binary files /dev/null and b/wpf/SmartTextEditor/images/suggestion-display-mode/wpf-smarttexteditor-popup-mode.gif differ
diff --git a/wpf/SmartTextEditor/overview.md b/wpf/SmartTextEditor/overview.md
new file mode 100644
index 000000000..9c71857a1
--- /dev/null
+++ b/wpf/SmartTextEditor/overview.md
@@ -0,0 +1,32 @@
+---
+layout: post
+title: About WPF AI-Powered Text Editor control | Syncfusion®
+description: Explore the core features and intelligent capabilities of the Syncfusion® WPF AI-powered Text Editor (SfSmartTextEditor) control.
+platform: wpf
+control: SfSmartTextEditor
+documentation: ug
+---
+
+# Overview of WPF Smart Text Editor
+
+Syncfusion [WPF AI-Powered Text Editor](https://www.syncfusion.com/wpf-controls/smart-text-editor) (SfSmartTextEditor) is a multiline input control that uses predictive suggestions to speed up typing. It can integrate with an AI inference service for context-aware completions, enables inline and popup suggestion display, and reverts to your custom phrase list in the event that AI is not available. The control offers command/event hooks for text changes, full text style, and customizable placeholders.
+
+
+
+## Key features
+
+* **Suggestion display modes**: Customization of suggestions is possible in both inline and popup modes.
+
+* **AI powered suggestions**: IChatInferenceService provides clever, context-aware completions.
+
+* **Custom phrase library**: Preserves backup phrases in case AI recommendations aren't available.
+
+* **Maximum length validation**: To guarantee accurate input control, character restrictions are enforced.
+
+* **Keyboard integration**: Makes it possible to accept ideas quickly by utilizing the Tab or Right Arrow keys.
+
+* **Gesture support**: Allows touch users to tap or click recommendations in the pop-up for quick input.
+
+* **Placeholder text**: Enables placeholders to be configured with customizable color styling.
+
+* **Customization**: Enables users to fully customize the user interface by controlling fonts, colors, sizes, and styles.
\ No newline at end of file
diff --git a/wpf/SmartTextEditor/suggestion-display-mode.md b/wpf/SmartTextEditor/suggestion-display-mode.md
new file mode 100644
index 000000000..308422327
--- /dev/null
+++ b/wpf/SmartTextEditor/suggestion-display-mode.md
@@ -0,0 +1,87 @@
+---
+layout: post
+title: Suggestion Mode in AI-Powered Text Editor | Syncfusion®
+description: Learn about suggestion mode with Syncfusion® WPF AI-Powered Text Editor (SfSmartTextEditor) control.
+platform: wpf
+control: SfSmartTextEditor
+documentation: ug
+---
+
+# Choose how suggestions are displayed
+
+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.
+
+N>
+- Windows and Mac Catalyst default to **Inline**; Android and iOS default to **Popup**.
+- 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" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% highlight c# tabtitle="C#" hl_lines="7" %}
+
+using Syncfusion.UI.Xaml.SmartComponents;
+
+var smarttexteditor = new SfSmartTextEditor
+{
+ Placeholder = "Start typing...",
+ UserRole = "Email author responding to inquiries",
+ SuggestionDisplayMode = SuggestionDisplayMode.Inline
+};
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
+## Popup suggestion mode
+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" %}
+
+
+
+
+
+
+{% endhighlight %}
+{% highlight c# tabtitle="C#" hl_lines="7" %}
+
+using Syncfusion.UI.Xaml.SmartComponents;
+
+var smarttexteditor = new SfSmartTextEditor
+{
+ Placeholder = "Start typing...",
+ UserRole = "Email author responding to inquiries",
+ SuggestionDisplayMode = SuggestionDisplayMode.Popup
+};
+
+{% endhighlight %}
+{% endtabs %}
+
+
\ No newline at end of file
diff --git a/wpf/Tabbed-Window/Overview.md b/wpf/Tabbed-Window/Overview.md
new file mode 100644
index 000000000..29d93a9d3
--- /dev/null
+++ b/wpf/Tabbed-Window/Overview.md
@@ -0,0 +1,35 @@
+---
+layout: post
+title: About WPF Tabbed Window | Syncfusion
+description: Learn here all about introduction of Syncfusion WPF Tabbed Window control, combining SfChromelessWindow with SfTabControl for document management.
+platform: wpf
+control: SfTabControl
+documentation: ug
+---
+
+# WPF Tabbed Window Overview
+
+The Tabbed Window is a powerful combination of SfChromelessWindow and SfTabControl that enables you to create professional document-based applications with advanced tab management. It provides a modern, browser-style interface with features like drag-drop reordering, tear-off floating windows, and cross-window tab merging.
+
+## Key Features
+
+* **Drag-and-Drop Reordering** - Users can intuitively reorder tabs by dragging them within the tab bar or between windows.
+
+* **Tear-Off Windows** - Create floating windows by dragging tabs outside the main window boundaries, enabling flexible multi-window layouts.
+
+* **Tab Merging** - Move tabs between multiple TabbedWindow instances with event validation and cross-window organization.
+
+* **Flexible Tab Management** - Add, remove, and select tabs dynamically with close buttons and new tab creation buttons.
+
+* **Data Binding Support** - Full MVVM support through ItemsSource binding for data-driven tab scenarios.
+
+* **Window Type Modes** - Two distinct modes available:
+ - **Tabbed Mode** - Integrates tabs into the chromeless window chrome for a browser-like interface
+ - **Normal Mode** - Displays tabs as content within the window for traditional UI layouts
+
+* **Content Customization** - Customize tab headers, icons, and content using templates.
+
+* **Modern Styling** - Built-in Syncfusion themes and comprehensive styling support.
+
+* **Event-Driven Architecture** - Comprehensive events for tab operations, merging, selection changes, and adding new tabs.
+
diff --git a/wpf/Tabbed-Window/data-binding.md b/wpf/Tabbed-Window/data-binding.md
new file mode 100644
index 000000000..0aa297a2a
--- /dev/null
+++ b/wpf/Tabbed-Window/data-binding.md
@@ -0,0 +1,99 @@
+---
+layout: post
+title: Data Binding in WPF Tabbed Window | Syncfusion
+description: Bind tabs to a collection using the ItemsSource property to support MVVM‑based tabbed window scenarios.
+platform: wpf
+control: TabbedWindow
+documentation: ug
+---
+
+# WPF Tabbed Window - Data Binding
+
+## Overview
+
+The Tabbed Window provides full MVVM support through data binding. You can bind tabs to a collection using the `ItemsSource` property, enabling data-driven tab creation and dynamic content updates.
+
+## ItemsSource Binding
+
+Bind the `ItemsSource` property to a collection in your ViewModel. Each item automatically generates a corresponding tab:
+
+{% tabs %}
+{% highlight C# %}
+
+// TabModel.cs
+public class TabModel {
+ public string Header { get; set; }
+ public string Content { get; set; }
+}
+
+// MainViewModel.cs
+public class MainViewModel : NotificationObject {
+ public ObservableCollection TabItems { get; } = new ObservableCollection();
+
+ public MainViewModel() {
+ TabItems.Add(new TabModel { Header = "Tab 1", Content = "First tab content" });
+ TabItems.Add(new TabModel { Header = "Tab 2", Content = "Second tab content" });
+ }
+}
+{% endhighlight %}
+
+{% highlight XAML %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+
+{% endtabs %}
+
+
+
+## Customization of TabItems
+
+Use the ItemTemplate to control the visual presentation of each tab, defining separate templates for the tab header and tab content to enable flexible and reusable UI composition.
+
+{% tabs %}
+
+{% highlight XAML %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+
+{% endtabs %}
+
+
diff --git a/wpf/Tabbed-Window/data-binding_images/wpf_customization.png b/wpf/Tabbed-Window/data-binding_images/wpf_customization.png
new file mode 100644
index 000000000..952b1106b
Binary files /dev/null and b/wpf/Tabbed-Window/data-binding_images/wpf_customization.png differ
diff --git a/wpf/Tabbed-Window/data-binding_images/wpf_tabbedwindow.png b/wpf/Tabbed-Window/data-binding_images/wpf_tabbedwindow.png
new file mode 100644
index 000000000..c437ab542
Binary files /dev/null and b/wpf/Tabbed-Window/data-binding_images/wpf_tabbedwindow.png differ
diff --git a/wpf/Tabbed-Window/getting-started.md b/wpf/Tabbed-Window/getting-started.md
new file mode 100644
index 000000000..58ee99912
--- /dev/null
+++ b/wpf/Tabbed-Window/getting-started.md
@@ -0,0 +1,213 @@
+---
+layout: post
+title: Getting Started with WPF Tabbed Window | Syncfusion
+description: Learn how to create and use WPF Tabbed Window by combining SfChromelessWindow with SfTabControl for document management applications.
+platform: wpf
+control: TabbedWindow
+documentation: ug
+---
+
+# Getting Started with WPF Tabbed Window
+
+## Creating Your First Tabbed Window
+
+### Step 1: Add References
+
+Ensure you have the required Syncfusion assemblies referenced in your project:
+- Syncfusion.SfChromelessWindow.WPF
+- Syncfusion.Shared.WPF
+
+### Step 2: Create XAML
+
+Create a window that inherits from `TabbedWindow`:
+
+{% tabs %}
+
+{% highlight XAML %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+
+{% endtabs %}
+
+### Step 3: Create Code-Behind
+
+Create the C# code-behind file:
+
+{% tabs %}
+
+{% highlight C# %}
+
+using Syncfusion.Windows.Controls;
+
+public partial class MainWindow : SfChromelessWindow
+{
+ public MainWindow()
+ {
+ InitializeComponent();
+
+ this.WindowType = WindowType.Tabbed;
+
+ var tabControl = new SfTabControl();
+ var tab = new SfTabItem { Header = "Document 1", Content = new TextBlock { Text = "Doc 1" } };
+ tabControl.Items.Add(tab);
+ this.Content = tabControl;
+ }
+}
+{% endhighlight %}
+
+{% endtabs %}
+
+
+
+## Key Properties
+
+| Property | Description |
+|----------|-------------|
+| `AllowDragDrop` | Enable/disable drag-drop reordering of tabs |
+| `EnableNewTabButton` | Show/hide the new tab (+) button |
+| `SelectedItem` | Get/set the currently active tab |
+| `ItemsSource` | Bind tabs to a collection for data-driven scenarios |
+| `WindowType` | Choose between "Tabbed" or "Normal" mode |
+
+## Basic Examples
+
+### With Close Buttons
+
+{% tabs %}
+
+{% highlight XAML %}
+
+
+
+
+
+
+
+{% endhighlight %}
+
+{% endtabs %}
+
+### With New Tab Handler
+
+{% tabs %}
+
+{% highlight XAML %}
+
+
+
+
+
+{% endhighlight %}
+
+{% endtabs %}
+
+{% tabs %}
+
+{% highlight C# %}
+
+private void OnNewTabRequested(object sender, NewTabRequestedEventArgs e)
+{
+ var newItem = new SfTabItem { Header = "New Tab" };
+ e.Item = newItem;
+}
+
+{% endhighlight %}
+
+{% endtabs %}
+
+## Window Type Modes
+
+The Tabbed Window supports two distinct modes that control how tabs are integrated into the window layout. Choose the mode that best fits your application's requirements.
+
+### Tabbed Mode
+
+In Tabbed mode, tabs are integrated into the window's chrome area (the title bar area), similar to modern web browsers. This creates a unified interface where tabs and the window controls appear together.
+
+#### When to Use Tabbed Mode
+
+- Building browser-style applications
+- Creating document editors (similar to Visual Studio)
+- Tabs are the primary navigation method
+- Want integrated chrome appearance with tabs
+
+#### Example
+
+{% tabs %}
+
+{% highlight XAML %}
+
+
+
+
+
+
+
+
+{% endhighlight %}
+
+{% endtabs %}
+
+
+
+#### Layout Characteristics
+
+- Tabs appear in the window chrome area
+- Window title and tabs share the top area
+- Compact layout
+- Professional browser-like appearance
+
+### Normal Mode
+
+In Normal mode, the SfTabControl is displayed as regular content within the window. The tabs occupy the content area rather than being integrated into the window chrome, providing a traditional tab navigation interface.
+
+#### When to Use Normal Mode
+
+- Tabs are secondary navigation
+- Need additional UI elements above tabs (toolbar, menu)
+- Creating traditional MDI applications
+- Want flexible layout control
+
+{% tabs %}
+
+{% highlight XAML %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+
+{% endtabs %}
+
+
diff --git a/wpf/Tabbed-Window/getting-started_images/tabbedwindow.png b/wpf/Tabbed-Window/getting-started_images/tabbedwindow.png
new file mode 100644
index 000000000..3b0d0e984
Binary files /dev/null and b/wpf/Tabbed-Window/getting-started_images/tabbedwindow.png differ
diff --git a/wpf/Tabbed-Window/getting-started_images/wpf_normalwindow.png b/wpf/Tabbed-Window/getting-started_images/wpf_normalwindow.png
new file mode 100644
index 000000000..3b9496d13
Binary files /dev/null and b/wpf/Tabbed-Window/getting-started_images/wpf_normalwindow.png differ
diff --git a/wpf/Tabbed-Window/getting-started_images/wpf_tabbedwindow.png b/wpf/Tabbed-Window/getting-started_images/wpf_tabbedwindow.png
new file mode 100644
index 000000000..9adb5bce7
Binary files /dev/null and b/wpf/Tabbed-Window/getting-started_images/wpf_tabbedwindow.png differ
diff --git a/wpf/Tabbed-Window/merge-tabs.md b/wpf/Tabbed-Window/merge-tabs.md
new file mode 100644
index 000000000..ac1ff8535
--- /dev/null
+++ b/wpf/Tabbed-Window/merge-tabs.md
@@ -0,0 +1,138 @@
+---
+layout: post
+title: Merge Tabs Between Windows in WPF Tabbed Window | Syncfusion
+description: Move tabs between multiple tabbed windows and manage merge operations with validation to ensure correct behavior.
+platform: wpf
+control: TabbedWindow
+documentation: ug
+---
+
+# WPF Tabbed Window - Merge Tabs Between Windows
+
+## Overview
+
+The Tabbed Window supports merging tabs between multiple windows through drag-and-drop operations. This enables users to reorganize content across multiple windows and create flexible workspace configurations.
+
+## Tear-Off Windows
+
+The Tabbed Window supports tear-off functionality that allows users to detach tabs and create independent floating windows. These floating windows operate as separate TabbedWindow instances and can be reattached to the main window later.
+
+### Creating Floating Windows
+
+To tear off a tab and create a floating window:
+
+1. Drag a tab outside the boundary of the tab control
+2. A new floating window is automatically created
+3. The tab is now contained in the new floating window
+4. The floating window can be a new tabbed window
+
+### Enable Tear-Off
+
+Ensure `AllowDragDrop` is enabled, which is the prerequisite for tear-off functionality:
+
+{% tabs %}
+
+{% highlight XAML %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+
+{% endtabs %}
+
+
+
+### Reattaching Floating Tabs
+
+To reattach a tab from a floating window back to the main window:
+
+1. Drag the tab from the floating window
+2. Drop it inside the main window's tab area
+3. The tab is automatically integrated back into the main window
+4. The floating window is closed if it becomes empty
+
+### Floating Window Behavior
+
+Each floating window created by tearing off a tab:
+- Is a fully functional TabbedWindow instance
+- Inherits SfChromelessWindow properties
+- Can be resized, moved, and minimized
+- Supports the same tab features as the main window (drag-drop, new tabs, close buttons)
+- Can have additional tabs dragged into it
+
+## Control Tab Movement with PreviewTabMerge
+
+The `PreviewTabMerge` event fires before a tab is moved between windows, allowing you to validate or cancel the merge operation:
+
+{% tabs %}
+
+{% highlight XAML %}
+
+
+
+
+
+{% endhighlight %}
+
+{% highlight C# %}
+
+private void OnPreviewTabMerge(object sender, TabMergePreviewEventArgs e)
+{
+ // Get information about the merge operation
+ var draggedItem = e.DraggedItem;
+ var sourceControl = e.SourceControl;
+ var targetControl = e.TargetControl;
+
+ // Validate the merge
+ if (draggedItem is Document doc && doc.IsLocked)
+ {
+ // Cancel the merge
+ e.Allow = false;
+ MessageBox.Show("Cannot move locked documents");
+ return;
+ }
+
+ // Optional: Transform the item before merge
+ if (draggedItem is Document docItem)
+ {
+ e.ResultingItem = new Document
+ {
+ Title = docItem.Title,
+ Content = docItem.Content,
+ CreatedAt = DateTime.Now
+ };
+ }
+
+ // Allow the merge
+ e.Allow = true;
+}
+
+{% endhighlight %}
+
+{% endtabs %}
+
+
+
+## PreviewTabMergeEventArgs Properties
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `DraggedItem` | object | The item being dragged |
+| `SourceControl` | SfTabControl | The control where drag originated |
+| `TargetControl` | SfTabControl | The control receiving the item |
+| `Allow` | bool | Set to false to cancel merge (default: true) |
+| `ResultingItem` | object | The item to be inserted (default: DraggedItem) |
+
+
diff --git a/wpf/Tabbed-Window/merge-tabs_images/tabbedwindow-merging.gif b/wpf/Tabbed-Window/merge-tabs_images/tabbedwindow-merging.gif
new file mode 100644
index 000000000..535266ee4
Binary files /dev/null and b/wpf/Tabbed-Window/merge-tabs_images/tabbedwindow-merging.gif differ
diff --git a/wpf/Tabbed-Window/merge-tabs_images/tear-off-tabbedwindow.gif b/wpf/Tabbed-Window/merge-tabs_images/tear-off-tabbedwindow.gif
new file mode 100644
index 000000000..3ebf134f5
Binary files /dev/null and b/wpf/Tabbed-Window/merge-tabs_images/tear-off-tabbedwindow.gif differ
diff --git a/wpf/Tabbed-Window/tab-management.md b/wpf/Tabbed-Window/tab-management.md
new file mode 100644
index 000000000..52827ca38
--- /dev/null
+++ b/wpf/Tabbed-Window/tab-management.md
@@ -0,0 +1,140 @@
+---
+layout: post
+title: Tab Management in WPF Tabbed Window | Syncfusion
+description: Manage tabs dynamically by supporting close buttons, creating new tabs, and updating the selected tab during interactions.
+platform: wpf
+control: TabbedWindow
+documentation: ug
+---
+
+# WPF Tabbed Window - Tab Management
+
+## Overview
+
+The Tabbed Window provides comprehensive tab management capabilities including dynamic tab creation, tab closing, and tab selection. These features enable flexible and responsive tab-based interfaces.
+
+## Close Button Support
+
+Display close buttons on individual tabs using the `CloseButtonVisibility` property on `SfTabItem`:
+
+{% tabs %}
+
+{% highlight XAML %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+
+{% endtabs %}
+
+{% tabs %}
+
+{% highlight C# %}
+
+var tabItem = new SfTabItem
+{
+ Header = "Document",
+ CloseButtonVisibility = Visibility.Visible,
+ Content = new TextBlock { Text = "Tab Content" }
+};
+tabControl.Items.Add(tabItem);
+
+{% endhighlight %}
+
+{% endtabs %}
+
+When a user clicks the close button, the tab is automatically removed and the control selects the next available tab.
+
+
+
+## New Tab Button
+
+Enable the new tab button to allow users to dynamically add tabs:
+
+{% tabs %}
+
+{% highlight XAML %}
+
+
+
+
+
+
+
+{% endhighlight %}
+
+{% highlight C# %}
+
+private void OnNewTabRequested(object sender, NewTabRequestedEventArgs e)
+{
+ // Create a new tab item when user clicks the + button
+ var newTabContent = new TextBlock
+ {
+ Text = $"New Document {DateTime.Now:g}"
+ };
+
+ var newTabItem = new SfTabItem
+ {
+ Header = $"Document {tabControl.Items.Count + 1}",
+ Content = newTabContent,
+ CloseButtonVisibility = Visibility.Visible
+ };
+
+ e.Item = newTabItem;
+}
+
+{% endhighlight %}
+
+{% endtabs %}
+
+
+
+### Customization of New tab button
+
+`NewTabButtonStyle` targets the internal `Button` used for the new‑tab afford and controls visual properties such as size, background, border and padding without replacing the element tree.
+
+{% tabs %}
+
+{% highlight XAML %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+
+{% endtabs %}
+
+
+
+## Keyboard shortcuts
+
+- `Ctrl + Tab` — move to the next tab.
+- `Ctrl + Shift + Tab` — move to the previous tab.
+- `Ctrl + T` — create a new `SfTabItem` (programmatic shortcut).
+- Mouse middle‑click on a `SfTabItem` header — close that tab.
+
diff --git a/wpf/Tabbed-Window/tab-management_images/tabbedwindow_closebutton.gif b/wpf/Tabbed-Window/tab-management_images/tabbedwindow_closebutton.gif
new file mode 100644
index 000000000..00f1e3a0c
Binary files /dev/null and b/wpf/Tabbed-Window/tab-management_images/tabbedwindow_closebutton.gif differ
diff --git a/wpf/Tabbed-Window/tab-management_images/tabbedwindow_newbutton.gif b/wpf/Tabbed-Window/tab-management_images/tabbedwindow_newbutton.gif
new file mode 100644
index 000000000..86bd7baae
Binary files /dev/null and b/wpf/Tabbed-Window/tab-management_images/tabbedwindow_newbutton.gif differ
diff --git a/wpf/Tabbed-Window/tab-management_images/wpf_newbuttonstyle.png b/wpf/Tabbed-Window/tab-management_images/wpf_newbuttonstyle.png
new file mode 100644
index 000000000..ed5c7810e
Binary files /dev/null and b/wpf/Tabbed-Window/tab-management_images/wpf_newbuttonstyle.png differ
diff --git a/wpf/TimeSpan-Editor/Overview.md b/wpf/TimeSpan-Editor/Overview.md
index 7837ae80a..fcb0ace9a 100644
--- a/wpf/TimeSpan-Editor/Overview.md
+++ b/wpf/TimeSpan-Editor/Overview.md
@@ -2,21 +2,45 @@
layout: post
title: About WPF TimeSpan Editor control | Syncfusion®
description: Learn here all about introduction of Syncfusion® WPF TimeSpan Editor (TimeSpanEdit) control, its elements and more.
-platform: WPF
+platform: wpf
control: TimeSpanEdit
documentation: ug
---
# WPF TimeSpan Editor (TimeSpanEdit) Overview
-[TimeSpanEdit](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.TimeSpanEdit.html) is a control which set or display the time as `Days: Hour: Min: Sec` format. The fields can be incremented or decremented using the up/down keys.
+
+[TimeSpanEdit](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.TimeSpanEdit.html) is a compact, keyboard-friendly editor for representing and editing a time interval in a Days:Hours:Minutes:Seconds (and optional milliseconds) format. Each segment (days, hours, minutes, seconds, milliseconds) is editable independently and can be adjusted by keyboard arrows, mouse wheel, spinner buttons, or programmatically through the `Value` property.

-## Key features
+## Main Capabilities
+
+`TimeSpanEdit` is intended for scenarios that need precise interval input, scheduling values, or duration display. Key built-in capabilities include:
+
+- Custom display formatting via the [Format](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.TimeSpanEdit.html#Syncfusion_Windows_Shared_TimeSpanEdit_Format) property to show or hide fields (for example: days-only, hours/minutes, or include milliseconds).
+- Controlled increment behavior using [StepInterval](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.TimeSpanEdit.html#Syncfusion_Windows_Shared_TimeSpanEdit_StepInterval) so each field steps at a predictable interval when using arrows, spinner buttons, or mouse wheel.
+- Range enforcement with [MinValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.TimeSpanEdit.html#Syncfusion_Windows_Shared_TimeSpanEdit_MinValue) and [MaxValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.TimeSpanEdit.html#Syncfusion_Windows_Shared_TimeSpanEdit_MaxValue) to prevent invalid durations.
+- Optional null support and watermark text via [AllowNull](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.TimeSpanEdit.html#Syncfusion_Windows_Shared_TimeSpanEdit_AllowNull) and [NullString](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.TimeSpanEdit.html#Syncfusion_Windows_Shared_TimeSpanEdit_NullString) for empty states.
+- User interaction modes: show/hide spinner buttons, enable/disable mouse-wheel increments, and extended click-and-drag scrolling through [ShowArrowButtons](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.TimeSpanEdit.html#Syncfusion_Windows_Shared_TimeSpanEdit_ShowArrowButtons), [IncrementOnScrolling](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.TimeSpanEdit.html#Syncfusion_Windows_Shared_TimeSpanEdit_IncrementOnScrolling) and [EnableExtendedScrolling](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.TimeSpanEdit.html#Syncfusion_Windows_Shared_TimeSpanEdit_EnableExtendedScrolling).
-* **Custom Format String** - Supports to display the custom string for denote the numerals.
+## Typical uses
-* **Keyboard Navigation** - Supports to move from one field to another using Keyboard.
+`TimeSpanEdit` is suitable for: inputting task durations, timeouts, scheduling offsets, reporting elapsed time, and any UI that requires clear, editable time intervals. It is also useful inside forms where compact, validated duration input is needed.
+
+## Events and integration
+
+Monitor value changes with the [ValueChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.TimeSpanEdit.html) event to react when users adjust durations. The control works with localization and themes, and integrates into MVVM applications by binding the `Value` property.
+
+## Key features
-* **SpinArrowButtons** - Supports to increase or decrease the values in any field.
+- **Custom Format String** - display tailored field labels (days/hours/minutes/seconds/milliseconds).
+- **Keyboard Navigation** - move between fields and increment/decrement using arrow keys.
+- **Spin/Arrow Buttons & Mouse Wheel** - quick adjustments with optional spinner buttons and mouse interactions.
+- **Step Interval Control** - fine-tune increment/decrement amounts per field with the `StepInterval` property for predictable stepping.
+- **Min/Max Value Enforcement** - prevent out-of-range durations using `MinValue` and `MaxValue`.
+- **Null and Watermark Support** - allow null duration values and display a placeholder using `AllowNull` and `NullString`.
+- **ReadOnly Mode** - disable user edits while permitting programmatic changes via `IsReadOnly`.
+- **Event Notification & Data Binding** - `ValueChanged` event and bindable `Value` property support MVVM integration.
+- **Milliseconds Precision** - include milliseconds in the display and editing using the `Format` (for example the `z` specifier).
+- **Localization & Theming** - works with resource-based localization and Syncfusion themes for consistent styling.
diff --git a/wpf/Toast-Notification/Appearance-and-Styling.md b/wpf/Toast-Notification/Appearance-and-Styling.md
new file mode 100644
index 000000000..d629afe19
--- /dev/null
+++ b/wpf/Toast-Notification/Appearance-and-Styling.md
@@ -0,0 +1,170 @@
+---
+layout: post
+title: Appearance and Styling in WPF Toast Notification control | Syncfusion®
+description: Learn here all about Appearance and Styling support in Syncfusion® WPF Toast Notification (SfToastNotification) control and more.
+platform: wpf
+control: SfToastNotification
+documentation: ug
+
+---
+
+# Appearance and Styling in WPF Toast Notification (SfToastNotification)
+
+## Toast Variants and Severity
+
+Toast notifications provide multiple severity levels with built-in visual styling and offer three visual variants to suit different design preferences.
+
+{% tabs %}
+{% highlight C# %}
+
+SfToastNotification.Show(this, new ToastOptions
+{
+ Title = "Updates",
+ Message = "Your project has been syncronized successfully",
+ Mode = ToastMode.Screen,
+ Severity = ToastSeverity.Success,
+ Variant = ToastVariant.Filled
+});
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
+### Variant Behavior with Severity
+
+| **Severity ↓ / Variant →** | **Text** | **Fill** | **Outlined** |
+|----------------------------|-----------|-----------|---------------|
+| **Info** |  |  |  |
+| **Success** |  |  |  |
+| **Warning** |  |  |  |
+| **Error** |  |  |  |
+
+## Accent Brush
+
+The AccentBrush property enables you to fine-tune the appearance of toast notifications. After severity and variant are applied, you can use this property to customize the color accents and overall visual styling.
+
+### Accent Brush Behavior with Severity
+
+{% tabs %}
+{% highlight C# %}
+// Accent brush IS applied (Severity = Error)
+// Customizes the error color styling
+SfToastNotification.Show(this, new ToastOptions
+{
+ Title = "Error",
+ Message = "Accent brush customizes error styling",
+ Mode = ToastMode.Screen,
+ Severity = ToastSeverity.Error,
+ AccentBrush = new SolidColorBrush(Colors.Violet) // Applied
+});
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
+## Toast Placement Options
+
+The Toast control supports multiple screen placement options, allowing notifications to appear at specific positions within the application window / screen.
+
+TopLeft - Displays the toast in the top-left corner.
+
+TopCenter - Displays the toast centered at the top.
+
+TopRight - Displays the toast in the top-right corner.
+
+LeftCenter - Displays the toast vertically centered on the left edge.
+
+RightCenter - Displays the toast vertically centered on the right edge.
+
+BottomLeft - Displays the toast in the bottom-left corner.
+
+BottomCenter - Displays the toast centered at the bottom.
+
+BottomRight - Displays the toast in the bottom-right corner.
+
+These placement options give you full control over where toast notifications appear in the UI, enabling you to tailor the experience to your app layout or user preferences.
+
+{% tabs %}
+{% highlight C# %}
+
+// Top-Left corner
+SfToastNotification.Show(this, new ToastOptions
+{
+ Message = "Top-Left Position",
+ Placement = ToastPlacement.TopLeft,
+ Mode = ToastMode.Screen
+});
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
+
+## Animation Types
+
+The Toast notification control supports a variety of built-in animations that define how notifications appear and disappear on the screen. These animations enhance the user experience by providing smooth transition effects when showing or hiding toast notifications. You can choose from multiple animation types, such as fade, slide, flip, and zoom to match the interaction style of your application.
+
+You can configure the show and hide animations individually, allowing full control over the visual behavior of toast notifications.
+
+{% tabs %}
+{% highlight C# %}
+
+// Fade animations
+SfToastNotification.Show(this, new ToastOptions
+{
+ Message = "Fade effect",
+ Mode = ToastMode.Screen,
+ ShowAnimationType = ToastAnimation.FadeIn,
+ CloseAnimationType = ToastAnimation.FadeOut
+});
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
+### Available Animations
+
+| Animation | In | Out |
+|-----------|----|----|
+| **Fade** | FadeIn | FadeOut |
+| **Zoom** | FadeZoomIn | FadeZoomOut |
+| **Slide** | SlideBottomIn | SlideBottomOut |
+| **Flip Left Down** | FlipLeftDownIn | FlipLeftDownOut |
+| **Flip Left Up** | FlipLeftUpIn | FlipLeftUpOut |
+| **Flip Right Down** | FlipRightDownIn | FlipRightDownOut |
+| **None** | None | None |
+
+## Customization Reference
+
+This section provides a **complete reference** for all customization applicability rules.
+
+| Feature | Default Mode | Window/Screen + Severity=None | Window/Screen + Severity Levels |
+|---|---|---|---|
+| **Severity** (Info/Success/Warning/Error) | ❌ NO (OS controlled) | ✅ YES | ✅ YES |
+| **Variant** (Text/Outlined/Filled) | ❌ NO | ❌ NO (not applicable for None) | ✅ YES |
+| **AccentBrush** (Custom colors) | ❌ NO | ❌ NO (not applicable for None) | ✅ YES |
+| **Placement** (8 positions) | ❌ NO (OS managed) | ✅ YES | ✅ YES |
+| **Animations** (Show/Hide toast effects) | ❌ NO | ✅ YES | ✅ YES |
+| **Actions** (Interactive buttons) | ⚠️ LIMITED | ✅ YES | ✅ YES |
+| **Duration** (Auto-close timing) | ❌ NO | ✅ YES | ✅ YES |
+| **Title/Message** (Text content) | ✅ YES | ✅ YES | ✅ YES |
+
+**Key Points:**
+- ✅ Features marked **YES** are fully supported
+- ❌ Features marked **NO** are not supported
+- ⚠️ **LIMITED** means basic support only
+- **Variant** and **AccentBrush** require severity levels (not applicable when Severity = None)
+- **Placement**, **Animations**, **Actions** require Window/Screen modes (not available in Default mode)
+
+## Summary
+
+| Concept | Purpose | Key Options |
+|---------|---------|------------|
+| **Severity** | Toast importance level | None, Info, Success, Warning, Error |
+| **Variants** | Visual styling | Text, Outlined, Filled |
+| **Placement** | Screen position | 8 positions available |
+| **Animations** | Show/hide effects | Built-in animation types |
\ No newline at end of file
diff --git a/wpf/Toast-Notification/Customization.md b/wpf/Toast-Notification/Customization.md
new file mode 100644
index 000000000..d1bb5111d
--- /dev/null
+++ b/wpf/Toast-Notification/Customization.md
@@ -0,0 +1,129 @@
+---
+layout: post
+title: Customization of WPF Toast Notification | Syncfusion®
+description: Learn about the various customization in Syncfusion Essential WPF Toast Notification control, its elements, and more.
+platform: wpf
+control: SfToastNotification
+documentation: ug
+---
+
+
+# Customization in WPF Toast Notification
+
+## Dealing with ActionButtons
+
+Toast notifications can include interactive action buttons:
+
+### Simple Action Button
+
+{% tabs %}
+{% highlight C# %}
+
+SfToastNotification.Show(this, new ToastOptions
+{
+ Title = "File Saved",
+ Message = "Your document has been saved.",
+ Actions = new List
+ {
+ new ToastAction
+ {
+ Label = "Undo",
+ },
+ new ToastAction
+ {
+ Label = "OK",
+ CloseOnClick = true
+ }
+ }
+});
+
+private void UndoLastSave()
+{
+ // Implement undo logic
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+### Action Button with Callback
+
+{% tabs %}
+{% highlight C# %}
+
+SfToastNotification.Show(this, new ToastOptions
+{
+ Title = "New Message",
+ Message = "You have a new message.",
+ Actions = new List
+ {
+ new ToastAction
+ {
+ Label = "Reply",
+ Callback = () => OpenReplyWindow(),
+ CloseOnClick = true
+ },
+ new ToastAction
+ {
+ Label = "Later",
+ CloseOnClick = true
+ }
+ }
+});
+
+private void OpenReplyWindow()
+{
+ // Open reply window
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Customizing Action Buttons with ActionTemplate
+
+Each action button in a toast notification can be individually customized using the `ActionTemplate` property available in the `ToastAction` class. When defining actions within a toast, you can optionally specify a custom data template to control the appearance and behavior of each action button.
+
+Custom styles or templates are defined in XAML, and the template’s resource name is then bound to the `ActionTemplate` property of the corresponding `ToastAction`. When a template is provided, the toast will use your custom styling; if not, the default action button style defined in the toast’s control template will be applied.
+
+{% tabs %}
+{% highlight XAML %}
+
+
+
+
+
+
+{% endhighlight %}
+{% highlight C# %}
+
+SfToastNotification.Show(this, new ToastOptions
+{
+ Title = "New Message",
+ Message = "You have a new message.",
+ Actions = new List
+ {
+ new ToastAction
+ {
+ Label = "Reply",
+ ActionTemplate = (DataTemplate)Application.Current.Resources["CustomizedActionTemplate"]
+ },
+ new ToastAction
+ {
+ Label = "Later"
+ }
+ }
+});
+
+{% endhighlight %}
+{% endtabs %}
\ No newline at end of file
diff --git a/wpf/Toast-Notification/Getting-Started.md b/wpf/Toast-Notification/Getting-Started.md
new file mode 100644
index 000000000..36ce30e5e
--- /dev/null
+++ b/wpf/Toast-Notification/Getting-Started.md
@@ -0,0 +1,306 @@
+---
+layout: post
+title: Getting Started with WPF Toast Notification | Syncfusion®
+description: Learn here about getting started with Syncfusion® WPF Toast Notification (SfToastNotification) control and more details.
+platform: wpf
+control: SfToastNotification
+documentation: ug
+---
+
+# Getting Started with WPF Toast Notification
+
+This section will help you get started with the SfToastNotification control in your WPF application.
+
+## Assembly deployment
+
+There are several ways to add Syncfusion® control in to Visual Studio WPF project, the following steps will helps to add a SfToastNotification control
+
+- Create a new WPF project in Visual Studio.
+- Add references to the following assemblies:
+ - Syncfusion.SfToastNotification.WPF
+ - Syncfusion.Shared.WPF
+
+Alternatively, you can install the **Syncfusion.SfToastNotification.WPF** NuGet package. This will automatically install all the required dependent assemblies.
+
+## Adding WPF SfToastNotification
+
+Since SfToastNotification is a non-UI control, you can create and display toasts entirely through only the C# code, it does not require any XAML configuration.
+
+You can display a basic toast notification with a title and message using the Show method.
+
+{% tabs %}
+{% highlight C# %}
+
+using System;
+using System.Windows;
+using Syncfusion.UI.Xaml.SfToastNotification;
+
+namespace ToastNotificationDemo
+{
+ public partial class MainWindow : Window
+ {
+ public MainWindow()
+ {
+ InitializeComponent();
+ }
+
+ private void Button_Click(object sender, RoutedEventArgs e)
+ {
+ // Show a simple information toast from any location in your application
+ SfToastNotification.Show(this, new ToastOptions
+ {
+ Title = "Welcome",
+ Message = "Hello! This is your first toast notification."
+ });
+ }
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
+N> For displaying default/native toast notifications, you must initialize the **WindowsToastBootstrapper** for your application in `App.xaml.cs`. This initialization is required for the OS level toast to work. Please refer to the [Application Startup Configuration](https://help.syncfusion.com/wpf/Toast-Notification/getting-started#application-startup-configuration) section to know more.
+
+The following properties allow you to set the textual content of the toast notification.
+- **Title**: Represents the bold text displayed at the top of the toast. This is typically used to summarize the purpose of the notification.
+- **Message**: Defines the main body text of the toast. This is the primary content that conveys the notification's information.
+- **Header**: Specifies an additional header displayed above or beside the message.
+This property applies only to in-app toast modes (Window and Screen) and is ignored in native (Default) mode.
+
+## Toast Modes
+
+The SfToastNotification control supports three different display modes to suit various application scenarios.
+
+### 1. Default Mode
+
+Uses the native operating system toast notifications. Ideal for applications that want to integrate with the OS notification system.
+
+#### Application Startup Configuration
+
+Import the control namespace **Syncfusion.UI.Xaml.SfToastNotification** in `App.xaml.cs` and initialize the WindowsToastBootstrapper in the `Application_Startup` event, as the SfToastNotification is a non-UI control that must be initialized during application startup.
+
+{% tabs %}
+{% highlight C# %}
+
+using System.Windows;
+using Syncfusion.UI.Xaml.SfToastNotification;
+
+namespace ToastNotificationDemo
+{
+ public partial class App : Application
+ {
+ private void Application_Startup(object sender, StartupEventArgs e)
+ {
+ // Initialize the Toast Notification bootstrapper
+ WindowsToastBootstrapper.RemoveShortcutOnUnload = true;
+ WindowsToastBootstrapper.Initialize("ToastNotificationDemo.App", "ToastNotificationDemo");
+ }
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+Configure the `Application_Startup` event in `App.xaml`.
+
+{% tabs %}
+{% highlight XAML %}
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+**Characteristics:**
+- Native OS appearance and behavior
+- System-level notifications
+- Limited customization options
+- Best for critical system messages
+
+N> When `ToastMode = Default`, **No customizations are applicable**. The toast uses native OS styling and behavior. Default mode does not accept any customization. This native toast supports only for windows 10 or higher versions.
+
+### 2. Window Mode
+
+Displays toast notifications within the owning window. Perfect for applications where you want toasts to stay within the application boundaries.
+
+{% tabs %}
+{% highlight C# %}
+
+SfToastNotification.Show(this, new ToastOptions
+{
+ Title = "Window Toast",
+ Message = "This notification appears within the window",
+ Mode = ToastMode.Window
+});
+
+{% endhighlight %}
+{% endtabs %}
+
+**Characteristics:**
+- Constrained to window boundaries
+- Full customization support
+- Respects window activation state
+- Good for application-specific feedback
+
+### 3. Screen Mode
+
+Displays custom toast overlay globally across the screen. Useful for application-wide notifications that should be visible regardless of window focus.
+
+{% tabs %}
+{% highlight C# %}
+
+SfToastNotification.Show(this, new ToastOptions
+{
+ Title = "Global Notification",
+ Message = "This notification appears globally on screen",
+ Mode = ToastMode.Screen
+});
+
+{% endhighlight %}
+{% endtabs %}
+
+**Characteristics:**
+- Global screen-level display
+- Full customization capabilities
+- Visible regardless of window state
+- Best for important application-wide events
+
+N> The Window and Screen modes are in-app modes and support extensive customization. The Default (native) mode integrates with the operating system and therefore supports only limited customization.
+
+## Duration
+
+You can use the Duration property to specify how long the toast remains visible. The default display duration is 6 seconds.
+
+{% tabs %}
+{% highlight C# %}
+
+// Toast with 10 second duration
+SfToastNotification.Show(this, new ToastOptions
+{
+ Title = "Processing",
+ Message = "Your request is being processed...",
+ Mode = ToastMode.Screen,
+ Duration = TimeSpan.FromSeconds(10)
+});
+
+{% endhighlight %}
+{% endtabs %}
+
+## Toast without Auto-Close
+
+You can control whether a toast closes automatically by using the **PreventAutoClose** property.
+
+{% tabs %}
+{% highlight C# %}
+
+// Toast remains until user closes it manually
+SfToastNotification.Show(this, new ToastOptions
+{
+ Title = "Important",
+ Message = "Please review this important notification.",
+ Mode = ToastMode.Screen,
+ PreventAutoClose = true
+});
+
+{% endhighlight %}
+{% endtabs %}
+
+## Action Button
+
+You can set whether the action button row is visible in the toast by using the **ShowActionButtons** property. The default value is true, which displays the action buttons for in-app toasts modes (Window and Screen).
+
+{% tabs %}
+{% highlight C# %}
+
+// Toast with-out action buttons
+SfToastNotification.Show(this, new ToastOptions
+{
+ Title = "New Notification",
+ Header = "Updates",
+ Message = "Your project has been synchronized successfully.",
+ Mode = ToastMode.Screen,
+ ShowActionButtons = false
+});
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
+## Close Button
+
+You can use the **ShowCloseButton** property to specify whether the close button is visible for the toast. The close button is available only in in-app toasts (Window and Screen modes). The default value is true.
+
+{% tabs %}
+{% highlight C# %}
+
+// Toast with the close button hidden
+SfToastNotification.Show(this, new ToastOptions
+{
+ Title = "Reminder",
+ Message = "This toast has its close button disabled.",
+ Mode = ToastMode.Screen,
+ ShowCloseButton = false
+});
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
+## Toast Life cycle
+
+Understanding the life cycle of a toast helps in managing notifications effectively.
+
+### States
+
+1. **Creation** - Toast is created with ToastOptions
+2. **Display** - Toast appears on screen according to placement and mode
+3. **Duration** - Toast remains visible for specified duration
+4. **Dismissal** - Toast closes via auto-close timeout, close button, or programmatic close
+
+### Managing Toast Life cycle
+
+{% tabs %}
+{% highlight C# %}
+
+// Create a toast with custom ID
+var options = new ToastOptions
+{
+ Id = "unique-toast-id",
+ Title = "Tracked Toast",
+ Message = "This toast can be managed",
+ Mode = ToastMode.Screen,
+ Duration = TimeSpan.FromSeconds(10)
+};
+
+SfToastNotification.Show(this, options);
+
+// Manually close specific toast
+SfToastNotification.Close("unique-toast-id");
+
+// Close all toasts
+SfToastNotification.CloseAll();
+
+{% endhighlight %}
+{% endtabs %}
+
+## Theme
+
+SfToastNotification supports various built-in themes. Refer to the below links to apply themes for the Badge,
+
+ * [Apply theme using SfSkinManager](https://help.syncfusion.com/wpf/themes/skin-manager)
+
+ * [Create a custom theme using ThemeStudio](https://help.syncfusion.com/wpf/themes/theme-studio#creating-custom-theme)
+
+
+
diff --git a/wpf/Toast-Notification/Images/ActionButton-image.png b/wpf/Toast-Notification/Images/ActionButton-image.png
new file mode 100644
index 000000000..3adf60d6e
Binary files /dev/null and b/wpf/Toast-Notification/Images/ActionButton-image.png differ
diff --git a/wpf/Toast-Notification/Images/CloseButton-image.png b/wpf/Toast-Notification/Images/CloseButton-image.png
new file mode 100644
index 000000000..2feb1635d
Binary files /dev/null and b/wpf/Toast-Notification/Images/CloseButton-image.png differ
diff --git a/wpf/Toast-Notification/Images/Control_Structure.png b/wpf/Toast-Notification/Images/Control_Structure.png
new file mode 100644
index 000000000..37bee23a5
Binary files /dev/null and b/wpf/Toast-Notification/Images/Control_Structure.png differ
diff --git a/wpf/Toast-Notification/Images/DarkTheme-image.jpg b/wpf/Toast-Notification/Images/DarkTheme-image.jpg
new file mode 100644
index 000000000..62ca9d8d3
Binary files /dev/null and b/wpf/Toast-Notification/Images/DarkTheme-image.jpg differ
diff --git a/wpf/Toast-Notification/Images/SimpleToast.png b/wpf/Toast-Notification/Images/SimpleToast.png
new file mode 100644
index 000000000..2add2208a
Binary files /dev/null and b/wpf/Toast-Notification/Images/SimpleToast.png differ
diff --git a/wpf/Toast-Notification/Images/accent-brush-image.png b/wpf/Toast-Notification/Images/accent-brush-image.png
new file mode 100644
index 000000000..4e45dcd9b
Binary files /dev/null and b/wpf/Toast-Notification/Images/accent-brush-image.png differ
diff --git a/wpf/Toast-Notification/Images/fill-error-image.png b/wpf/Toast-Notification/Images/fill-error-image.png
new file mode 100644
index 000000000..ae6cb24f2
Binary files /dev/null and b/wpf/Toast-Notification/Images/fill-error-image.png differ
diff --git a/wpf/Toast-Notification/Images/fill-info-image.png b/wpf/Toast-Notification/Images/fill-info-image.png
new file mode 100644
index 000000000..c25c09256
Binary files /dev/null and b/wpf/Toast-Notification/Images/fill-info-image.png differ
diff --git a/wpf/Toast-Notification/Images/fill-warning-image.png b/wpf/Toast-Notification/Images/fill-warning-image.png
new file mode 100644
index 000000000..b124b186f
Binary files /dev/null and b/wpf/Toast-Notification/Images/fill-warning-image.png differ
diff --git a/wpf/Toast-Notification/Images/filled-success-image.png b/wpf/Toast-Notification/Images/filled-success-image.png
new file mode 100644
index 000000000..ff08397b0
Binary files /dev/null and b/wpf/Toast-Notification/Images/filled-success-image.png differ
diff --git a/wpf/Toast-Notification/Images/outline-error-image.png b/wpf/Toast-Notification/Images/outline-error-image.png
new file mode 100644
index 000000000..58a6afa6b
Binary files /dev/null and b/wpf/Toast-Notification/Images/outline-error-image.png differ
diff --git a/wpf/Toast-Notification/Images/outline-info-image.png b/wpf/Toast-Notification/Images/outline-info-image.png
new file mode 100644
index 000000000..861be9d4f
Binary files /dev/null and b/wpf/Toast-Notification/Images/outline-info-image.png differ
diff --git a/wpf/Toast-Notification/Images/outline-success-image.png b/wpf/Toast-Notification/Images/outline-success-image.png
new file mode 100644
index 000000000..6d97422c1
Binary files /dev/null and b/wpf/Toast-Notification/Images/outline-success-image.png differ
diff --git a/wpf/Toast-Notification/Images/outline-warning-image.png b/wpf/Toast-Notification/Images/outline-warning-image.png
new file mode 100644
index 000000000..633ef3676
Binary files /dev/null and b/wpf/Toast-Notification/Images/outline-warning-image.png differ
diff --git a/wpf/Toast-Notification/Images/text-error-image.png b/wpf/Toast-Notification/Images/text-error-image.png
new file mode 100644
index 000000000..9cde4610f
Binary files /dev/null and b/wpf/Toast-Notification/Images/text-error-image.png differ
diff --git a/wpf/Toast-Notification/Images/text-info-image.png b/wpf/Toast-Notification/Images/text-info-image.png
new file mode 100644
index 000000000..5c2178989
Binary files /dev/null and b/wpf/Toast-Notification/Images/text-info-image.png differ
diff --git a/wpf/Toast-Notification/Images/text-success-image.png b/wpf/Toast-Notification/Images/text-success-image.png
new file mode 100644
index 000000000..d2543d56c
Binary files /dev/null and b/wpf/Toast-Notification/Images/text-success-image.png differ
diff --git a/wpf/Toast-Notification/Images/text-warning-image.png b/wpf/Toast-Notification/Images/text-warning-image.png
new file mode 100644
index 000000000..b4f9c1529
Binary files /dev/null and b/wpf/Toast-Notification/Images/text-warning-image.png differ
diff --git a/wpf/Toast-Notification/Images/wpf_toast_banner.png b/wpf/Toast-Notification/Images/wpf_toast_banner.png
new file mode 100644
index 000000000..15ae4373a
Binary files /dev/null and b/wpf/Toast-Notification/Images/wpf_toast_banner.png differ
diff --git a/wpf/Toast-Notification/Images/wpf_toast_placement.gif b/wpf/Toast-Notification/Images/wpf_toast_placement.gif
new file mode 100644
index 000000000..c6a3b3d08
Binary files /dev/null and b/wpf/Toast-Notification/Images/wpf_toast_placement.gif differ
diff --git a/wpf/Toast-Notification/Images/wpf_toastnotification_animation.gif b/wpf/Toast-Notification/Images/wpf_toastnotification_animation.gif
new file mode 100644
index 000000000..0d28c465e
Binary files /dev/null and b/wpf/Toast-Notification/Images/wpf_toastnotification_animation.gif differ
diff --git a/wpf/Toast-Notification/Overview.md b/wpf/Toast-Notification/Overview.md
new file mode 100644
index 000000000..22ce02288
--- /dev/null
+++ b/wpf/Toast-Notification/Overview.md
@@ -0,0 +1,51 @@
+---
+layout: post
+title: About WPF Toast Notification control | Syncfusion®
+description: Learn here all about introduction of Syncfusion® WPF Toast Notification (SfToastNotification) control, its elements and more details.
+platform: wpf
+control: SfToastNotification
+documentation: ug
+---
+
+# WPF Toast Notification (SfToastNotification) Overview
+
+The [SfToastNotification](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.SfToastNotification.html) is a non-UI control that displays native Windows toast notifications and custom overlay notifications to users about events or status changes in your application. Toast notifications are non-intrusive messages that appear for a limited time and then automatically disappear.
+
+## Non-UI Control
+
+SfToastNotification is a **non-UI control**, meaning it doesn't require any XAML markup to be added to your UI. Instead, you can create and display toasts entirely through C# code in your application. This makes it lightweight and easy to integrate into any WPF application without modifying your UI layer.
+
+
+
+## Key features
+
+* **Multiple Display Modes** - Display toasts as native OS notifications, overlay notifications, or window-relative notifications.
+* **Severity Levels** - Support for Info, Success, Warning, and Error severity levels with corresponding visual indicators.
+* **Rich Styling** - Multiple visual variants (Text, Outlined, Filled) and customizable accent colors.
+* **Flexible Positioning** - Display toasts at 8 different screen positions (Top-Left, Top-Center, Top-Right, Left-Center, Right-Center, Bottom-Left, Bottom-Center, Bottom-Right, Center).
+* **Animation Support** - Built-in animations for toast show/hide effects (Fade, Slide, Flip, Zoom).
+* **Custom Actions** - Add interactive action buttons with custom callbacks for user interactions.
+* **Custom Templates** - Fully customizable content, title, close button, and action button templates.
+* **Auto-Close Control** - Configurable duration with option to prevent automatic closing.
+* **Multiple Identification** - Support for custom toast IDs to track and manage specific notifications.
+* **Template Selectors** - DataTemplateSelector support for dynamic action button rendering.
+
+## Architecture Overview
+
+The SfToastNotification control uses a service-based architecture:
+
+- **WindowsToastBootstrapper** - Initializes the toast notification system at application startup
+- **SfToastNotification** - Static API for displaying and managing toasts
+- **ToastOptions** - Configuration class defining toast appearance and behavior
+- **ToastItem** - Visual representation of a single toast instance
+- **ToastAction** - Interactive action button definition
+- **ToastService** - Internal service managing toast life cycle
+
+## When to use Toast Notifications
+
+Toast notifications are ideal for:
+- Status confirmations (save successful, delete completed)
+- Warning messages (unsaved changes, operation in progress)
+- Information alerts (new message received, update available)
+- Error notifications (operation failed, validation errors)
+- Non-critical user feedback that doesn't require immediate action
diff --git a/wpf/TreeGrid/Serialization-and-Deserialization.md b/wpf/TreeGrid/Serialization-and-Deserialization.md
index c03df013b..15108f037 100644
--- a/wpf/TreeGrid/Serialization-and-Deserialization.md
+++ b/wpf/TreeGrid/Serialization-and-Deserialization.md
@@ -13,7 +13,7 @@ SfTreeGrid allows you to serialize and deserialize the SfTreeGrid settings using
## Serialization
-You can serialize the SfTreeGrid by using `SfTreeGrid.Serialize` method which exports the current TreeGrid control properties to an XML file.
+You can serialize the SfTreeGrid by using [SfTreeGrid.Serialize](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_Serialize_System_IO_Stream_) method which exports the current TreeGrid control properties to an XML file.
{% tabs %}
{% highlight c# %}
@@ -26,7 +26,7 @@ using (var file = File.Create("TreeGrid.xml"))
### Serialize as Stream
-You can store the SfTreeGrid settings as [Stream](https://learn.microsoft.com/en-us/dotnet/api/system.io.stream?view=net-8.0) using `Serialize` method by passing the stream.
+You can store the SfTreeGrid settings as [Stream](https://learn.microsoft.com/en-us/dotnet/api/system.io.stream?view=net-8.0) using [Serialize](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_Serialize_System_IO_Stream_) method by passing the stream.
{% tabs %}
{% highlight c# %}
@@ -37,11 +37,11 @@ this.treeGrid.Serialize(stream);
## Serialization options
-SfTreeGrid serialization operation can be customized by passing `TreeGridSerializationOptions` instance as an argument to `Serialize` method.
+SfTreeGrid serialization operation can be customized by passing [TreeGridSerializationOptions](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridSerializationOptions.html) instance as an argument to [Serialize](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_Serialize_System_IO_Stream_Syncfusion_UI_Xaml_TreeGrid_TreeGridSerializationOptions_) method.
### Serialize sorting
-By default, SfTreeGrid allows you to serialize the sorting operation. You can disable the sorting serialization by setting the `TreeGridSerializationOptions.SerializeSorting` to `false`.
+By default, SfTreeGrid allows you to serialize the sorting operation. You can disable the sorting serialization by setting the [TreeGridSerializationOptions.SerializeSorting](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridSerializationOptions.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridSerializationOptions_SerializeSorting) to `false`.
{% tabs %}
{% highlight c# %}
@@ -56,7 +56,7 @@ using (var file = File.Create("TreeGrid.xml"))
### Serialize filtering
-By default, SfTreeGrid allows you to serialize the filtering operation. You can disable the filtering serialization by setting the `TreeGridSerializationOptions.SerializeFiltering` to `false`.
+By default, SfTreeGrid allows you to serialize the filtering operation. You can disable the filtering serialization by setting the [TreeGridSerializationOptions.SerializeFiltering](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridSerializationOptions.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridSerializationOptions_SerializeFiltering) to `false`.
{% tabs %}
{% highlight c# %}
@@ -71,7 +71,7 @@ using (var file = File.Create("TreeGrid.xml"))
### Serialize columns
-By default, SfTreeGrid allows you to serialize the columns manipulation operation. You can disable the columns serialization by setting the `TreeGridSerializationOptions.SerializeColumns` to `false`.
+By default, SfTreeGrid allows you to serialize the columns manipulation operation. You can disable the columns serialization by setting the [TreeGridSerializationOptions.SerializeColumns](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridSerializationOptions.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridSerializationOptions_SerializeColumns) to `false`.
{% tabs %}
{% highlight c# %}
@@ -86,7 +86,7 @@ using (var file = File.Create("TreeGrid.xml"))
### Serialize stacked headers
-By default, SfTreeGrid allows you to serialize the stack headers operation. You can disable the stack headers serialization by setting the `TreeGridSerializationOptions.SerializeStackedHeaders` to `false`.
+By default, SfTreeGrid allows you to serialize the stack headers operation. You can disable the stack headers serialization by setting the [TreeGridSerializationOptions.SerializeStackedHeaders](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridSerializationOptions.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridSerializationOptions_SerializeStackedHeaders) to `false`.
{% tabs %}
{% highlight c# %}
@@ -101,7 +101,7 @@ using (var file = File.Create("TreeGrid.xml"))
## Deserialization
-You can deserialize the SfTreeGrid setting by using `SfTreeGrid.Deserialize` method which reconstructs the SfTreeGrid based on the setting in the stored XML file.
+You can deserialize the SfTreeGrid setting by using [SfTreeGrid.Deserialize](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_Deserialize_System_IO_Stream_) method which reconstructs the SfTreeGrid based on the setting in the stored XML file.
{% tabs %}
{% highlight c# %}
@@ -114,7 +114,7 @@ using (var file = File.Open("TreeGrid.xml", FileMode.Open))
### Deserialize from Stream
-You can deserialize the SfTreeGrid settings from [Stream](https://learn.microsoft.com/en-us/dotnet/api/system.io.stream?view=net-8.0) using `Deserialize` method.
+You can deserialize the SfTreeGrid settings from [Stream](https://learn.microsoft.com/en-us/dotnet/api/system.io.stream?view=net-8.0) using [Deserialize](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_Deserialize_System_IO_Stream_) method.
{% tabs %}
{% highlight c# %}
@@ -125,11 +125,11 @@ this.treeGrid.Deserialize(fileStream);
## Deserialization options
-Deserialization operation can be customized by passing `TreeGridDeserializationOptions` instance as an argument to `Deserialize` method.
+Deserialization operation can be customized by passing [TreeGridDeserializationOptions](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridDeserializationOptions.html) instance as an argument to [Deserialize](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_Deserialize_System_IO_Stream_Syncfusion_UI_Xaml_TreeGrid_TreeGridDeserializationOptions_) method.
### Deserialize sorting
-By default, SfTreeGrid allows you to deserialize the sorting operation. You can disable the sorting deserialization by setting the `TreeGridDeserializationOptions.DeserializeSorting` to `false`.
+By default, SfTreeGrid allows you to deserialize the sorting operation. You can disable the sorting deserialization by setting the [TreeGridDeserializationOptions.DeserializeSorting](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridDeserializationOptions.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridDeserializationOptions_DeserializeSorting) to `false`.
{% tabs %}
{% highlight c# %}
@@ -144,7 +144,7 @@ using (var file = File.Open("TreeGrid.xml", FileMode.Open))
### Deserialize filtering
-By default, SfTreeGrid allows you to deserialize the filtering. you can disable the filtering deserialization by setting `TreeGridDeserializationOptions.DeserializeFiltering` to `false`.
+By default, SfTreeGrid allows you to deserialize the filtering. you can disable the filtering deserialization by setting [TreeGridDeserializationOptions.DeserializeFiltering](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridDeserializationOptions.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridDeserializationOptions_DeserializeFiltering) to `false`.
{% tabs %}
{% highlight c# %}
@@ -159,7 +159,7 @@ using (var file = File.Open("TreeGrid.xml", FileMode.Open))
### Deserialize columns
-By default, SfTreeGrid allows you to deserialize the columns manipulation operations. You can disable the columns deserialization by setting the `TreeGridDeserializationOptions.DeserializeColumns` to `false`.
+By default, SfTreeGrid allows you to deserialize the columns manipulation operations. You can disable the columns deserialization by setting the [TreeGridDeserializationOptions.DeserializeColumns](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridDeserializationOptions.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridDeserializationOptions_DeserializeColumns) to `false`.
{% tabs %}
{% highlight c# %}
@@ -174,7 +174,7 @@ using (var file = File.Open("TreeGrid.xml", FileMode.Open))
### Deserialize stacked headers
-By default, SfTreeGrid allows you to deserialize the stack headers. You can disable the stacked headers deserialization by setting the `TreeGridDeserializationOptions.DeserializeStackedHeaders` to `false`.
+By default, SfTreeGrid allows you to deserialize the stack headers. You can disable the stacked headers deserialization by setting the [TreeGridDeserializationOptions.DeserializeStackedHeaders](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridDeserializationOptions.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridDeserializationOptions_DeserializeStackedHeaders) to `false`.
{% tabs %}
{% highlight c# %}
@@ -189,7 +189,7 @@ using (var file = File.Open("TreeGrid.xml", FileMode.Open))
## Customizing Serialization and Deserialization Operations
-SfTreeGrid allows you to customize the serialization and deserialization operations by deriving `TreeGridSerializationController` class and override the necessary virtual methods.
+SfTreeGrid allows you to customize the serialization and deserialization operations by deriving [TreeGridSerializationController](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridSerializationController.html) class and override the necessary virtual methods.
### Serialize custom column
@@ -249,8 +249,9 @@ In the below code snippet, the TreeGridDatePickerColumn is defined in SfTreeGrid
To serialize the above TreeGridDatePickerColumn, follow the below steps.
-1. Create a class derived from `SerializableTreeGridColumn` and define the custom column properties in `SerializableCustomTreeGridColumn` class.
+1. Create a class derived from [SerializableTreeGridColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SerializableTreeGridColumn.html) and define the custom column properties in `SerializableCustomTreeGridColumn` class.
+{% capture codesnippet1 %}
{% tabs %}
{% highlight c# %}
[DataContract(Name="SerializableCustomTreeGridColumn")]
@@ -261,9 +262,12 @@ public class SerializableCustomTreeGridColumn : SerializableTreeGridColumn
}
{% endhighlight %}
{% endtabs %}
+{% endcapture %}
+{{ codesnippet1 | EmployeeList_Indent_Level_1 }}
-2. Create a new class named as TreeGridSerializationControllerExt by overriding `TreeGridSerializationController` class.
+2. Create a new class named as TreeGridSerializationControllerExt by overriding [TreeGridSerializationController](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridSerializationController.html) class.
+{% capture codesnippet2 %}
{% tabs %}
{% highlight c# %}
treeGrid.SerializationController = new TreeGridSerializationControllerExt(treeGrid);
@@ -278,9 +282,12 @@ public class TreeGridSerializationControllerExt : TreeGridSerializationControlle
}
{% endhighlight %}
{% endtabs %}
+{% endcapture %}
+{{ codesnippet2 | EmployeeList_Indent_Level_1 }}
-3. You can get the custom column property settings for serialization by overriding the `GetSerializableTreeGridColumn` virtual method.
+3. You can get the custom column property settings for serialization by overriding the [GetSerializableTreeGridColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridSerializationController.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridSerializationController_GetSerializableTreeGridColumn_Syncfusion_UI_Xaml_TreeGrid_TreeGridColumn_) virtual method.
+{% capture codesnippet3 %}
{% tabs %}
{% highlight c# %}
public class TreeGridSerializationControllerExt : TreeGridSerializationController
@@ -303,9 +310,12 @@ public class TreeGridSerializationControllerExt : TreeGridSerializationControlle
}
{% endhighlight %}
{% endtabs %}
+{% endcapture %}
+{{ codesnippet3 | EmployeeList_Indent_Level_1 }}
-4. Store the custom column property settings during serialization by overriding the `StoreTreeGridColumnProperties` virtual method.
-
+4. Store the custom column property settings during serialization by overriding the [StoreTreeGridColumnProperties](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridSerializationController.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridSerializationController_StoreTreeGridColumnProperties_Syncfusion_UI_Xaml_TreeGrid_TreeGridColumn_Syncfusion_UI_Xaml_TreeGrid_SerializableTreeGridColumn_) virtual method.
+
+{% capture codesnippet4 %}
{% tabs %}
{% highlight c# %}
public class TreeGridSerializationControllerExt : TreeGridSerializationController
@@ -326,9 +336,12 @@ public class TreeGridSerializationControllerExt : TreeGridSerializationControlle
}
{% endhighlight %}
{% endtabs %}
+{% endcapture %}
+{{ codesnippet4 | EmployeeList_Indent_Level_1 }}
-5. Add the custom column into known column types by overriding the `KnownTypes` virtual method.
+5. Add the custom column into known column types by overriding the [KnownTypes](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridSerializationController.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridSerializationController_KnownTypes) virtual method.
+{% capture codesnippet5 %}
{% tabs %}
{% highlight c# %}
public class TreeGridSerializationControllerExt : TreeGridSerializationController
@@ -348,9 +361,12 @@ public class TreeGridSerializationControllerExt : TreeGridSerializationControlle
}
{% endhighlight %}
{% endtabs %}
+{% endcapture %}
+{{ codesnippet5 | EmployeeList_Indent_Level_1 }}
-6. During deserialization, you can get the custom column settings from `SerializableTreeGridColumn` by overriding `GetTreeGridColumn` virtual method.
-
+6. During deserialization, you can get the custom column settings from [SerializableTreeGridColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SerializableTreeGridColumn.html) by overriding [GetTreeGridColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridSerializationController.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridSerializationController_GetTreeGridColumn_Syncfusion_UI_Xaml_TreeGrid_SerializableTreeGridColumn_) virtual method.
+
+{% capture codesnippet6 %}
{% tabs %}
{% highlight c# %}
public class TreeGridSerializationControllerExt : TreeGridSerializationController
@@ -370,9 +386,12 @@ public class TreeGridSerializationControllerExt : TreeGridSerializationControlle
}
{% endhighlight %}
{% endtabs %}
+{% endcapture %}
+{{ codesnippet6 | EmployeeList_Indent_Level_1 }}
-7. Now restore the custom column settings from SerializableTreeGridColumn by overriding the `RestoreColumnProperties` virtual method.
+7. Now restore the custom column settings from SerializableTreeGridColumn by overriding the [RestoreColumnProperties](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridSerializationController.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridSerializationController_RestoreColumnProperties_Syncfusion_UI_Xaml_TreeGrid_SerializableTreeGridColumn_Syncfusion_UI_Xaml_TreeGrid_TreeGridColumn_) virtual method.
+{% capture codesnippet7 %}
{% tabs %}
{% highlight c# %}
public class TreeGridSerializationControllerExt : TreeGridSerializationController
@@ -394,6 +413,8 @@ public class TreeGridSerializationControllerExt : TreeGridSerializationControlle
}
{% endhighlight %}
{% endtabs %}
+{% endcapture %}
+{{ codesnippet7 | EmloyeeList_Indent_Level_1 }}
### Serializing template column content
@@ -425,7 +446,7 @@ By default, you cannot serialize the template content in SfTreeGrid. This is the
{% endhighlight %}
{% endtabs %}
-If you want to serialize and deserialize the template content, you have to reconstruct the same template during deserialization in `RestoreColumnProperties` method.
+If you want to serialize and deserialize the template content, you have to reconstruct the same template during deserialization in [RestoreColumnProperties](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridSerializationController.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridSerializationController_RestoreColumnProperties_Syncfusion_UI_Xaml_TreeGrid_SerializableTreeGridColumn_Syncfusion_UI_Xaml_TreeGrid_TreeGridColumn_) method.
{% tabs %}
{% highlight c# %}
diff --git a/wpf/TreeView/empty-content.md b/wpf/TreeView/empty-content.md
index 69d4270b4..2de5a3861 100644
--- a/wpf/TreeView/empty-content.md
+++ b/wpf/TreeView/empty-content.md
@@ -9,10 +9,10 @@ documentation: ug
# Empty Content in WPF TreeView (SfTreeView)
-The [SfTreeView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeView.html) control allows you to display and customize **empty content** when no data is available. The `EmptyContent` property can be set to either a string or any object, and it will be displayed when the [ItemsSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeView.SfTreeView.html#Syncfusion_UI_Xaml_TreeView_SfTreeView_ItemsSource) is **null** or **empty**, or when the [Nodes](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeView.SfTreeView.html#Syncfusion_UI_Xaml_TreeView_SfTreeView_Nodes) collection is **empty**. Use `EmptyContentTemplate` to customize the appearance of `EmptyContent`.
+The [SfTreeView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeView.html) control allows you to display and customize **empty content** when no data is available. The [EmptyContent](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeView.SfTreeView.html#Syncfusion_UI_Xaml_TreeView_SfTreeView_EmptyContent) property can be set to either a string or any object, and it will be displayed when the [ItemsSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeView.SfTreeView.html#Syncfusion_UI_Xaml_TreeView_SfTreeView_ItemsSource) is **null** or **empty**, or when the [Nodes](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeView.SfTreeView.html#Syncfusion_UI_Xaml_TreeView_SfTreeView_Nodes) collection is **empty**. Use [EmptyContentTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeView.SfTreeView.html#Syncfusion_UI_Xaml_TreeView_SfTreeView_EmptyContentTemplate) to customize the appearance of [EmptyContent](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeView.SfTreeView.html#Syncfusion_UI_Xaml_TreeView_SfTreeView_EmptyContent).
## Display text when TreeView has no items
-The `EmptyContent` property in `SfTreeView` can be set to a string, which will be displayed when no items are present in the TreeView.
+The [EmptyContent](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeView.SfTreeView.html#Syncfusion_UI_Xaml_TreeView_SfTreeView_EmptyContent) property in `SfTreeView` can be set to a string, which will be displayed when no items are present in the TreeView.
{% tabs %}
{% highlight xaml %}
@@ -35,7 +35,7 @@ treeView.EmptyContent = "No Items";
## Display custom UI when TreeView has no items
-The `SfTreeView` control allows you to fully customize how empty content is displayed by using the `EmptyContentTemplate` property. This property lets you define a custom UI layout using a `DataTemplate`.
+The `SfTreeView` control allows you to fully customize how empty content is displayed by using the [EmptyContentTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeView.SfTreeView.html#Syncfusion_UI_Xaml_TreeView_SfTreeView_EmptyContentTemplate) property. This property lets you define a custom UI layout using a `DataTemplate`.
{% tabs %}
{% highlight xaml %}
@@ -74,8 +74,10 @@ The `SfTreeView` control allows you to fully customize how empty content is disp

+N> View sample in [GitHub](https://github.com/SyncfusionExamples/How-to-display-and-customize-empty-content-when-no-data-is-available-in-WPF-TreeView-SfTreeView)
+
## Binding Empty Content from ViewModel
-`SfTreeView` supports data binding of `EmptyContent`, allowing you to update the empty content dynamically from the ViewModel.
+`SfTreeView` supports data binding of [EmptyContent](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeView.SfTreeView.html#Syncfusion_UI_Xaml_TreeView_SfTreeView_EmptyContent), allowing you to update the empty content dynamically from the ViewModel.
{% tabs %}
{% highlight xaml %}
diff --git a/wpf/skills.md b/wpf/skills.md
new file mode 100644
index 000000000..e427d3b15
--- /dev/null
+++ b/wpf/skills.md
@@ -0,0 +1,214 @@
+---
+layout: post
+title: Syncfusion WPF Agent Skills for AI Assistants | Syncfusion
+description: Learn how to install and use Syncfusion Agent Skills to enhance AI assistants with accurate Syncfusion WPF component guidance.
+control: Skills
+platform: wpf
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Syncfusion WPF Agent Skills for AI Assistants
+
+This guide introduces **Syncfusion WPF Skills**, a knowledge package that enables AI assistants (VS Code, Cursor, CodeStudio, etc.) to understand and generate accurate WPF code using official APIs, patterns, and theming guidelines.
+
+These skills eliminate common issues with generic AI suggestions by grounding the assistant in accurate component usage patterns, API structures, supported features, and project‑specific configuration.
+
+## Prerequisites
+
+Before installing Syncfusion® WPF Agent Skills, ensure the following:
+
+- Required [Node.js](https://nodejs.org/en/) version >= 16
+- WPF application (existing or new); see [Overview](https://help.syncfusion.com/wpf/welcome-to-syncfusion-essential-wpf)
+- A supported AI agent or IDE that integrates with the Skills CLI (VS Code, Syncfusion® Code Studio, Cursor, etc.)
+
+## Key Benefits
+
+**Component Usage & API Knowledge**
+- Accurate guidance for adding and configuring Syncfusion® WPF components
+- Component‑specific props, events, and required feature modules
+- Guidance for injecting services/modules (where applicable)
+
+**Patterns & Best Practices**
+- Recommended API structures and composition patterns
+- State‑handling approaches for common scenarios
+- Feature‑injection workflows (for example, paging, sorting, filtering)
+- All guidance is authored directly in Skill files and does not rely on external documentation fetches
+
+**Design‑System Guidance**
+- Theme usage, including light and dark variants
+- Styling and icon usage patterns
+- Consistent design alignment across Syncfusion® WPF components
+
+## Installation
+
+Install [Syncfusion® WPF components skills](https://github.com/syncfusion/wpf-ui-components-skills.git) using the Skills CLI. Users can also explore available skills from the [marketplace](https://skills.sh/syncfusion/).
+
+### Install all skills
+
+Use the following command to install all component skills at once in the `.agents/skills` directory:
+
+{% tabs %}
+{% highlight bash tabtitle="NPM" %}
+
+npx skills add syncfusion/wpf-ui-components-skills -y
+
+{% endhighlight %}
+{% endtabs %}
+
+### Install selected skills
+
+Use the following command to install skills interactively:
+
+{% tabs %}
+{% highlight bash tabtitle="NPM" %}
+
+npx skills add syncfusion/wpf-ui-components-skills
+
+{% endhighlight %}
+{% endtabs %}
+
+The terminal will display a list of available skills. Use the arrow keys to navigate, the space bar to select the desired skills, and the Enter key to confirm.
+{% tabs %}
+{% highlight bash tabtitle="CMD" %}
+
+ Select skills to install (space to toggle)
+│ ◻ syncfusion-wpf-3d-chart
+│ ◻ syncfusion-wpf-accordion
+│ ◻ syncfusion-wpf-ai-assistview
+│ ◻ syncfusion-wpf-autocomplete
+| .....
+
+{% endhighlight %}
+{% endtabs %}
+
+Next, select which AI agent you're using and where to store the skills.
+{% tabs %}
+{% highlight bash tabtitle="CMD" %}
+
+│ ── Additional agents ─────────────────────────────
+│ Search:
+│ ↑↓ move, space select, enter confirm
+│
+│ ❯ ○ Augment (.augment/skills)
+│ ○ Claude Code (.claude/skills)
+│ ○ OpenClaw (skills)
+│ ○ CodeBuddy (.codebuddy/skills)
+│ ○ Command Code (.commandcode/skills)
+│ ○ Continue (.continue/skills)
+│ ○ Cortex Code (.cortex/skills)
+│ ○ Crush (.crush/skills)
+| ....
+
+{% endhighlight %}
+{% endtabs %}
+
+Choose your installation scope (project-level or global), then confirm to complete the installation.
+
+{% tabs %}
+{% highlight bash tabtitle="CMD" %}
+
+◆ Installation scope
+│ ● Project (Install in current directory (committed with your project))
+│ ○ Global
+
+◆ Proceed with installation?
+│ ● Yes / ○ No
+
+{% endhighlight %}
+{% endtabs %}
+
+This registers the Syncfusion® skill pack so that AI assistants can automatically load it in supported IDEs such as [Code Studio](https://help.syncfusion.com/code-studio/reference/configure-properties/skills), [Visual Studio Code](https://code.visualstudio.com/docs/copilot/customization/agent-skills), and [Cursor](https://cursor.com/docs/skills).
+
+To learn more about the Skills CLI, refer [here](https://skills.sh/docs).
+
+## How Syncfusion® Agent Skills Work
+
+1. **Reads relevant Skill files based on queries**, retrieving component usage patterns, APIs, and best‑practice guidance from installed Syncfusion® Skills. The assistant initially loads only skill names and descriptions, then dynamically loads the required skill and reference files as needed to provide accurate Syncfusion guidance.
+2. **Enforces Syncfusion® best practices**, including:
+
+ - Using the required feature modules for each component.
+ - Injecting applicable component modules (for example, paging, sorting, filtering, and other feature modules).
+ - Adding the correct theme and style imports.
+3. **Generates component‑accurate code**, avoiding invalid props or unsupported patterns.
+
+### Using the AI Assistant
+
+Once skills are installed, the assistant can be used to generate and update Syncfusion® WPF code for tasks such as:
+
+- “Add a DataGrid with paging, sorting, and filtering.”
+- “Create a chart with 3 line series and enable data labels and legends.”
+- “Apply Windows 11 light theme."
+
+## Skills CLI Commands
+
+After installation, manage Syncfusion® Agent Skills using the following commands:
+
+### List Skills
+
+View all installed skills in your current project or global environment:
+
+{% tabs %}
+{% highlight bash tabtitle="NPM" %}
+
+npx skills list
+
+{% endhighlight %}
+{% endtabs %}
+
+### Remove a Skill
+
+Uninstall a specific skill from your environment:
+
+{% tabs %}
+{% highlight bash tabtitle="NPM" %}
+
+npx skills remove
+
+{% endhighlight %}
+{% endtabs %}
+
+Replace `` with the name of the skill you want to remove (for example, `syncfusion-wpf-accordion`).
+
+### Check for Updates
+
+Check if updates are available for your installed skills:
+
+{% tabs %}
+{% highlight bash tabtitle="NPM" %}
+
+npx skills check
+
+{% endhighlight %}
+{% endtabs %}
+
+### Update All Skills
+
+Update all installed skills to their latest versions:
+
+{% tabs %}
+{% highlight bash tabtitle="NPM" %}
+
+npx skills update
+
+{% endhighlight %}
+{% endtabs %}
+
+## FAQ
+
+**Which agents and IDEs are supported?**
+
+Any Skills compatible agent or IDE that loads local skill files (Visual Studio Code, Cursor, CodeStudio, etc.).
+
+**Are skills loaded automatically?**
+
+Yes. Once installed, supported agents automatically detect and load relevant skills for Syncfusion‑related queries without requiring additional configuration.
+
+**Skills are not being loaded**
+
+Verify that skills are installed in the correct agent directory, restart the IDE, and confirm that the agent supports external skill files.
+
+## See also
+
+- [Agent Skills Standards](https://agentskills.io/home)
+- [Skills CLI](https://skills.sh/docs)
\ No newline at end of file