Skip to content

Task(WF-1047337) UG documentation changes for Tools controls #2595

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
durga-muthu merged 10 commits into from
Aug 28, 2026
Merged

Task(WF-1047337) UG documentation changes for Tools controls #2595

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
2137fb7
UG doc changes for WPF CheckListBox, CurrencyTextBox and Tabbed-MDI-Form
harinath-2699 Aug 13, 2026
06a01b6
Changes for DoubleTextBox and IntegerTexbox
harinath-2699 Aug 17, 2026
c5487b7
Reviewed the changes for Badge, Calculator, ColorPalette, PercentTextBox
harinath-2699 Aug 18, 2026
63b6f85
Reviewed and committed changes for ColorPickerPalette, ColorPicker, D…
harinath-2699 Aug 24, 2026
cb44d1d
Merge branch 'hotfix/hotfix-v34.2.2' into 1047337-UG-doc-changes-hotfix
harinath-2699 Aug 24, 2026
0a5c37e
Reviewed and committed changes for DoubleTextBox and IntegerTextBox
harinath-2699 Aug 24, 2026
3ec708c
Reviewed and committed changes for CheckListBox and CurrencyTextBox
harinath-2699 Aug 24, 2026
05256bc
Reviewed and committed the changes for DocumentContainer
harinath-2699 Aug 24, 2026
ca724eb
Update Setting-Window-Switchers.md
harinath-2699 Aug 24, 2026
338500d
Fixed the CI frontmatter and spelling errors
harinath-2699 Aug 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 20 additions & 8 deletions wpf/Badge/Alignment-positioning.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ This section explains the alignment and positioning functionalities available in

## Alignment of Badge

you can align the `Badge` either horizontally or vertically by using the `HorizontalAlignment` or `VerticalAlignment` properties. The default value of `HorizontalAlignment` property is `Right` and `VerticalAlignment` property is `Top`.
You can align the `Badge` either horizontally or vertically by using the `HorizontalAlignment` or `VerticalAlignment` properties. The default value of the `HorizontalAlignment` property is `Right` and the `VerticalAlignment` property is `Top`.

<style>
table, td, th {
Expand Down Expand Up @@ -98,9 +98,21 @@ N> Download demo application from [GitHub](https://github.com/SyncfusionExamples

## Positioning of Badge

You can change the horizontal or vertical position of the `Badge` either inside, outside or in the middle by using the [HorizontalAnchor](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Notification.SfBadge.html#Syncfusion_Windows_Controls_Notification_SfBadge_HorizontalAnchor) and [VerticalAnchor](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Notification.SfBadge.html#Syncfusion_Windows_Controls_Notification_SfBadge_VerticalAnchor) properties. It will be placed based on the value of `HorizontalAlignment` and `VerticalAlignment` properties. The default value of `HorizontalAnchor` and `VerticalAnchor` properties is `Center`.
You can change the horizontal or vertical position of the `Badge` to inside, center, outside, or custom by using the [HorizontalAnchor](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Notification.SfBadge.html#Syncfusion_Windows_Controls_Notification_SfBadge_HorizontalAnchor) and [VerticalAnchor](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Notification.SfBadge.html#Syncfusion_Windows_Controls_Notification_SfBadge_VerticalAnchor) properties. The `Badge` is placed based on the value of the `HorizontalAlignment` and `VerticalAlignment` properties. The default value of the `HorizontalAnchor` and `VerticalAnchor` properties is `Center`.

For example, you will change the `HorizontalAnchor` and `VerticalAnchor` property values on when the value of `HorizontalAlignment` properties is `Right` and `VerticalAlignment` property is `Top`. `Badge` will be positioned as follows,
The table below shows the positioning behavior when `HorizontalAlignment="Right"` and `VerticalAlignment="Top"`. The C# `BadgeAnchor` enum ([API reference](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Notification.BadgeAnchor.html)) provides the following values: `Inside`, `Center`, `Outside`, and `Custom`.

| HorizontalAnchor | VerticalAnchor | Behavior on a `Right` / `Top`-aligned badge |
|------------------|----------------|----------------------------------------------|
| `Inside` | `Inside` | The badge is moved into the container. |
| `Center` | `Inside` | The badge is centered on the horizontal edge.|
| `Outside` | `Inside` | The badge is moved out of the container. |
| `Inside` | `Center` | The badge is centered on the vertical edge. |
| `Center` | `Center` | The badge is centered on the corner. |
| `Outside` | `Center` | The badge is centered past the corner. |
| `Inside` | `Outside` | The badge is moved further into the container.|
| `Center` | `Outside` | The badge is centered further out. |
| `Outside` | `Outside` | The badge is moved furthest from the corner. |

<style>
table, td, th {
Expand Down Expand Up @@ -171,11 +183,11 @@ badge.Content = "10";

N> Download demo application from [GitHub](https://github.com/SyncfusionExamples/syncfusion-wpf-badge-control-examples/blob/main/Samples/Badge_Features)

## Place the Badge any where on the container
## Place the Badge anywhere on the container

If you want to place the `Badge` anywhere on any shaped container, use the [HorizontalPosition](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Notification.SfBadge.html#Syncfusion_Windows_Controls_Notification_SfBadge_HorizontalPosition) or [VerticalPosition](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Notification.SfBadge.html#Syncfusion_Windows_Controls_Notification_SfBadge_VerticalPosition) properties. The value range for `HorizontalPosition` and `VerticalPosition` properties is `0` to`1`. The default value of `HorizontalPosition` property is `1` and `VerticalPosition` property is `0`.
If you want to place the `Badge` anywhere on any shaped container, use the [HorizontalPosition](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Notification.SfBadge.html#Syncfusion_Windows_Controls_Notification_SfBadge_HorizontalPosition) or [VerticalPosition](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Notification.SfBadge.html#Syncfusion_Windows_Controls_Notification_SfBadge_VerticalPosition) properties. The values are relative to the badge's parent container: `0` represents the left/top edge and `1` represents the right/bottom edge. The valid range is `0` to `1`. The default value of the `HorizontalPosition` property is `1` and the `VerticalPosition` property is `0`.

For example, if you use any circular containers, you can easily place the `Badge` anywhere by using the `HorizontalPosition` and `VerticalPosition` properties.
For example, if you use a circular container, you can easily place the `Badge` anywhere on its perimeter by using the `HorizontalPosition` and `VerticalPosition` properties.

{% tabs %}
{% highlight XAML %}
Expand Down Expand Up @@ -213,7 +225,7 @@ N> Download demo application from [GitHub](https://github.com/SyncfusionExamples

## Custom alignment and positioning of Badge

You can customize the horizontal or vertical position of the `Badge` either inside, outside or in the middle with any point by using the `HorizontalPosition` & `VerticalPosition` properties and [HorizontalAnchorPosition](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Notification.SfBadge.html#Syncfusion_Windows_Controls_Notification_SfBadge_HorizontalAnchorPosition) & [VerticalAnchorPosition](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Notification.SfBadge.html#Syncfusion_Windows_Controls_Notification_SfBadge_VerticalAnchorPosition) properties. This will effective only on by setting the `HorizontalAnchor` and `VerticalAnchor` properties value as `Custom`. The value range for `HorizontalAnchorPosition` and `VerticalAnchorPosition` properties is `0` to`1`. The default value of `HorizontalAnchorPosition`and `VerticalAnchorPosition` properties is `0`.
You can customize the horizontal or vertical position of the `Badge` to any point by using the `HorizontalPosition` and `VerticalPosition` properties together with the [HorizontalAnchorPosition](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Notification.SfBadge.html#Syncfusion_Windows_Controls_Notification_SfBadge_HorizontalAnchorPosition) and [VerticalAnchorPosition](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Notification.SfBadge.html#Syncfusion_Windows_Controls_Notification_SfBadge_VerticalAnchorPosition) properties. This is effective only when the `HorizontalAnchor` and `VerticalAnchor` properties are set to `Custom`. The valid range for both `HorizontalAnchorPosition` and `VerticalAnchorPosition` properties is `0` to `1`. The default value of the `HorizontalAnchorPosition` and `VerticalAnchorPosition` properties is `0`.

<style>
table, td, th {
Expand Down Expand Up @@ -295,7 +307,7 @@ N> Download demo application from [GitHub](https://github.com/SyncfusionExamples

## Badge content alignment

you can place the `Badge` content either horizontally or vertically by using the `HorizontalContentAlignment` or `VerticalContentAlignment` properties. The default value of `HorizontalContentAlignment` and `VerticalContentAlignment` properties is `Center`.
You can place the `Badge` content either horizontally or vertically by using the `HorizontalContentAlignment` or `VerticalContentAlignment` properties. The default value of the `HorizontalContentAlignment` and `VerticalContentAlignment` properties is `Center`.

{% tabs %}
{% highlight XAML %}
Expand Down
81 changes: 37 additions & 44 deletions wpf/Badge/Badge-Customization.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ Here, `Badge` control added for the `Button` control.
{% endhighlight %}
{% highlight C# %}

/Creating Badge control
//Creating Badge control
SfBadge sfBadge = new SfBadge();
sfBadge.Name = "badge";
sfBadge.Content = 10;
Expand All @@ -57,44 +57,36 @@ N> Download demo application from [GitHub](https://github.com/SyncfusionExamples

You can directly add the `Badge` to any objects without using the `SfBadge.Badge` container.

The C# sample below defines a `MailItem` class and a `ViewModel` that exposes a list of `MailItem` instances. Place both classes in your project (for example, in a `Models` folder) and add an `xmlns:local` namespace mapping in the XAML that points to the namespace where these classes live.

{% tabs %}
{% highlight C# %}

public class MailItem
using System.Collections.Generic;

namespace GettingStarted.Models
{
public string ItemName { get; set; }
public int? UnreadMessageount { get; set; }
}
public class MailItem
{
public string ItemName { get; set; }
public int? UnreadMessageCount { get; set; }
}

public class ViewModel {
public List<MailItem> MailItems { get; set; }
public ViewModel(){
MailItems = new List<MailItem>();
MailItems.Add(new MailItem()
{
ItemName = "Inbox",
UnreadMessageount = 20
});
MailItems.Add(new MailItem()
{
ItemName = "Drafts",
UnreadMessageount = null
});
MailItems.Add(new MailItem()
{
ItemName = "Sent Items",
UnreadMessageount = 5
});
MailItems.Add(new MailItem()
{
ItemName = "Deleted Items",
UnreadMessageount = null
});
MailItems.Add(new MailItem()
public class ViewModel
{
public List<MailItem> MailItems { get; set; }

public ViewModel()
{
ItemName = "Junk Email",
UnreadMessageount = null
});
MailItems = new List<MailItem>
{
new MailItem { ItemName = "Inbox", UnreadMessageCount = 20 },
new MailItem { ItemName = "Drafts", UnreadMessageCount = null },
new MailItem { ItemName = "Sent Items", UnreadMessageCount = 5 },
new MailItem { ItemName = "Deleted Items", UnreadMessageCount = null },
new MailItem { ItemName = "Junk Email", UnreadMessageCount = null }
};
}
}
}

Expand Down Expand Up @@ -129,7 +121,7 @@ public class ViewModel {
Height="20"
Width="40"
Background="Orange"
Content="{Binding UnreadMessageount}"
Content="{Binding UnreadMessageCount}"
Shape="Oval"/>
</Grid>
</DataTemplate>
Expand Down Expand Up @@ -254,7 +246,7 @@ N> Download demo application from [GitHub](https://github.com/SyncfusionExamples

## Custom colors for displaying the badges

If you want to change the background color of the `Badge` other than the default `Fill` colors, use the `Background` property. You can also change foreground of the `Badge` by using the `Foreground` property. The default value of `Background` and `Foreground` properties is `null`.
If you want to change the background color of the `Badge` other than the default `Fill` colors, use the `Background` property. You can also change the foreground of the `Badge` by using the `Foreground` property. The default value of the `Background` and `Foreground` properties is `null`.

{% tabs %}
{% highlight XAML %}
Expand Down Expand Up @@ -286,7 +278,7 @@ N> Download demo application from [GitHub](https://github.com/SyncfusionExamples

## Predefined shapes for displaying the Badge

You can change the default shape to either `Rectangle`, `Oval` or `Ellipse` by using [Shape](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Notification.SfBadge.html#Syncfusion_Windows_Controls_Notification_SfBadge_Shape) property. If you want to display the `Badge` content without any default shapes , use the `Shape` property value as `None`. The default value of `Shape` property is `Ellipse`.
You can change the default shape to either `Rectangle`, `Oval`, or `Ellipse` by using the [Shape](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Notification.SfBadge.html#Syncfusion_Windows_Controls_Notification_SfBadge_Shape) property. If you want to display the `Badge` content without any default shape, use the `Shape` property value as `None`. The default value of the `Shape` property is `Ellipse`.

![WPF Badge Default Shapes](Getting-Started_images/wpf-badge-predefined-shapes.png)

Expand Down Expand Up @@ -343,7 +335,7 @@ N> Download demo application from [GitHub](https://github.com/SyncfusionExamples

## Animate when content changes

You can enable the `Scale` or `Opacity` based animation for displaying the `Badge` text by using [AnimationType](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Notification.SfBadge.html#Syncfusion_Windows_Controls_Notification_SfBadge_AnimationType) property. You can only see the animation when you change the text of the `Badge`. The default value of `AnimationType` property is `None`.
You can enable the `Scale` or `Opacity` based animation for displaying the `Badge` text by using the [AnimationType](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Notification.SfBadge.html#Syncfusion_Windows_Controls_Notification_SfBadge_AnimationType) property. You can only see the animation when you change the text of the `Badge`. The default value of the `AnimationType` property is `None`.

{% tabs %}
{% highlight XAML %}
Expand All @@ -367,6 +359,7 @@ You can enable the `Scale` or `Opacity` based animation for displaying the `Badg
Value="1"
x:Name="badgeContent"
ValueChanged="BadgeContent_ValueChanged"/>
</StackPanel>

{% endhighlight %}
{% highlight C# %}
Expand Down Expand Up @@ -432,7 +425,7 @@ N> Download demo application from [GitHub](https://github.com/SyncfusionExamples

## Display number formatting

You can format the numbers which are displayed in the `Badge` content by using the converters. For example, you can display the number as `99+` which is greater than or equal to `100`.
You can format the numbers which are displayed in the `Badge` content by using conditional logic in an event handler or value converter. For example, you can display the number as `99+` for any value greater than or equal to `100`.

{% tabs %}
{% highlight XAML %}
Expand All @@ -456,12 +449,12 @@ You can format the numbers which are displayed in the `Badge` content by using t
NumberDecimalDigits="0"
Value="1"
x:Name="badgeContent"
ValueChanged="BadgeContent_ValueChanged"/>
ValueChanged="BadgeContent_ValueChanged"/>
</StackPanel>

{% endhighlight %}
{% highlight C# %}


badge.AnimationType = BadgeAnimationType.None;
badge.Shape = BadgeShape.Ellipse;
badgeContent.ValueChanged += BadgeContent_ValueChanged;
Expand All @@ -474,7 +467,7 @@ badgeContent.ValueChanged += BadgeContent_ValueChanged;

private void BadgeContent_ValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
int content_Value =Convert.ToInt32(e.NewValue);
int content_Value = Convert.ToInt32(e.NewValue);
if (content_Value <= 99)
{
this.badge.Content = content_Value.ToString();
Expand Down Expand Up @@ -542,7 +535,7 @@ N> Download demo application from [GitHub](https://github.com/SyncfusionExamples

## Text formatting

You can change the style, size and font family of the `Badge` display content by using the `FontFamily`, `FontStyle` and `FontSize` properties. The default value of `FontFamily` property is `Segoe UI`, `FontStyle` property is `Normal` and `FontSize` property is `14`.
You can change the style, size, and font family of the `Badge` display content by using the `FontFamily`, `FontStyle`, and `FontSize` properties. The default value of the `FontFamily` property is `Segoe UI`, the `FontStyle` property is `Normal`, and the `FontSize` property is `14`. Valid `FontStyle` values are `Normal`, `Italic`, and `Oblique`.

{% tabs %}
{% highlight XAML %}
Expand Down Expand Up @@ -577,7 +570,7 @@ N> Download demo application from [GitHub](https://github.com/SyncfusionExamples

## Change opacity of Badge

You can change opacity of the `Badge` by using the `Opacity` property. Value range of `Opacity` property is `0` to `1`. The default value of `Opacity` property is `1`.
You can change the opacity of the `Badge` by using the `Opacity` property. The valid value range of the `Opacity` property is `0` to `1`. The default value of the `Opacity` property is `1`.

{% tabs %}
{% highlight XAML %}
Expand Down Expand Up @@ -607,7 +600,7 @@ N> Download demo application from [GitHub](https://github.com/SyncfusionExamples

## Hide the Badge

You can hide the `Badge` by setting the `Visibility` property value as `Collapsed`. Badge will be hidden when its content is `null`. The default value of `Visibility` property is `Visible`.
You can hide the `Badge` by setting the `Visibility` property value to `Collapsed`. The `Badge` will also be hidden automatically when its content is `null`. The default value of the `Visibility` property is `Visible`.

{% tabs %}
{% highlight XAML %}
Expand Down
Loading