The Definitive Guide to C# .NET UI Controls

.NET is a collection of many UI frameworks (or platforms) built upon the same C# libraries that empower developers to build software applications that reach the maximum number of users across desktop, web, and mobile devices

• WinForms (Windows Forms) is the original .NET platform for building desktop applications for Windows PCs. WinForms UIs are defined by writing extensive C# code — a process made easier using the Visual Studio designer.
• WPF (Windows Presentation Foundation) was released with .NET 3.0 as a potential replacement for WinForms. It uses XAML (similar to XML) to define and separate the user interface from business logic.
• WinUI is used to create modern, Universal Windows applications, otherwise known as Microsoft Store apps. It uses XAML UI components, which are similar to WPF.
• ASP.NET Core is a complete web framework UI that enables developers to build server-side websites with varying levels of client-side interactivity through Razor Pages, MVC, and Blazor.
• Blazor is part of the ASP.NET Core web app framework for building interactive web apps using C# .NET UI controls. Using WebAssembly, you can render pages on the server traditionally or entirely on the client.
• .NET MAUI (Multi-platform App UI) is a cross-platform framework for creating native mobile (iOS, Android) and desktop (WinUI, MacOS) apps with C# and XAML UI.

Each .NET platform offers UI controls and other functionalities unique to its capabilities. For instance, desktop platforms like WinForms and WPF can use Windows user interface libraries such as Win32, GDI+, and DirectX. Web UI platforms like ASP.NET Core MVC and Blazor rely on browser technologies like HTML, JavaScript, and CSS. MAUI adds a C# .NET UI component layer on top of mobile device frameworks like Java for Android and Swift for iOS & Mac.

About C# .NET
C# .NET is a version of the C programming language developed by Microsoft and released with .NET. As one of its original names, COOL (C-like Object-Oriented Language), implied, it is basically an object-oriented version of C. It’s evolved over the past 20 years to do a lot more. All .NET UI controls are written in and implemented with C# .NET or VB.NET, a .NET implementation of the classic Visual Basic programming language.

.NET UI Controls

UI (user interface) controls are reusable components that comprise the application interface. Essentially, they are the various visual elements used to display data and collect user input for an application.

.NET has historically made building UIs easy, thanks to the Visual Studio development environment. Visual Studio provides the most productive way to create application UIs by enabling drag-and-drop of controls to design the interface.

Standard .NET Controls
The native controls of any .NET platform are often referred to as “standard” controls. These controls are a part of the base .NET libraries. For desktop platforms, these controls originate from the Windows OS.

Standard .NET controls typically fall into three main categories: input, layout, and data display.

• Input controls are used to collect input from the user or provide text editing.
• Layout controls define the window or frame layout, including containers and toolbars.
• Data controls are used to display and sometimes edit collections of data.

Below is a table showing which .NET controls exist for each Windows desktop framework.

For some platforms, you could divide further into more groups like scheduling, navigation, and media. Plus, other controls are omitted, including non-UI components and dialogs that don’t display on the form but can impact the application’s usability. For complete lists of UI controls, check out the .NET documentation.

Standard Web and Mobile Controls
.NET UI controls in web applications all must produce HTML and JavaScript since that is what browsers can render. This includes input, buttons, images, selects, rich text, and hyperlinks. HTML layout can be achieved using elements like divs, tables, and repeaters.

For mobile, these controls come from the native mobile APIs. The mobile .NET MAUI platform adds a layer over top of iOS, Android, WinUI, and MacOS, providing a “lowest common denominator” set of UI controls. For example, the MAUI StackLayout control is similar to the XAML StackPanel but gets its name from the Android control of the same name. It actually uses the StackPanel for WinUI and the UIStackView for native iOS underneath. The complete control set is similar to WinUI, but with some exceptions.

Third-Party .NET Controls and Components
Microsoft made the .NET frameworks extensible, allowing developers to extend the capabilities of their applications. Developers and companies alike have been developing new controls that fill the gap and do more than the standard .NET UI controls.

You can find custom UI controls on GitHub or invest in larger sets of professionally designed controls from companies like Infragistics, MESCIUS (formerly GrapeCity), Progress (formerly Telerik), and DevExpress.

Third-party control suites typically fill the gap for input controls, as well as provide new and innovative layout and data-centric controls.

Advanced .NET Input Controls
Custom third-party input controls typically fill the gap in the UI framework. This may include autocomplete controls, color pickers, tag editors, rich text editors, and advanced date range selectors.

Advanced .NET Layout Controls
Companies have expanded the options for layout controls to deliver new experiences, such as collapsing panels, accordions, ribbons, and docking tab layouts similar to Visual Studio.

Advanced .NET Data Controls
Data controls are where most third-party control suites shine because it’s the most incomplete area covered by the standard controls. In addition to providing more built-in features for datagrids, they add additional data-centric controls like pivot tables, event schedulers, diagrams, report generators, Gantt views, and more powerful charting controls.

Working with C# .NET Controls

Microsoft Visual Studio is the tool you use to build .NET applications and write C# or VB.NET code. Let’s see how you can work with the UI controls in each .NET framework.

Working with WinForms Controls
UI controls can be added to a Windows Form by dragging and dropping them from the toolbox. Visual Studio generates the code-behind that instantiates and positions the controls. Writing this code yourself would not be too difficult, but it is very tedious. The Visual Studio Windows Form designer saves a lot of time here.

Working with XAML UI Controls
XAML-based platforms like WPF, UWP, WinUI, and .NET MAUI all work the same, with only nuanced differences in the XAML and controls. Controls can be dragged from the toolbox to the design surface or directly into the XAML markup.

The XAML UI markup is intended to be edited directly or through the design view since XAML is more user-friendly than the Windows form-generated code.

Working with ASP.NET Core UI Controls
Razor Pages are the primary way to define UI for ASP.NET Core, MVC, and Blazor applications. They are a mix of HTML snippets and C#. There is no toolbox with controls, but you can use the toolbox to save reusable HTML snippets.

Of course, web apps can also contain pages created with pure HTML and JavaScript. The project makes it easier to develop web apps by generating just a few templates that include the full HTML required by the browser. It allows you to develop web pages and Razor components focusing just on the content for that page.

There’s also no design preview for Razor Pages. The average web developer will tell you that they just use the browser itself with Developer Tools and Inspect Page to preview and debug their work.

Data Binding C# .NET Controls
The primary purpose of the UI controls is to collect input and display data to the user. While the code supports straightforward “getting and setting” values, the preferred approach to data population is known as data binding. When controls are data bound, the framework handles most of the boilerplate back and forth. You simply have to specify what collection and field to bind.

With MVC (Model-View-Controller) and MVVM (Model-View-ViewModel) architectures, we specify a Model class for each business object (table in our data set). The UI controls are then bound to a collection of the business objects through the Controller or ViewModel.

Let’s see how to data bind a collection in each platform. Consider the following C# class for WeatherForecast taken from the default Blazor project template.

public class ViewModel
{
    private WeatherForecast[]? _forecasts;
    public WeatherForecast[]? Forecasts
    {
        get
        {
            if(_forecasts == null)
            {
                var startDate = DateOnly.FromDateTime(DateTime.Now);
                var summaries = new[] { "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" };
                _forecasts = Enumerable.Range(1, 5).Select(index => new WeatherForecast
                {
                    Date = startDate.AddDays(index),
                    TemperatureC = Random.Shared.Next(-20, 55),
                    Summary = summaries[Random.Shared.Next(summaries.Length)]
                }).ToArray();
            }
            return _forecasts;
        }
    }
}

public class WeatherForecast
{
    public DateOnly Date { get; set; }
    public int TemperatureC { get; set; }
    public string? Summary { get; set; }
    public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
}

Data Binding the WinForms DataGridView:
At design time, WinForms controls rely on a BindingSource component, which acts as an intermediary that provides binding and currency management services. You bind the BindingSource to a collection of your objects, then set the DataSource property of your UI control to the BindingSource. However, you can simply set it in code to any collection that inherits IList, IBindingList, or IEnumerable. Note that the code above returns an IEnumerable array and that the different collection types provide different data features.

dataGridView1.DataSource = Forecasts;

Data Binding the WPF DataGrid:
WPF and WinUI follow the same rules as WinForms. You can set the data source in code or in XAML through the UI control’s ItemsSource property. With datagrid controls, the columns are typically autogenerated. WPF and other XAML frameworks make it easier to follow MVVM, as you can set the DataContext for a page or window that its children can easily bind to. Note that the code above is put into a local class named ViewModel in this example.

<Window ...>
    <Window.DataContext>
        <local:ViewModel/>
    </Window.DataContext>
    <Grid>
        <DataGrid x:Name="dataGrid" ItemsSource="{Binding Forecasts}"/>
    </Grid>
</Window>

Data Binding the ASP.NET Core Blazor Table:
More code is needed to bind an HTML table to our collection. The example below mixes C# with a basic HTML table in a Razor component page. You can find this full example when you create a blank Blazor Web App in Visual Studio.

<PageTitle>Weather</PageTitle>
<h1>Weather</h1>
<p>This component demonstrates showing data.</p>
<table class="table">
    <thead>
        <tr>
            <th>Date</th>
            <th>Temp. (C)</th>
            <th>Temp. (F)</th>
            <th>Summary</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var forecast in forecasts)
        {
            <tr>
                <td>@forecast.Date.ToShortDateString()</td>
                <td>@forecast.TemperatureC</td>
                <td>@forecast.TemperatureF</td>
                <td>@forecast.Summary</td>
            </tr>
        }
    </tbody>
</table>

@code {
    private WeatherForecast[]? forecasts;
    ...
}

If you’re looking for a full-featured datagrid control for ASP.NET Core MVC or Blazor, you should check out the ComponentOne ASP.NET Core controls. Third-party controls require additional licensing, but there’s added value, especially for web platforms that lack advanced UI controls.

.NET Controls Appearance and Styling
After data binding, the next thing you do with UI controls is configure them to look nice in your application. The three core frameworks (WinForms, XAML, and ASP.NET Core) each have different approaches to customizing the appearance and style of the UI controls. This section breaks down the basic principles.

WinForms Visual Styles
Windows Forms originated with the first version of the .NET Framework. However, over the past two decades, the overall look and feel of the application is not something that Microsoft has invested a lot of tooling into.

But it’s not a complete oversight. A desktop application is typically used for internal operations and productivity apps, and most users are happy with a standard “Windows Style” look designed to match their operating system. WinForms UI controls inherit their style from the system colors. Unfortunately, we can’t easily customize the system colors for a single application. Or at least it’s not recommended because it means messing with the user’s settings.

So what’s the solution? To customize the look of a WinForms UI control beyond its API, you must inherit the control and create your own version that can override the low-level rendering. This is not a typical task for a .NET developer, which is why third-party WinForms UI controls are very popular.

.NET WinForms control suites often include built-in themes and tools to customize the theme for you. For example, check out these advanced WinForms UI controls.

Custom WPF Themes
XAML-based components are inherently more customizable due to the nature of XAML. Firstly, there are Styles that encapsulate properties into reusable resources (i.e., you can design one style that is applied across an entire application). But Styles are still limited to the UI controls API. Suppose you need to customize a UI control further. In that case, you can customize its XAML template, which is generally considered a step easier than overriding WinForms renderers but still not the easiest task for the average developer. Many third-party libraries offer a rich API for appearance customization that saves development time.

ComponentOne WPF controls provide extensive brush and color properties that allow you to customize the look of controls without even needing themes or custom templates. Plus, some built-in themes, such as Google’s Material and Microsoft Office-inspired themes, are provided.

ASP.NET Core Styles
All standard web UI controls are based on HTML elements that support CSS (cascading style sheets) as the style language. If you use third-party libraries, these will provide a simplified set of CSS classes that you can use and customize easily.

Building Custom C# .NET Controls

The beauty of .NET is its extensibility. A custom UI control begins as a C# class. Then, you add some public properties that the user (you or another developer) can modify. Finally, you need to provide some special methods that handle things like rendering and recycling.

Depending on how complex your custom control is, you may be able to take advantage of the .NET UserControl class. This class does a lot of the work for you, allowing you to focus directly on the logic. UserControls are often built using a combination of other existing UI controls, but they allow you to embed your own custom logic into a reusable package.

Custom .NET Controls: Buy vs Build
As companies entered the .NET ecosystem, they began developing better and more powerful controls than the standard ones. Everyone wins with the availability of 3rd party controls because companies can find the perfect tools to solve their needs, developers save time not having to reinvent the wheel, and Microsoft can continue to grow customer investment in Windows.

The question is: when do you buy controls vs build them yourself?

When to build your own custom UI controls:

1.You have an adequate, inexpensive support and development team

If your development team is in a location with a low cost of living, then you may find building controls provide an optimally low overhead. Just make sure it’s reusable, well-tested, and well-built. And don’t forget to calculate the cost of communication. A twelve-hour time difference is an expensive opportunity cost.

2.You have enough time.

There’s a saying in the construction industry: “Fast, cheap, or good: pick two.” This means that if you want it to be cheap and good, don’t expect to get it any time soon; if you want it to be fast and good, expect to spend a lot of money.

3.The application is a one-off that will not need to be maintained.

If you’re certain that you’ll never need to return to this application to fix it, upgrade it to new browser requirements, or otherwise deal with it again, you may not need the support of a licensed control set.

When to buy a third-party control suite:

1.You are the support team.

If you’re the developer, designer, QA, and everything in between, then a licensed toolkit from a respected company will be invaluable to you. Yes, it’s an added annual cost. But for that price, you get an extended support team, a community of users, and, in the case of ComponentOne Studio Enterprise, frequent updates that resolve inevitable issues like browser and .NET version compatibility.

2.The application has a long lifespan.

The time you save using third-party controls during the initial development period is multiplied over time. This means that 5 to 10 years down the road, you’ve saved 5 to 10 times more effort than you would otherwise spend maintaining your own custom controls.

3.Your deadlines are short.

If your work consistently requires a fast turnaround on deliverable software, you are the ideal candidate to purchase off the shelf. The beauty of dragging and dropping a completed, reusable control into a page cannot be overstated. You don’t want to spend hours tinkering with resizing a column in a grid when someone has already done it for you. You’ll be able to spend more time focused on your company’s creative and business problems and less time re-inventing the wheel.

4.You can afford it.

The only obvious downside to buying is the cost. But you are likely saving rather than losing money when you break down the price of purchasing versus the time and pay for your team to build it themselves. Managers can present the purchase options to their boss and show how much the team can save. The bottom line is, how much are you willing to pay to make your life easier?

Conclusion

.NET is a vast development ecosystem that empowers developers to create software that can reach almost every user on the planet. The Microsoft Visual Studio designer makes it very easy to build UIs quickly. .NET provides a good starter set of UI controls for desktop and native mobile development, collectively known as standard controls. You can opt for a third-party control suite if you need more functionality built into the controls and can’t afford to develop them yourself. These controls fill the gap and add more advanced functionality. If you’re developing for the web, you will definitely want to add a control suite to your toolbox since the only controls available are basic HTML elements.