Restructured the ToastNotification UG content

wpf/Toast-Notification/Appearance-and-Styling.md

@@ -1,29 +1,30 @@
 ---
 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.
+description: Learn how to customize Syncfusion® WPF Toast Notification (SfToastNotification) using severity, variants, accent brush, placement, and animations.
 platform: wpf
 control: SfToastNotification
 documentation: ug
-
 ---
 
-# Appearance and Styling in WPF Toast Notification (SfToastNotification)
+# Appearance and Styling in WPF Toast Notification
+
+This section explains how to customize the appearance and visual behavior of toast notifications by using severity, variants, accent brush, placement, and animations.
 
-## Toast Variants and Severity
+## Severity and Variant
 
-Toast notifications provide multiple severity levels with built-in visual styling and offer three visual variants to suit different design preferences.
+Toast notifications support multiple severity levels with built-in visual styling and provide 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",
+    Message = "Your project has been synchronized successfully",
     Mode = ToastMode.Screen,
     Severity = ToastSeverity.Success,
-    Variant = ToastVariant.Filled  
+    Variant = ToastVariant.Filled
 });
 
 {% endhighlight %}
@@ -34,62 +35,42 @@ SfToastNotification.Show(this, new ToastOptions
 ### 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) |
+|----------------------------|----------|----------|--------------|
+| **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 Outline 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
+You can use the [AccentBrush](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.SfToastNotification.ToastOptions.html#Syncfusion_UI_Xaml_SfToastNotification_ToastOptions_AccentBrush) property to further customize the appearance of a toast notification after severity and variant are applied. This property allows you to adjust the color accents and overall visual styling of the toast.
 
 {% 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
+    AccentBrush = new SolidColorBrush(Colors.Violet)
 });
 
 {% 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.
+## Placement
 
-TopRight - Displays the toast in the top-right corner.
+Toast notifications support multiple placement options, allowing notifications to appear at different positions within the application window or screen.
 
-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.
+The supported placement options are: `TopLeft`, `TopCenter`, `TopRight`, `LeftCenter`, `RightCenter`, `BottomLeft`, `BottomCenter`, and `BottomRight`.
 
 {% tabs %}
 {% highlight C# %}
 
-// Top-Left corner
 SfToastNotification.Show(this, new ToastOptions
 {
     Message = "Top-Left Position",
@@ -102,21 +83,17 @@ SfToastNotification.Show(this, new ToastOptions
 
 ![SfToastNotification Placement image](Images/wpf_toast_placement.gif)
 
+## Animations
 
-## 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.
+Toast notifications support built-in animation types that control how notifications appear and disappear on the screen. You can configure the show and hide animations independently to customize the visual behavior of the toast.
 
 {% tabs %}
 {% highlight C# %}
 
-// Fade animations
 SfToastNotification.Show(this, new ToastOptions
 {
     Message = "Fade effect",
-	Mode = ToastMode.Screen,
+    Mode = ToastMode.Screen,
     ShowAnimationType = ToastAnimation.FadeIn,
     CloseAnimationType = ToastAnimation.FadeOut
 });
@@ -129,42 +106,11 @@ SfToastNotification.Show(this, new ToastOptions
 ### 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 |
+|-----------|----|-----|
+| **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` |

wpf/Toast-Notification/Customization.md

@@ -1,20 +1,35 @@
 ---
 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.
+description: Learn how to customize action buttons and close button behavior in Syncfusion® WPF Toast Notification control.
 platform: wpf
 control: SfToastNotification
 documentation: ug
 ---
 
+# Actions and Customization in WPF Toast Notification
 
-# Customization in WPF Toast Notification
+This section explains how to customize toast interaction elements such as action buttons, callbacks, templates, and close button behavior.
 
-## Dealing with ActionButtons
+## Action Buttons
 
-Toast notifications can include interactive action buttons:
+You can add interactive action buttons to a toast notification by using the `Actions` collection. You can also use the [ShowActionButtons](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.SfToastNotification.ToastItem.html#Syncfusion_UI_Xaml_SfToastNotification_ToastItem_ShowActionButtons) property to control whether the action button row is displayed for in-app toast modes.
 
-### Simple Action Button
+{% tabs %}
+{% highlight C# %}
+
+// Toast without 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 %}
 
 {% tabs %}
 {% highlight C# %}
@@ -45,7 +60,11 @@ private void UndoLastSave()
 {% endhighlight %}
 {% endtabs %}
 
-### Action Button with Callback
+![SfToastNotification Action Button](Images/ActionButton-image.png)
+
+## Action Callbacks
+
+You can assign a callback to an action button by using the [Callback](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.SfToastNotification.ToastAction.html#Syncfusion_UI_Xaml_SfToastNotification_ToastAction_Callback) property of [ToastAction](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.SfToastNotification.ToastAction.html). This allows you to execute custom logic when the user clicks the action button.
 
 {% tabs %}
 {% highlight C# %}
@@ -78,19 +97,19 @@ private void OpenReplyWindow()
 {% 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.
+## Action Template
 
-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.
+You can customize the appearance of individual action buttons by using the [ActionTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.SfToastNotification.ToastAction.html#Syncfusion_UI_Xaml_SfToastNotification_ToastAction_ActionTemplate) property available in the [ToastAction](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.SfToastNotification.ToastAction.html) class. When a template is assigned, the toast uses the specified template instead of the default action button style.
 
 {% tabs %}
+
 {% highlight XAML %}
 
 <DataTemplate x:Key="CustomizedActionTemplate">
     <Button Style="{StaticResource ToastActionButtonStyle}"
             Margin="4,0,4,0"
-            Width="132" Height="24"
+            Width="132"
+            Height="24"
             HorizontalAlignment="Center"
             Tag="{Binding}"
             Content="{Binding Label}" />
@@ -103,8 +122,10 @@ Custom styles or templates are defined in XAML, and the template’s resource na
     <Setter Property="Padding" Value="6,4" />
     <Setter Property="Width" Value="56" />
     <Setter Property="Height" Value="28" />
- </Style>   
+</Style>
+
 {% endhighlight %}
+
 {% highlight C# %}
 
 SfToastNotification.Show(this, new ToastOptions
@@ -126,4 +147,26 @@ SfToastNotification.Show(this, new ToastOptions
 });
 
 {% endhighlight %}
-{% endtabs %}
+
+{% endtabs %}
+
+## Close Button
+
+You can use the [ShowCloseButton](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.SfToastNotification.ToastItem.html#Syncfusion_UI_Xaml_SfToastNotification_ToastItem_ShowCloseButton) property to specify whether the close button is visible for the toast. The close button is available only in in-app toast modes (`Window` and `Screen`).
+
+{% 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 %}
+
+![SfToastNotification Close Button](Images/CloseButton-image.png)