---
title: "Advantages of Using Syncfusion WinUI Controls over Framework Controls: Part 1"
published_at: "2022-06-09T09:44:34+00:00"
modified_at: "2026-01-09T08:54:23+00:00"
url: "https://www.syncfusion.com/blogs/post/advantages-of-using-syncfusion-winui-controls-over-framework-controls-part-1"
excerpt: "The Syncfusion WinUI toolkit includes feature-rich controls, like DataGrid, Charts, and 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. Syncfusion WinUI Controls WinUI Framework..."
taxonomy_category:
  - "Desktop"
  - "Development"
  - "Microsoft"
  - "Syncfusion"
  - "WinUI"
taxonomy_post_tag:
  - "desktop"
  - "Microsoft"
  - "Syncfusion"
  - "UI controls"
  - "WinUI"
---

# Advantages of Using Syncfusion WinUI Controls over Framework Controls: Part 1

[Jegan R](https://www.syncfusion.com/blogs/author/jeganr)

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


The [Syncfusion WinUI toolkit](https://www.syncfusion.com/winui-controls)
 includes feature-rich controls, like [DataGrid](https://www.syncfusion.com/winui-controls/datagrid)
, [Charts](https://www.syncfusion.com/winui-controls/charts)
, and [TreeView](https://www.syncfusion.com/winui-controls/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/)
.

| Syncfusion WinUI Controls | WinUI Framework Controls |
| --- | --- |
| NumberBox | NumberBox |
| ComboBox | ComboBox |
| AutoComplete | AutoSuggest |
| ColorPicker | ColorPicker |
| DatePicker | DatePicker |
| TimePicker | TimePicker |
| Calendar | CalendarView |
| Slider | Slider |

Let’s look at the additional features and advantages of Syncfusion’s [NumberBox](https://www.syncfusion.com/winui-controls/numberbox)
, [ComboBox](https://www.syncfusion.com/winui-controls/combobox)
, [AutoComplete](https://www.syncfusion.com/winui-controls/autocomplete)
, and [ColorPicker](https://www.syncfusion.com/winui-controls/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)
 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)
. 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)
 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)
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.

```
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)
 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)
 property. Refer to the following code example.

```
<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)
 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)
 property.

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

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

## 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)
. 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)
 and [IsEditable](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Editors.SfComboBox.html#Syncfusion_UI_Xaml_Editors_SfComboBox_IsEditable)
 properties to true. The dropdown will open automatically as soon as you start typing characters in.

Refer to the following code example.

```
<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](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)
 property to Multiple, like in the following code example.

```
<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)
 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)
 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.

```
<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)
.

## 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)
. 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)
 and [DisplayMemberPath](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Editors.DropDownListBase.html#Syncfusion_UI_Xaml_Editors_DropDownListBase_DisplayMemberPath)
 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.

```
<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)
. 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)
 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.

```
<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 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)
 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)
 property.

```
<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)
 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)
 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.

```
<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)
.

## 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)

Simple editor

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

Selected gradient

#### 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)

Simple editor

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

Selected gradient

## 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)
. 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)
 and [DropDown ColorPalette](https://www.syncfusion.com/winui-controls/dropdown-color-palette)
 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)
, [DropDown ColorPicker](https://help.syncfusion.com/winui/dropdown-color-picker/getting-started)
, [ColorPalette](https://help.syncfusion.com/winui/color-palette/getting-started)
, and [DropDown ColorPalette](https://help.syncfusion.com/winui/dropdown-color-palette/getting-started)
 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)
.

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)
. If you are not yet a customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads)
 to check out these new features.

For questions, you can contact us through our [support forums](https://www.syncfusion.com/forums)
, [feedback portal](https://www.syncfusion.com/feedback)
, or [support portal](https://support.syncfusion.com/?_gl=1*89edrd*_ga*MTc3NTk2OTU1MC4xNjQ1MjA1MTE2*_ga_WC4JKKPHH0*MTY1MzI3NDk0Mi4zMjMuMS4xNjUzMjc1MTI1LjA.)
. We are always happy to assist you!

## Related blogs

- [Achieve Google-Like Autosuggestions with the WinUI AutoComplete Control](https://www.syncfusion.com/blogs/post/achieve-google-like-autosuggestions-with-the-winui-autocomplete-control.aspx)
- [What’s New in 2022 Volume 1: WPF and WinUI](https://www.syncfusion.com/blogs/post/whats-new-in-2022-volume-1-wpf-and-winui.aspx)
- [Develop an EMI Calculator WinUI Application [Webinar Show Notes]](https://www.syncfusion.com/blogs/post/develop-an-emi-calculator-winui-application-webinar-show-notes.aspx)
- [Multiple Selection Made Easy Using the WinUI 3 ComboBox Control](https://www.syncfusion.com/blogs/post/multiple-selection-winui-3-combobox-control.aspx)
- [Pick Colors Like a Boss Using Syncfusion Color Controls in WinUI](https://www.syncfusion.com/blogs/post/pick-colors-like-a-boss-using-syncfusion-color-controls-in-winui.aspx)