Advantages of Using Syncfusion WinUI Controls over Framework Controls: Part 1
Tags: csharp, dotnet, winui, desktop
Published: 2022-06-13 11:06:31

---
title: Advantages of Using Syncfusion WinUI Controls over Framework Controls: Part 1
published: true
date: 2022-06-09 09:44:34 UTC
tags: csharp, dotnet, winui, desktop
canonical_url: https://www.syncfusion.com/blogs/post/advantages-of-using-syncfusion-winui-controls-over-framework-controls-part-1.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2022/06/Advantages-of-Using-Syncfusion-WinUI-Controls-over-Framework-Controls-Part-1-672x372.png
---

The [Syncfusion WinUI toolkit](https://www.syncfusion.com/winui-controls "Syncfusion WinUI toolkit") includes feature-rich controls, like [DataGrid](https://www.syncfusion.com/winui-controls/datagrid "WinUI DataGrid"), [Charts](https://www.syncfusion.com/winui-controls/charts "WinUI Charts"), and [TreeView](https://www.syncfusion.com/winui-controls/treeview "WinUI TreeView"), that embody Fluent design for building modern and seamless Windows apps.

Some of Syncfusion’s WinUI controls are also available in the [WinUI framework](https://docs.microsoft.com/en-us/windows/apps/winui/ "WinUI documentation").

<table>
<tbody>
<tr>
<td width="312"><strong>Syncfusion WinUI Controls</strong></td>
<td width="312"><strong>WinUI Framework Controls</strong></td>
</tr>
<tr>
<td width="312"><a title="Syncfusion WinUI NumberBox" href="https://www.syncfusion.com/winui-controls/numberbox">NumberBox</a></td>
<td width="312"><a title="WinUI Number box" href="https://docs.microsoft.com/en-us/windows/apps/design/controls/number-box">NumberBox</a></td>
</tr>
<tr>
<td width="312"><a title="Syncfusion WinUI ComboBox" href="https://www.syncfusion.com/winui-controls/combobox">ComboBox</a></td>
<td width="312"><a title="WinUI Combo box" href="https://docs.microsoft.com/en-us/windows/apps/design/controls/combo-box">ComboBox</a></td>
</tr>
<tr>
<td width="312"><a title="Syncfusion WinUI AutoComplete" href="https://www.syncfusion.com/winui-controls/autocomplete">AutoComplete</a></td>
<td width="312"><a title="WinUI Auto-suggest box" href="https://docs.microsoft.com/en-us/windows/apps/design/controls/auto-suggest-box">AutoSuggest</a></td>
</tr>
<tr>
<td width="312"><a title="Syncfusion WinUI Color Picker" href="https://www.syncfusion.com/winui-controls/color-picker">ColorPicker</a></td>
<td width="312"><a title="WinUI Color picker" href="https://docs.microsoft.com/en-us/windows/apps/design/controls/color-picker">ColorPicker</a></td>
</tr>
<tr>
<td width="312"><a title="Syncfusion WinUI Date Picker" href="https://www.syncfusion.com/winui-controls/date-picker">DatePicker</a></td>
<td width="312"><a title="WinUI Date picker" href="https://docs.microsoft.com/en-us/windows/apps/design/controls/date-picker">DatePicker</a></td>
</tr>
<tr>
<td width="312"><a title="Syncfusion WinUI Time Picker" href="https://www.syncfusion.com/winui-controls/time-picker">TimePicker</a></td>
<td width="312"><a title="WinUI Time picker" href="https://docs.microsoft.com/en-us/windows/apps/design/controls/time-picker">TimePicker</a></td>
</tr>
<tr>
<td width="312"><a title="Syncfusion WinUI Calendar" href="https://www.syncfusion.com/winui-controls/calendar">Calendar</a></td>
<td width="312"><a title="WinUI Calendar view" href="https://docs.microsoft.com/en-us/windows/apps/design/controls/calendar-view">CalendarView</a></td>
</tr>
<tr>
<td width="312"><a title="Syncfusion WinUI Slider" href="https://www.syncfusion.com/winui-controls/slider">Slider</a></td>
<td width="312"><a title="WinUI Sliders" href="https://docs.microsoft.com/en-us/windows/apps/design/controls/slider">Slider</a></td>
</tr>
</tbody>
</table>

Let’s look at the additional features and advantages of Syncfusion’s [NumberBox](https://www.syncfusion.com/winui-controls/numberbox "Syncfusion WinUI NumberBox"), [ComboBox](https://www.syncfusion.com/winui-controls/combobox "Syncfusion WinUI ComboBox"), [AutoComplete](https://www.syncfusion.com/winui-controls/autocomplete "Syncfusion WinUI AutoComplete"), and [ColorPicker](https://www.syncfusion.com/winui-controls/color-picker "Syncfusion WinUI Color Picker") controls over the corresponding WinUI framework controls, as well as the differences between them.

## NumberBox

NumberBox controls are used to get numeric input from an end-user. Let’s see the differences between Syncfusion’s and the WinUI framework’s.

### Input validation

Syncfusion’s **NumberBox** [validates](https://help.syncfusion.com/winui/numberbox/getting-started#editing-the-value "Editing the value in WinUI NumberBox") the input as a user types and doesn’t allow invalid input while editing. The WinUI framework’s **NumberBox** allows any kind of input while editing. It doesn’t validate the input as you type. Input will be validated only after editing is complete.

While editing, Syncfusion’s NumberBox accepts only numeric data. Even prefixes or suffixes, like measurement units, will not be accepted while editing. Once editing is complete, formatting (prefix/suffixes) will be automatically updated.

### Formatting

Syncfusion’s NumberBox control supports all kinds of .NET standard number [formatting](https://help.syncfusion.com/winui/numberbox/formatting "Value formatting with WinUI NumberBox documentation"). You can use this feature to present currency, percentages, measurement units, and more. You can also build a custom format. But the WinUI framework’s NumberBox supports only a limited set of formats.

Let’s see how to apply a [custom format](https://docs.microsoft.com/en-us/dotnet/standard/base-types/standard-numeric-format-strings "Standard numeric format strings in WinUI Framework") in our NumberBox control.

You can apply custom formats using the  **0**  and  **#**  format specifiers. With these format specifiers, you can set the minimum and the maximum numbers of fractional digits using the [CustomFormat ](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Editors.SfNumberBox.html#Syncfusion_UI_Xaml_Editors_SfNumberBox_CustomFormat "CustomFormat property of Syncfusion WinUI NumberBox")property:

- **0** (zero placeholder) replaces the zero with the corresponding digit if a digit exists there. Otherwise, zero appends to the leftmost position of the value.
- **#** (digit placeholder) replaces the # symbol with the corresponding digit if the digit exists. Otherwise, no digit appends the value.

Refer to the following example. The value of the CustomFormat property is  **##.00##**. So, it will allow a maximum of 4 fractional digits and a minimum of 2 integer digits.

```csharp
stockPrice.CustomFormat = "$00.00##";
productDiscount.CustomFormat = "00.00##%";
hoursWorked.CustomFormat = "00.00##";
```

### ![Custom formatting in Syncfusion WinUI NumberBox](https://www.syncfusion.com/blogs/wp-content/uploads/2022/06/Advantages-of-Using-Syncfusion-WinUI-Controls-over-Framework-Controls.png)

### Hide text boxes

Both NumberBox controls support text boxes by default. We can attach a [text box](https://help.syncfusion.com/winui/numberbox/updown-button#textbox-visibility "TextBox visibility property of Syncfusion WinUI NumberBox") in the NumberBox with other controls to increase and decrease the value.

![Syncfusion WinUI NumberBox showing text box](https://www.syncfusion.com/blogs/wp-content/uploads/2022/06/Hide-text-boxes.png)

The WinUI framework’s NumberBox doesn’t allow you to hide the text box. But, Syncfusion’s does, using the [TextBoxVisibility](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Editors.SfNumberBox.html#Syncfusion_UI_Xaml_Editors_SfNumberBox_TextBoxVisibility "TextBoxVisibility property of Syncfusion WinUI NumberBox") property. Refer to the following code example.

```html
<editors:SfNumberBox
         TextBoxVisibility="Colllapsed”/>
```

### ![Hiding text box in Syncfusion WinUI NumberBox](https://www.syncfusion.com/blogs/wp-content/uploads/2022/06/Hide-text-boxesgif2.gif)Culture

We can manually change the [culture](https://help.syncfusion.com/winui/numberbox/formatting#culture-support "Culture support in Syncfusion WinUI NumberBox") of Syncfusion’s NumberBox control. The WinUI framework’s NumberBox control will always follow the application’s culture.

By default, our NumberBox’s culture inherits from the app’s settings. However, you can change the culture using the [Culture](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Editors.SfNumberBox.html#Syncfusion_UI_Xaml_Editors_SfNumberBox_Culture "Culture property of Syncfusion WinUI NumberBox") property.

```csharp
numberBox.Culture = new CultureInfo(“en-us”;
```

**Note:** For more details, refer to the [NumberBox documentation](https://help.syncfusion.com/winui/numberbox/getting-started "Getting Started with Syncfusion WinUI NumberBox").

## ComboBox

ComboBox controls are primarily used to select one item from a list of options. Let’s look at the features available in Syncfusion’s ComboBox control that WinUI framework’s control doesn’t have.

### Filtering

We can easily find items in our ComboBox control using its [filtering functionality](https://help.syncfusion.com/winui/combobox/filtering "Filtering in WinUI ComboBox documentation"). Items in the dropdown will be shortlisted based on the input given while editing.

Our ComboBox control also supports asynchronous filtering. The UI will be responsive, even when you are searching or filtering items from a huge data set.

![Filtering in Syncfusion WinUI ComboBox](https://www.syncfusion.com/blogs/wp-content/uploads/2022/06/Filtering-300x146.png)

To enable filtering in Syncfusion’s ComboBox control, set the [IsFilteringEnabled](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Editors.SfComboBox.html#Syncfusion_UI_Xaml_Editors_SfComboBox_IsFilteringEnabled "IsFilteringEnabled property of Syncfusion WinUI ComboBox") and [IsEditable](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Editors.SfComboBox.html#Syncfusion_UI_Xaml_Editors_SfComboBox_IsEditable "IsEditable property of Syncfusion WinUI ComboBox") properties to true. The dropdown will open automatically as soon as you start typing characters in.

Refer to the following code example.

```html
<editors:SfComboBox x:Name="comboBox"
                        IsEditable="true"
                        IsFilteringEnabled="true">
</editors:SfComboBox>
```

### Multiple selections

You can select one or more items from the dropdown list in our ComboBox control using the [multiple selection feature](https://help.syncfusion.com/winui/combobox/selection#multiple-selection "Multiple selection feature in Syncfusion WinUI ComboBox").

![Multiple Selection Feature in Syncfusion WinUI ComboBox](https://www.syncfusion.com/blogs/wp-content/uploads/2022/06/Multiple-Selection-Feature-in-Syncfusion-WinUI-ComboBox.png)To enable the multi-select mode, set the [SelectionMode](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Editors.SfComboBox.html#Syncfusion_UI_Xaml_Editors_SfComboBox_SelectionMode "SelectionMode property of Syncfusion WinUI ComboBox") property to Multiple, like in the following code example.

```html
<editors:SfComboBox x:Name="comboBox"
                      SelectionMode="Multiple"/>
```

### Grouping

When there are many items to choose from, you can [group items](https://help.syncfusion.com/winui/combobox/grouping "Grouping in Syncfusion WinUI ComboBox") so that it is easy for users to select based on the category.

![Grouping in Syncfusion WinUI ComboBox](https://www.syncfusion.com/blogs/wp-content/uploads/2022/06/Grouping.png)To display grouped data in Syncfusion’s ComboBox, set the [ItemsSource](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Editors.DropDownListBase.html#Syncfusion_UI_Xaml_Editors_DropDownListBase_ItemsSource "ItemsSource property of Syncfusion WinUI ComboBox") property to a **CollectionViewSource** and set its **IsSourceGrouped** property to true. The CollectionViewSource acts as a proxy over the collection class to enable grouping support.

Refer to the following code example.

```html
<editors:SfComboBox x:Name="comboBox">
  <editors:SfComboBox.GroupStyle>
    <GroupStyle>
      <GroupStyle.HeaderTemplate>
        <DataTemplate>
           <Grid>
             <!-- Define content as you wish -->
           </Grid>
        </DataTemplate>
      </GroupStyle.HeaderTemplate>
    </GroupStyle>
  </editors:SfComboBox.GroupStyle>
 </editors:SfComboBox >
```

**Note:** For more details, refer to the [ComboBox documentation](https://help.syncfusion.com/winui/combobox/getting-started "Getting Started with Syncfusion WinUI ComboBox").

## AutoSuggestBox and AutoComplete

Both these controls are like a text box. However, they display suggestions based on user input. Let’s see the advantages of using Syncfusion’s **AutoComplete** control over the **AutoSuggestBox** control.

### Built-in searching

The AutoComplete control has built-in [searching functionality](https://help.syncfusion.com/winui/autocomplete/searching-filtering#searching-based-on-member-path "Searching in Syncfusion WinUI AutoComplete"). You can select an item from the suggestions and use text searching without writing any custom code. However, you can write custom code to override the default searching behavior.

The [TextMemberPath](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Editors.DropDownListBase.html#Syncfusion_UI_Xaml_Editors_DropDownListBase_TextMemberPath "TextMemberPath property of Syncfusion WinUI AutoComplete") and [DisplayMemberPath](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Editors.DropDownListBase.html#Syncfusion_UI_Xaml_Editors_DropDownListBase_DisplayMemberPath "DisplayMemberPath property of Syncfusion WinUI AutoComplete") properties of the AutoComplete control specify the property path, by which the searching must be done when custom data is bound to the **ItemsSource** property.

```html
<editors:SfAutoComplete
         ItemsSource="{Binding data}"
         TextMemberPath="ID"
         DisplayMemberPath="Name"
         Width="250"
         x:Name="autoComplete"/>
```

### Built-in filtering

The AutoComplete control also has built-in [filtering functionality](https://help.syncfusion.com/winui/autocomplete/searching-filtering#filtering-mode "Filtering in Syncfusion WinUI AutoComplete"). The items in a list will be generated based on the user input while editing. You can write custom code for filtering if you want any further customization.

![Built-in filtering in Syncfusion WinUI AutoComplete](https://www.syncfusion.com/blogs/wp-content/uploads/2022/06/Built-in-filtering.png)

You can use the [TextSearchMode](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Editors.SfAutoComplete.html#Syncfusion_UI_Xaml_Editors_SfAutoComplete_TextSearchMode "TextSearchMode property of Syncfusion WinUI AutoComplete") property to regulate the filtering behavior when the control receives user input. The default text filtering type is **StartsWith** , which ignores accent and is case insensitive.

```html
<editors:SfAutoComplete
         TextSearchMode="StartsWith"
         ItemsSource="{Binding SocialMedias}"
         DisplayMemberPath="Name"
         TextMemberPath="Name"
         Width="250"
         x:Name="autoComplete">
</editors:SfAutoComplete>
```

### Multiple selection

You can select more than one item using the [multiple selection feature](https://help.syncfusion.com/winui/autocomplete/selection#multiple-selection "Multiple selection feature in Syncfusion WinUI AutoComplete").

![Multiple selection in Syncfusion WinUI AutoComplete](https://www.syncfusion.com/blogs/wp-content/uploads/2022/06/Multiple-selection3.png)

The AutoComplete control displays suggestions by matching the characters of the entered input to items in the list and enabling us to select them.

You can enable the multi-select mode by setting the [SelectionMode](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Editors.SfAutoComplete.html#Syncfusion_UI_Xaml_Editors_SfAutoComplete_SelectionMode "SelectionMode property of Syncfusion WinUI AutoComplete") property to **Multiple**. Then, the selected items will be displayed with a customizable token representation and you can remove each tokenized item by clicking its close button. The selected items can be retrieved from the [SelectedItems](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Editors.DropDownListBase.html#Syncfusion_UI_Xaml_Editors_DropDownListBase_SelectedItems "SelectedItems property of Syncfusion WinUI AutoComplete") property.

```html
<editors:SfAutoComplete
         SelectionMode="Multiple"
         ItemsSource="{Binding SocialMedias}"
         DisplayMemberPath="Name"
         TextMemberPath="Name"
         Width="250"
         x:Name="autoComplete" />
```

### Grouping

When there are many items to choose from, you can [group items](https://help.syncfusion.com/winui/autocomplete/grouping "Grouping in Syncfusion WinUI AutoComplete") so that it is easy for users to select based on category.

![Grouping in Syncfusion WinUI AutoComplete](https://www.syncfusion.com/blogs/wp-content/uploads/2022/06/Grouping2.png)

To display grouped data in the control, set the [ItemsSource](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Editors.DropDownListBase.html#Syncfusion_UI_Xaml_Editors_DropDownListBase_ItemsSource "ItemsSource property of Syncfusion WinUI AutoComplete") property to a **CollectionViewSource** and set its **IsSourceGrouped** property to true. The CollectionViewSource acts as a proxy over the collection class to enable grouping support. You can also use the Custom filter to customize the grouping.

```html
<editors:SfAutoComplete
    PlaceholderText="Select a Vegetable"
    ItemsSource="{Binding Vegetables}">
    <editors:SfAutoComplete.GroupStyle>
      <GroupStyle>
        <GroupStyle.HeaderTemplate>
          <DataTemplate>
           <Grid>
            <!-- Define content as you wish -->
           </Grid>
          </DataTemplate>
       </GroupStyle.HeaderTemplate>
     </GroupStyle>
   </editors:SfAutoComplete.GroupStyle>
 
</editors:SfAutoComplete>
```

**Note:** For more details, refer to the [AutoComplete documentation](https://help.syncfusion.com/winui/autocomplete/getting-started "Getting Started with Syncfusion WinUI AutoComplete").

## ColorPicker

ColorPicker controls are used to select a precise color. Let’s look at the features available in Syncfusion’s ColorPicker control that the WinUI framework’s control doesn’t have.

### Color models

Syncfusion’s **ColorPicker** control supports four different color models: **RGB** , **HSV** , **HSL** , and **CMYK**. The WinUI framework’s **ColorPicker** control supports only RGB and HSV models.

### Slider

The UI of our ColorPicker control has sliders, which give a preview of the colors corresponding to the values in the color text boxes, like in the following image.

### ![Sliders in Syncfusion WinUI ColorPicker](https://www.syncfusion.com/blogs/wp-content/uploads/2022/06/Slider-300x195.png)

### Gradient brush

Syncfusion’s ColorPicker control supports selecting a linear or radial gradient brush.

#### Linear gradient

A linear gradient brush enables us to adjust the gradient angle to anywhere between 0 and 365 degrees.

![Linear gradient's simple editor](https://www.syncfusion.com/blogs/wp-content/uploads/2022/06/Linear-gradient.png)
<figcaption>Simple editor</figcaption>

![Selected gradient](https://www.syncfusion.com/blogs/wp-content/uploads/2022/06/Linear-gradient2.png)
<figcaption>Selected gradient</figcaption>

#### Radial gradient

A radial gradient enables us to adjust the direction of the gradient using the Direction dropdown.

![Radial gradient's simple editor](https://www.syncfusion.com/blogs/wp-content/uploads/2022/06/Radial-gradient.png)
<figcaption>Simple editor</figcaption>

![Selected gradient](https://www.syncfusion.com/blogs/wp-content/uploads/2022/06/Selected-gradient.png)
<figcaption>Selected gradient</figcaption>

## Additional color controls

Aside from the ColorPicker control, Syncfusion has the following color controls, too:

- **ColorPalette**
- **DropDown ColorPicker** 
- **DropDown ColorPalette**

### ColorPalette

The **ColorPalette** control allows users to select a solid color from a list of [predefined standard palettes](https://help.syncfusion.com/winui/color-palette/theme-colors#select-a-color-from-built-in-theme-colors "Built-in theme colors in Color Palette"). It has 23 different palettes and a More Colors dialog to select a precise color. Also, you can quickly access recently used colors using the **Recent** color palette.

### ![Syncfusion WinUI ColorPalette](https://www.syncfusion.com/blogs/wp-content/uploads/2022/06/ColorPalette.png)DropDown controls

As the ColorPicker and ColorPalette controls take up a huge amount of space, the [DropDown ColorPicker](https://www.syncfusion.com/winui-controls/dropdown-color-picker "Syncfusion WinUI Dropdown Color Picker") and [DropDown ColorPalette](https://www.syncfusion.com/winui-controls/dropdown-color-palette "Syncfusion WinUI DropDown ColorPalette") were created to host these color controls inside a dropdown control.

**Note:** For more details, refer to the [ColorPicker](https://help.syncfusion.com/winui/color-picker/getting-started "Getting Started with Syncfusion WinUI Color Picker"), [DropDown ColorPicker](https://help.syncfusion.com/winui/dropdown-color-picker/getting-started "Getting Started with Syncfusion WinUI DropDown Color Picker"), [ColorPalette](https://help.syncfusion.com/winui/color-palette/getting-started "Getting Started with Syncfusion WinUI Color Palette"), and [DropDown ColorPalette](https://help.syncfusion.com/winui/dropdown-color-palette/getting-started "Getting Started with Syncfusion WinUI DropDown Color Palette") documentation.

## Summary

Thanks for reading! We just saw the differences between four Syncfusion WinUI controls and WinUI Framework controls. I will compare a few more controls in the next blog. To see more, you can download and check out [our demo app in the Windows Store](https://www.microsoft.com/en-us/p/syncfusion-winui-controls-gallery/9n0fp16ddc06 "Syncfusion WinUI Controls Gallery on Microsoft Store").

For existing customers, the newest version of Essential Studio is available for download from the [license and downloads page](https://www.syncfusion.com/account/downloads "License and download page of Essential Studio"). If you are not yet a customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads "Free evaluation of the Syncfusion Essential Studio") to check out these new features.

For questions, you can contact us through our [support forums](https://www.syncfusion.com/forums "Syncfusion support forum"), [feedback portal](https://www.syncfusion.com/feedback "Syncfusion Feedback Portal"), or [support portal](https://support.syncfusion.com/ "Syncfusion support portal"). We are always happy to assist you!