From ad2f70d0641243a2a99997f76d2f2cd8553b560b Mon Sep 17 00:00:00 2001 From: Karthick-Arjunan Date: Mon, 16 Mar 2026 18:40:36 +0530 Subject: [PATCH 01/47] Provided UG content for SfToastNotification --- .../Appearence-and-Styling.md | 170 ++++++++++ wpf/Toast-Notification/Customization.md | 129 ++++++++ wpf/Toast-Notification/Getting-Started.md | 306 ++++++++++++++++++ .../Images/ActionButton-image.png | Bin 0 -> 9616 bytes .../Images/CloseButton-image.png | Bin 0 -> 11770 bytes .../Images/Control_Structure.png | Bin 0 -> 60178 bytes .../Images/DarkTheme-image.jpg | Bin 0 -> 13812 bytes wpf/Toast-Notification/Images/SimpleToast.png | Bin 0 -> 13444 bytes .../Images/accent-brush-image.png | Bin 0 -> 10584 bytes .../Images/fill-error-image.png | Bin 0 -> 21148 bytes .../Images/fill-info-image.png | Bin 0 -> 21368 bytes .../Images/fill-warning-image.png | Bin 0 -> 21187 bytes .../Images/filled-success-image.png | Bin 0 -> 21707 bytes .../Images/outline-error-image.png | Bin 0 -> 11018 bytes .../Images/outline-info-image.png | Bin 0 -> 11055 bytes .../Images/outline-success-image.png | Bin 0 -> 11231 bytes .../Images/outline-warning-image.png | Bin 0 -> 10627 bytes .../Images/text-error-image.png | Bin 0 -> 10724 bytes .../Images/text-info-image.png | Bin 0 -> 10647 bytes .../Images/text-success-image.png | Bin 0 -> 10881 bytes .../Images/text-warning-image.png | Bin 0 -> 10279 bytes .../Images/wpf_toast_banner.png | Bin 0 -> 78539 bytes .../Images/wpf_toast_placement.gif | Bin 0 -> 470707 bytes .../wpf_toastnotification_animation.gif | Bin 0 -> 477503 bytes wpf/Toast-Notification/Overview.md | 51 +++ 25 files changed, 656 insertions(+) create mode 100644 wpf/Toast-Notification/Appearence-and-Styling.md create mode 100644 wpf/Toast-Notification/Customization.md create mode 100644 wpf/Toast-Notification/Getting-Started.md create mode 100644 wpf/Toast-Notification/Images/ActionButton-image.png create mode 100644 wpf/Toast-Notification/Images/CloseButton-image.png create mode 100644 wpf/Toast-Notification/Images/Control_Structure.png create mode 100644 wpf/Toast-Notification/Images/DarkTheme-image.jpg create mode 100644 wpf/Toast-Notification/Images/SimpleToast.png create mode 100644 wpf/Toast-Notification/Images/accent-brush-image.png create mode 100644 wpf/Toast-Notification/Images/fill-error-image.png create mode 100644 wpf/Toast-Notification/Images/fill-info-image.png create mode 100644 wpf/Toast-Notification/Images/fill-warning-image.png create mode 100644 wpf/Toast-Notification/Images/filled-success-image.png create mode 100644 wpf/Toast-Notification/Images/outline-error-image.png create mode 100644 wpf/Toast-Notification/Images/outline-info-image.png create mode 100644 wpf/Toast-Notification/Images/outline-success-image.png create mode 100644 wpf/Toast-Notification/Images/outline-warning-image.png create mode 100644 wpf/Toast-Notification/Images/text-error-image.png create mode 100644 wpf/Toast-Notification/Images/text-info-image.png create mode 100644 wpf/Toast-Notification/Images/text-success-image.png create mode 100644 wpf/Toast-Notification/Images/text-warning-image.png create mode 100644 wpf/Toast-Notification/Images/wpf_toast_banner.png create mode 100644 wpf/Toast-Notification/Images/wpf_toast_placement.gif create mode 100644 wpf/Toast-Notification/Images/wpf_toastnotification_animation.gif create mode 100644 wpf/Toast-Notification/Overview.md diff --git a/wpf/Toast-Notification/Appearence-and-Styling.md b/wpf/Toast-Notification/Appearence-and-Styling.md new file mode 100644 index 000000000..89730a2df --- /dev/null +++ b/wpf/Toast-Notification/Appearence-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 %} + +![SfToastNotification Severity image](Images/wpf_toast_banner.png) + +### Variant Behavior with Severity + +| **Severity ↓ / Variant →** | **Text** | **Fill** | **Outlined** | +|----------------------------|-----------|-----------|---------------| +| **Info** | ![SfToastNotification Text Info image](Images/text-info-image.png) | ![SfToastNotification Text Fill image](Images/fill-info-image.png) | ![SfToastNotification Outlined Info image](Images/outline-info-image.png) | +| **Success** | ![SfToastNotification Text Success image](Images/text-success-image.png) | ![SfToastNotification Filled Success image](Images/filled-success-image.png) | ![SfToastNotification Outline Success image](Images/outline-success-image.png) | +| **Warning** | ![SfToastNotification Text Warning image](Images/text-warning-image.png) | ![SfToastNotification Fill Warning image](Images/fill-warning-image.png) | ![SfToastNotification Outline Warning image](Images/outline-warning-image.png) | +| **Error** | ![SfToastNotification Text Error image](Images/text-error-image.png) | ![SfToastNotification Fill Error image](Images/fill-error-image.png) | ![SfToastNotification Text Error image](Images/outline-error-image.png) | + +## 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 %} + +![SfToastNotification Accent brush image](Images/accent-brush-image.png) + +## 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 %} + +![SfToastNotification Placement image](Images/wpf_toast_placement.gif) + + +## 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 +}); + +{% endtabs %} +{% endhighlight %} + +![SfToastNotification Animation image](Images/wpf_toastnotification_animation.gif) + +### 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 %} + + +