DEV Community: Chelsea Devereaux

The Top React Chart Types for Web Reports

Chelsea Devereaux — Wed, 28 May 2025 15:14:13 +0000

What You Will Need

ActiveReportsJS

Controls Referenced

Tutorial Concept
Build interactive and insightful React Web Reports using ActiveReportsJS, which simplifies chart creation with its powerful Chart Wizard and intuitive React Report Designer. This tutorial walks you through how to select and configure the most effective React Report Types, like scatter plots, pie charts, stacked bars, and line graphs, based on the story your data needs to tell.

Effective web reporting is all about turning raw data into intuitive, insightful visualizations. Whether you're analyzing sales performance, tracking user engagement, or forecasting trends, the right chart type can make or break your ability to convey a story. As a modern, component-based framework, React provides an ideal foundation for creating dynamic and interactive web reports.

But implementing complex visualizations from scratch can be time-consuming. This is where ActiveReportsJS shines—offering a robust charting engine and visual report designer tailored for React and JavaScript applications. With built-in support for a wide range of chart types, the Chart Wizard in ActiveReportsJS empowers developers and analysts to drag, drop, and configure advanced charts easily, accelerating development without sacrificing customization.

In this blog, we will explore:

Visualization Categories, including:
- Visualization of Relationships
- Visualization of Composition
- Visualization of Comparison
Other Chart Types

Visualization Categories

Let's explore the most impactful chart types, grouped by their primary purpose in data visualization. These categories help guide the selection of the best chart type based on the message you want your data to communicate.

Relationship—The relationship between two or more data values. For example, a chart could display the relationship between weather conditions and the number of customers who visit an establishment. Looking at such a chart, a report reader could quickly realize if there is any correlation between data values, the nature of this correlation, and so on.
Composition—The composition reveals how parts of the whole compare in size. A composition can be static or change over a period of time. For example, a chart could display winter coat sales in California and Alaska over the course of a year.
Comparison—The comparison shows how data values compare to each other. This is similar to composition, but the comparison could be applied to data values that are not parts of a whole. For example, this could be a chart displaying the average temperature for each month of the year in California versus Alaska.

Next, we'll look at these categories in more detail and suggest some specific chart types for different scenarios.

Visualization of Relationship

Charts in this category help uncover how variables relate to one another. They're useful for identifying patterns, clusters, and correlations between two or more data dimensions.

Scatter Charts

Scatter charts plot individual data points along the X and Y axes, making them perfect for exploring relationships and trends in data distribution, like visualizing the correlation between life expectancy and GDP per capita.

Bubble Charts

Taking scatter charts one step further, bubble charts add a third dimension using the size or shape of each bubble. This helps illustrate magnitude in addition to correlation.

In ActiveReportsJS: Both scatter and bubble plots are easily configured using the Chart Wizard, allowing users to bind multiple dimensions to axes, size, and tooltip fields.

Visualization of Composition

Composition charts show how parts make up a whole, either at a single point in time or across a continuous timeline.

Pie and Doughnut Charts

These circular charts are ideal for displaying percentage breakdowns of a single category. Use them to visualize market share, expense categories, or user demographics.

Column and Bar Charts

Bar and column charts make it easy to compare quantities across categories, such as quarterly sales by region or products sold per channel. They're perfect for visual breakdowns.

Stacked Charts

Stacked column or bar charts add a layer of insight by showing how subcategories contribute to total values. Stacked percentage charts show proportional composition, while standard stacked charts show absolute values.

Area Charts

Similar to line charts but with filled areas beneath the lines, these are great for illustrating volume, trends, and cumulative data, like total revenue over time from multiple sources.

In ActiveReportsJS: Users can toggle between pie, donut, stacked, and area chart types with the visual designer, applying custom color palettes and data labels for clarity.

Visualization of Comparison

These charts help track how values evolve over time or differ across categories, making them a go-to for trend analysis and performance comparisons.

Line Charts

Line plots are perfect for showing how metrics like sales, web traffic, or temperature change over time. They work well when the goal is to emphasize progression or fluctuation.

In ActiveReportsJS: Line charts support multiple series, smooth curves, markers, and tooltips. Developers can configure axes, scales, and legends directly within the designer or via code for maximum flexibility.

Other Chart Types

ActiveReportsJS supports several advanced chart types that serve specialized reporting needs:

Financial Charts: Includes candlestick and OHLC charts for displaying market data like stock price fluctuations.
Radar Charts: Useful for comparing multivariate data across different categories, such as employee performance ratings or product features.
Area and Scatter Variants: Radar line, radar area, and radar scatter charts offer alternatives for visualizing complex multidimensional data.
Spiral and Polar Charts: These are valuable for displaying cyclical or periodic data, such as daily traffic patterns or seasonal trends.

In ActiveReportsJS: These charts can be selected from the plot type dropdown and customized extensively with legends, grid lines, and plot area styling.

Conclusion

Choosing the right chart type is crucial for delivering meaningful insights through web reports. Whether you're illustrating correlations with scatter plots, breaking down data with stacked bars, or tracking trends over time with line charts, each visualization type serves a unique purpose.

With React providing a solid foundation for responsive interfaces and ActiveReportsJS handling the heavy lifting of data visualization, you can build highly interactive, professional-grade reports quickly and efficiently. From common chart types to advanced visualizations, ActiveReportsJS equips React developers with the tools needed to deliver compelling, data-rich reporting experiences.

Check out ActiveReportsJS to implement its reporting chart functionality in your application.

Happy Coding!

The Definitive Guide to JavaScript Image Viewers

Chelsea Devereaux — Tue, 20 May 2025 15:50:21 +0000

Photos are an essential component of web and app design imagery. They help convey information, showcase products and create engaging user experiences. As web applications become increasingly more complex with additional features and capabilities, the need for robust and interactive JavaScript image viewers and editors has grown. From simple zoom-and-pan functionalities to annotation tools and image filters, the demands placed on JavaScript image viewers are higher than ever. Whether you’re building an e-commerce platform, a medical imaging application, or a photo editing tool, choosing the right image viewer library can significantly impact your project’s success.

This guide is a comprehensive resource for navigating the world of JavaScript image viewers. We’ll look at the current JavaScript environment, reviewing the evolution of JavaScript and the various frameworks that have become popular, as well as the shift from desktop-based applications to web apps. Then, we’ll review how a JavaScript image viewer can help you manage, distribute, and work with your businesses’ images, as well as some of the core functionality you’ll want to include in your image viewer. We’ll also examine some benefits of integrating image viewers in your JavaScript application before finally learning how to add an image viewer to your application using the Document Solutions JavaScript Image Viewer.

The Current JavaScript Environment

The JavaScript environment is constantly evolving; new frameworks, libraries, and language extensions are released every day, creating innovative ways for developers to build their web applications. While this rapid change can be overwhelming, a few dominant players have emerged. React, Angular, and Vue, along with their respective development environments, have solidified their positions as industry standards. We’ve also seen several new frameworks, such as Svelte, Next.js, Nuxt.js, and Vite (the latter three of which were built on top of React and Vue), emerge over the last few years, leaving their mark on the industry. TypeScript, a superset of JavaScript, has gained significant traction not only within the front-end environment but also throughout the server-side environment by way of NodeJS, providing developers with enhanced tooling and scalability for complex applications.

Though a lot of different technologies exist for building web applications, we’ll only cover a few of the major options:

Angular: Starting as AngularJS, Angular is a TypeScript-based open-source framework managed by the Angular Team at Google. It was one of the earliest “modern” frameworks to be adopted into public use and has been the spark for several other libraries and frameworks.
React: Maintained by Meta, React is different than other web frameworks in that it is itself a JavaScript library and not a fully-fledged framework. It was created to improve the process of designing and building user interfaces, allowing developers to use a structured approach when building their UI components.
Vue.js: Like Angular, Vue.js is an open-source framework based on JavaScript that uses the model-view-viewmodel structure. Based on the original AngularJS, Vue is designed as a lightweight Angular-alternative framework.
Svelte: A framework that has grown in popularity in recent years, Svelte is also JavaScript-based. Unlike some other popular frameworks used, Svelte does away with much of the boiler plating required by other frameworks.
Next.js, Nuxt.js, and Vite: Based on React and Vue.js, respectively, Next.js, Nuxt.js, and Vite are extensions of their parent frameworks. Their goal is to allow developers to build full-stack applications more easily with improvements to features such as server-side rendering.

Now that we’ve explored some popular web technologies, let’s take a closer look at the rise of web-based applications and consider how they’re slowly replacing desktop applications in the current business environment.

The Rise of Web-Based Applications

Over roughly the last decade, we’ve seen a significant shift in business software, moving from traditional desktop applications to increasingly popular web-based solutions. This evolution (driven by the demand for greater accessibility) improved collaboration and enhanced scalable infrastructure, altering how organizations can operate. Let’s review some key motivators behind this trend, focusing on how web-based applications can provide clear advantages in each area.

Ease of Access

Historically, software installations were tied to individual devices, restricting access to those specific machines and locations. This approach often created logistical challenges and limited flexibility for users. Web applications changed this standard by offering access from any device with an internet connection, breaking down geographical and hardware barriers. This shift significantly streamlined deployment, updates, and maintenance processes. Developers gained the ability to manage changes centrally, pushing updates to all users simultaneously without requiring individual downloads or installations. This not only reduced the burden on IT departments but also ensured that all users were consistently working with the most current version of the software.

Collaboration

With many modern web applications, real-time collaboration allows users and teams to create efficient workflows. Traditionally, desktop applications often struggled to facilitate seamless collaboration, leading to version control issues and communication bottlenecks. However, advancements in cloud-based storage and real-time data synchronization have significantly improved the collaborative capabilities of web apps. This technological leap has propelled web applications to the forefront of collaborative tools, enabling teams to work together seamlessly, regardless of their physical location.

Scalability

Modern businesses need IT infrastructure that can adapt quickly to their ever-changing demands. Cloud computing provides unmatched scalability, which is a game-changer for organizations. It allows companies to easily adjust their IT resources — scaling up or down — in direct response to growth, seasonal fluctuations, or unexpected spikes in demand. This dynamic resource allocation eliminates the traditional, often cumbersome and expensive, process of constantly upgrading on-premises hardware. This approach not only saves valuable time and financial resources but also allows businesses to focus on their core objectives rather than being bogged down by IT infrastructure management.

Desktop applications definitely still serve a purpose, especially for heavy-duty tasks or niche software. However, it’s clear that web applications offer some major advantages. As web apps have become more popular, so have web-based versions of tools that had previously only been seen on desktops.

With those considerations in mind, it’s important to ensure that the JavaScript image viewer library you pick fits your application. In the next section, we’ll discuss the benefits of using a JavaScript image viewer and how it can improve your business’s workflow.

Considerations When Selecting a JavaScript Image Viewer

Now that we’ve explored some benefits a JavaScript image viewer can provide your company, it’s time to review some considerations when choosing a particular library. There are a lot of available options, and reviewing all of them to find one that fits your needs can be overwhelming. Below are some factors to consider before adding a JavaScript image viewer to your application:

Choosing the Right Library

Evaluate Your Needs: Determine the specific features required for your application (i.e., image format support, filters and effects, manipulation tools, etc.).
Consider Performance: For high-volume or complex operations, choose libraries optimized for performance.
Evaluate Licensing: Select a library with a suitable licensing model (open-source, commercial, etc.).

Design Considerations

Cross-Platform Compatibility: Ensure images can be viewed across browsers and devices.
Responsive Design: Choose a viewer that can adjust and fit to the size of the device.

Performance Optimization

Asynchronous Operations: Utilize asynchronous programming for non-blocking operations.
Caching: Cache frequently-used data or generated image content to reduce processing time.
Optimize Image Quality: Compress images without compromising visual quality.

By following these best practices, you can narrow down the various available JavaScript image viewer libraries to find the option that best fits your needs.

JavaScript Image Viewer Features and Uses

The Document Solutions JavaScript Image Viewer (formerly GrapeCity Documents JavaScript Image Viewer) is a full-featured JavaScript image viewer library that makes it simple for users to view, edit, submit, and save images. From adding annotations to applying photo filters, this library provides the tools to allow users to view and edit any of their image files.

Below are a few of the key features and capabilities provided by the Documents Solutions JavaScript Image Viewer:

Client-Side Viewer: View or edit images directly within your application without the need for third-party tools. Integrating DsImageViewer with applications built on major frameworks ensures a seamless viewing and editing experience.
Cross-Platform Solution: Work with images across multiple platforms. DsImageViewer supports viewing and editing image files on Windows, Mac, Linux, iOS, and Android.
Supports Multiple Image Formats: The image viewer supports a variety of popular image formats, including JPG, PNG, TIFF, GIF, BMP, ICO, SVG, and WebP, ensuring a seamless experience for viewing and editing images.
Plugin Support: Enhance image editing capabilities with plugins that add specific editing features without unnecessary extras.
Navigation Control: Navigate through each frame of GIF and TIFF image formats. The navigation controls allow for the viewing and editing of individual frames.
Image Manipulation Tools: Tools for rotating, cropping, resizing, and flipping.
Draw and Paint Tools: Tools for drawing shapes, painting with different brush types, and copying pixels.
Text Tools: Tools for adding text in different fonts and sizes.
Filters and Effects: Apply a range of filters, like grayscale, blur, brightness, contrast, and more, plus intensity adjustment for each filter to fine-tune the effects.
Customization: Customize DsImageViewer to fit your needs using built-in API options for toolbar customization.
Multi-Language Support: Localize the user interface to improve compatibility across markets. DsImageViewer supports localizing the application to any language.
Adaptive User Interface: Ensure an optimal viewing experience on various devices with responsive design that supports different screen sizes and orientations.

Implementing a JavaScript Image Viewer in a JavaScript Application

Now that we’ve discussed the benefits of using a JavaScript image viewer library and the features of the Document Solutions JavaScript Image Viewer, it’s time to learn how to implement the image viewer in a web application.

Project Setup

For this example, we will set up an ASP.NET Core web application that uses the Document Solutions JavaScript Image Viewer. The steps to achieve this are outlined below:

1. Using Microsoft Visual Studio, select Create a new project | ASP.NET Core Web App

2. Open the project in File Explorer and locate the wwwroot > lib directory.

3. Open the command prompt and run the command below to install the DsImageViewer. Make sure that the directory location in the command prompt is set to the lib folder of your project:

npm install @mescius/dsimageviewer

4. This will run through the installation of the Document Solutions JavaScript Image Viewer library. When complete, the installation can be found at the following path: wwwroot\lib\node_modules\@mescius\dsimageviewer

5. In the Solution Explorer, right-click the wwwroot folder of the project and select Add > New Item to add a new HTML file, which should be named index.html:

6. To initialize the DsImageViewer and open an image in the viewer, add the code below to the index.html file and place the desired image in the wwwroot folder. In this example, the image that we’re referencing is called sample.jpg.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>DsImageViewer Demo</title>
    <script type="text/javascript" src="lib/node_modules/@mescius/dsimageviewer/dsimageviewer.js"></script>
    <script>
        function loadImageViewer() {
            var viewer = new DsImageViewer("#imageviewer");
            viewer.open("https://i.imgur.com/bvcCEnr.jpeg");
        }
    </script>
</head>
<body onload="loadImageViewer()">
    <div id="imageviewer" style=" height:700px"></div>
</body>
</html>

7. To start the application with index.html by default, replace the default methods with the following code in the Program.cs file:

var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddRazorPages();
var app = builder.Build();
// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
}
app.UseHttpsRedirection();
app.UseDefaultFiles();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();
app.MapRazorPages();
app.Run();

8. Now, build and run the application. A page should be shown displaying an image with the open DsImageViewer control:

Conclusion

JavaScript image viewers have evolved into powerful tools that can enhance web application functionality. From basic zoom and pan features to advanced annotation and comparison capabilities, the right image viewer can drastically improve user interactions and data visualization. By carefully considering your project’s specific requirements, exploring the available libraries, and implementing best practices for performance and accessibility, you can leverage the full potential of JavaScript image viewers. As web technologies advance, we can expect even more innovative and sophisticated image-viewing solutions to emerge, further enriching the user experience and expanding the possibilities for web-based applications.

If you’d like to try the Document Solutions JavaScript Image Viewer, you can download a free trial and find more samples and features outlined in our demos and documentation pages.

How to Create Calculated Fields in a C# .NET RDL Report

Chelsea Devereaux — Tue, 20 May 2025 15:33:24 +0000

What You Will Need

Controls Referenced

Tutorial Concept
Learn how to add and use calculated fields in your C# .NET RDL reports in the ActiveReports.NET Web Designer.

Calculated fields in ActiveReports.NET allow you to create new values based on existing data in your dataset. They're great for on-the-fly calculations without needing to modify your underlying data source.

In this quick walkthrough, we will show you how to add a calculated field to your report using the ActiveReports.NET Web Designer. This functionality is also supported in the designer's desktop versions—the steps are nearly identical, but the interface will look a bit different. We will walk through the following steps:

Open the Data Tab
Edit the Data Set
Add a Calculated Field
Define Your Calculation
Use the Field in Your Report

You can also follow along in the video below:

Step 1: Open the Data Tab

Start by opening your report in the designer. In the top-right corner of the interface, switch to the Data tab. This is where all of your datasets and data-bound fields are managed.

Step 2: Edit the Data Set

Next, find your dataset and click the Edit (pencil) icon beside it. This will open the dataset configuration window.

Step 3: Add a Calculated Field

Inside the dataset configuration window, look for the Calculated Fields section. Click the plus (+) icon to add a new field.

Step 4: Define Your Calculation

Now, give your calculated field a name and enter an expression that defines how the value should be calculated.

For example:

    [UnitsInStock] * [UnitPrice]

This expression multiplies the number of units in stock by the unit price to calculate each item's total stock value.

Click OK to save your calculated field.

Step 5: Use the Field in Your Report

That's it! Your new calculated field is now part of the dataset. You can drag it directly into your table or any other data-bound control.

When you preview the report, you'll see the calculated values displayed as expected.

Conclusion

Calculated fields are a simple but powerful way to extend your data inside ActiveReports.NET without touching the source. Whether you need to compute totals, percentages, or other custom values, this feature helps you keep your report logic clean and reusable.

The Top Angular Chart Types for Web Reports

Chelsea Devereaux — Tue, 20 May 2025 03:19:08 +0000

What You Will Need

ActiveReportsJS

Controls Referenced

Tutorial Concept
Create visually compelling web reports in Angular using ActiveReportsJS’s powerful charting engine, which includes a user-friendly Chart Wizard and extensive customization options. This tutorial explores how to choose the right chart type, such as line, bar, pie, or radar, to highlight data relationships, comparisons, and compositions effectively.

With data at the core of innovation today, effective web reporting is essential for making informed decisions. Visualizing data through charts not only makes complex information more digestible but also uncovers trends and insights that might otherwise go unnoticed. The Angular framework, with its dynamic and component-based architecture, is great for building interactive and responsive reporting interfaces.

To further streamline this process, ActiveReportsJS offers a comprehensive charting solution tailored for Angular environments. It simplifies the integration of charts into web reports with an intuitive Chart Wizard, extensive configuration options, and a visual designer, allowing developers and analysts to focus on insights rather than implementation details.

In this blog, we will explore:

Visualization Categories, including:
Visualization of Relationships
Visualization of Composition
Visualization of Comparison
Other Chart Types

Visualization Categories

When choosing a chart type, it's essential to align it with the kind of insight you want to communicate. Let's take a look at several charting categories that are offered by ActiveReportsJS:

Relationship — The relationship between two or more data values. For example, a chart could display the relationship between weather conditions and the number of customers who visit an establishment. Looking at such a chart, a report reader could quickly realize if there is any correlation between data values, the nature of this correlation, and so on.
Composition — The composition reveals how parts of the whole compare in size. A composition can be static or change over a period of time. For example, a chart could display winter coat sales in California and Alaska over the course of a year.
Comparison — The comparison shows how data values compare to each other. This is similar to composition, but the comparison could be applied to data values that are not parts of a whole. For example, this could be a chart displaying the average temperature for each month of the year in California versus Alaska. Next, we'll look at these categories in more detail and suggest specific chart types for different scenarios.

Visualization of Relationships

These charts are great for discovering connections between data points, usually across two or more variables.

Scatter Charts

Scatter plots display values along two axes, showing how one variable is affected by another. They are ideal for visualizing distribution and correlation.

Bubble Charts

Bubble charts extend scatter plots by adding a third variable—often represented by the size or shape of the bubble—giving the analysis more dimensionality.

In ActiveReportsJS: Both scatter and bubble plots are easily configurable with plot type selections in the Chart Wizard and support customizing axes, legends, and data bindings.

Visualization of Composition

These charts help reveal how different parts contribute to a whole, either at a single point or over time.

Pie and Doughnut Charts

These circular charts are best for visualizing percentage breakdowns such as market shares or budget allocations.

Column and Bar Charts

Used for category-wise comparisons, these charts work well for showing quantities like sales, inventory levels, or user counts.

Stacked Charts

Stacked versions of column and bar charts show composition within categories and are perfect for visualizing part-to-whole relationships over time.

Area Charts

Like line charts but with shaded areas under the lines, these charts emphasize volume and are suitable for showing cumulative trends.

In ActiveReportsJS: The chart editor supports all these variations with multiple stacking and percentage options, and each chart can be themed using custom palettes for brand consistency.

Visualization of Comparison

Comparison charts are perfect for tracking data trends and performance across categories or time.

Line Charts

Line charts are among the most commonly used to show data progression over intervals. ActiveReportsJS offers multiple variants, including smooth and stepped lines, enhancing the readability of long-term trends or subtle fluctuations.

In ActiveReportsJS: Line plots can be quickly configured in the Chart Wizard, which offers rich axis and marker customization options.

Other Chart Types

Beyond the foundational categories, ActiveReportsJS supports a wide range of advanced visualizations for niche use cases:

Financial Charts: Includes candlestick, high-low-close, and high-low-open-close plots—ideal for stock price or trading volume reports.
Radar Charts: Available in line, area, bubble, and scatter variants; best suited for comparing multiple variables, like performance metrics.
Spiral and Polar Charts: Great for cyclical or rotational data, such as seasonal trends or circular timelines.
Gauge Charts: Used for displaying single values, like KPIs or sensor readings, in a dashboard-style interface.

Each of these can be created and configured visually using the ActiveReportsJS designer, with full access to plot area settings, legends, axes, and more.

Conclusion

Web reports are only as effective as the clarity of their visualizations. From revealing relationships and distributions to highlighting comparisons and compositions, the right chart type can turn raw data into actionable insights. Angular provides a solid foundation for building modern web apps, while ActiveReportsJS enhances it by offering a robust, user-friendly charting engine tailored for web reporting.

Whether you're building dashboards, financial reports, or data monitoring tools, ActiveReportsJS allows you to easily create, customize, and deploy professional-grade charts—all directly within your Angular environment.

Check out ActiveReportsJS to implement its reporting chart functionality in your application.

Happy coding!

Add dynamic grouping to your WinForms datagrid

Chelsea Devereaux — Fri, 16 May 2025 19:56:11 +0000

What You Will Need

ComponentOne WinForms Edition
Visual Studio 2022

Controls Referenced

FlexGrid for WinForms

Tutorial Concept
Learn how to enable grouping in the FlexGrid datagrid control for WinForms. In this tutorial, we configure the datagrid for grouping in C# code and enable runtime grouping by the end-user.

The flexible FlexGrid control supports several datagrid grouping solutions for Windows Forms applications. You can implement aggregates and subtotals, nested content with row details, collapsible node rows (like a Tree Grid), and even a runtime, drag-and-drop grouping panel.

In this blog, we will demonstrate two of these approaches: first, a straightforward grouping implementation with aggregation in code, and second, a runtime, dynamic grouping feature that your end users will love. In the sections below, we will cover:

Purposes of Grouping a Datagrid
Dynamic Grouping by Code
Dynamic Grouping at Runtime

Why Group a Datagrid?

Grouping can make data easier to understand, navigate, and analyze. Dynamic grouping automatically sorts the data, splits it into groups, and adds collapsible group rows above or below each group. The group rows may include aggregate values for one or more columns.

For example, consider this grid showing data from a DataTable object:

    _flex.DataSource = myDataTable;

This will automatically generate columns and load the data to appear as such:

This is a typical datagrid view. End users can analyze the data by sorting, filtering, and scrolling without developers having to write any code. However, if you want to enable grouping and aggregating, you will have to write a bit of code.

Dynamic Grouping by Code

Grouping can be enabled on the FlexGrid by using the GroupDescriptions property. Simply add a group description to the GroupDescriptions array for each field by which you wish to group.

    // bind grid to data source
    _flex.DataSource = GetDataTable();

    // add groups
    _flex.GroupDescriptions = new GroupDescription[] {
        new GroupDescription("ShipCountry"),
        new GroupDescription("CategoryName")
    };

    // add aggregate to "Sale Amount" column
    var col = _flexDataTable.Cols["Sale Amount"];
    col.Aggregate = AggregateEnum.Sum;
    col.Format = "N2";

    // allow grouped cells to spill into empty cells
    _flex.AllowMerging = AllowMergingEnum.Nodes;

Notice in the code above, we also enable aggregation, which provides a summary calculation for each group. The groups are collapsible, and the group header rows contain the aggregate information for the Sale Amount column.

The grey rows represent group headers. They contain expand/collapse glyphs, a customizable string showing the group information, and aggregate information for any columns where the Aggregate property is set to a value other than None. You can customize the format of the group header row text by setting the GroupHeaderFormat property.

The Ship Country and Category Name columns contain a lot of repetitive data because the grid is grouped by those values. You can automatically remove those columns from view by setting the HideGroupedColumns property to true. The grid below does that and adds some custom styling to the group rows:

Users can sort columns by clicking their headers with the mouse. Sorting grouped columns will sort the group values, while sorting ungrouped columns will sort values within each group only.

For example, if the user clicked the “Product Name” column header on the grid above, this will appear:

The groups have not changed, but the product names are now sorted alphabetically.

You can prevent mouse sorting by setting the AllowSorting property to false on the whole grid or individual columns.

Sorting is an important part of grouping. To create and update the groups, the grid starts by performing a multi-property sort, including all the groups plus any additional sorts created, for example, by user clicks on column headers. After the data is sorted, the grid inserts the group header rows and calculates the subtotals as needed.

Because of this, grouping requires data sources that implement the IBindingListView interface. These include:

The DataView class (used with data from databases)
The SortableBindingList class, included in the FlexGrid assembly (used with lists of custom objects)
Any other custom class that implements the IBindingListView interface

Properties and classes that make up the FlexGrid’s dynamic grouping feature:

Bind the grid by setting its DataSource property to a class that implements the IBindingListView interface (e.g., DataView or SortableBindingList).
Set the grid’s GroupDescriptions property to a list of GroupDescription objects that describe how the data should be grouped.
Optionally, set the grid’s GroupHeaderFormat property to define the content of the first cell in the group header rows.
Optionally, set the grid’s AllowMerging property to AllowMergingEnum.Nodes, so the group header content can spill into adjacent empty cells.
Optionally, set the Aggregate property on columns to show their aggregate values (like sum or average) on the group header rows.
Optionally, customize the appearance of the outline tree by setting the grid’s Tree.Style property (for example, set it to TreeStyleFlags.Leaf to show only the node text without lines or collapse/expand glyphs).

Dynamic Grouping at Runtime

FlexGrid for WinForms also supports a GroupPanel control to enable dynamic, runtime grouping in FlexGrid. This feature is built upon the same grouping logic discussed above. Users can drag column headers into the panel to create and drag groups to new positions. In addition, users can use the context menu to collapse all, expand all, and clear grouping.

The GroupPanel also allows you to limit the maximum number of groups that can be created through the MaxGroups property and determine whether grouped columns should be displayed on the grid through the HideGroupedColumns property.

How to add a Group Panel to FlexGrid

The GroupPanel control is supported using an extension control named C1FlexGridGroupPanel, which is provided by the C1.Win.FlexGrid.GroupPanel assembly.

1. Add a reference to C1.Win.FlexGrid.GroupPanel (for .NET 9.0+)

a. or C1.Win.C1FlexGrid.GroupPanel for .NET Framework

2. Drag and drop the GroupPanel control from the toolbox on the form and place it above FlexGrid

3. Set the FlexGrid property of GroupPanel to the instance of FlexGrid on the form

4. Optionally, set the Text property like “Drag a column here to group by that column.”

5. Optionally, set MaxGroups property to limit the number of groups allowed

6. Optionally, set the HideGroupedColumns property to show\hide grouped columns in the grid

We hope you like the FlexGrid grouping features. We think they are beneficial and easy to use. We also have similar implementations available on platforms including WPF, WinUI, ASP.NET Core, and JavaScript.

Applying Fitts’s Law to UI/UX Design in JavaScript

Chelsea Devereaux — Wed, 23 Apr 2025 18:45:20 +0000

What You Will Need

Wijmo
NPM

Controls Referenced

FlexGrid
FlexMap
Wijmo Input

Tutorial Concept
Learn about applying Fitts’s Law to UI/UX design in JavaScript applications.

Creating seamless and intuitive interactions is critical when designing a successful user interface. One foundational principle that helps designers and developers alike is Fitts's Law. In the world of UI and UX, this law isn't just a theory—it's a practical tool that, when understood and applied, can significantly improve user experience, and if you're building your project with MESCIUS' Wijmo components, you already have a head start.

In this blog, we will explore the following:

What is Fitts's Law
Why Fitts's Law Matters in JavaScript Applications' UI/UX
How Wijmo Helps You Apply Fitts's Law
Fitts's Law in Action: Real-World Example

What is Fitts's Law?

Fitts's Law, introduced by psychologist Paul Fitts in 1954, predicts the time it takes for a person to move a pointer (like a mouse cursor) to a target area. The formula is:

T = a + b log₂(1 + D/W)

Where:

T is the time to target
D is the distance to the target
W is the width of the target
And a and b are empirically determined constants

Put simply, the closer and larger a UI element is, the faster and easier it is to interact with. Fitts's Law underlines the importance of designing interfaces that minimize users' effort and time to complete tasks.

Why Fitts's Law Matters in JavaScript Applications' UI/UX

When designing an interface:

Buttons should be large enough to click easily (especially on touch devices).
Navigation elements should be positioned for fast access (like corners or edges).
Avoid placing important interactive elements too far from likely cursor positions.

Fitts's Law applies whether you're designing a website, dashboard, or mobile app. It's all about minimizing the time and effort it takes users to act.

How Wijmo Helps You Apply Fitts's Law

Wijmo by MESCIUS is a powerful suite of JavaScript UI components built for performance and ease of use. It offers several built-in advantages that align beautifully with Fitts's Law.

Intuitive Component Sizing

Many Wijmo components, such as FlexGrid, Input, and Gauge, come with responsive sizing out of the box. This allows developers to scale UI elements appropriately, making them easier targets, especially on high-resolution displays or mobile interfaces.

Tip: Use Wijmo's layout responsiveness (wj-flexgrid, wj-input) to ensure your elements remain large enough to be quickly accessed regardless of screen size. Check out our demo showcasing this feature.

Logical Grouping and Spacing

Fitts's Law also ties into how elements are grouped. Closer targets reduce the distance a user must travel. Wijmo components support modular layout and grouping with built-in support for tabs, panels, and toolbars. For example, you can use wijmo.nav.TabPanel to group related actions or views, so users don't have to jump around the interface. See this in action in our demo.

Sticky and Fixed Elements

A common UI practice derived from Fitts's Law is fixing navigation elements to the top or side of the screen. Wijmo supports sticky headers in FlexGrid and can easily integrate with sticky containers for nav bars and toolbars, reducing travel time.

Check out this demo for sticky headers.

Touch-Friendly Controls

Touch interactions amplify the importance of size and proximity. Wijmo's components are optimized for touch, meaning you don't have to manually increase padding or element size for mobile usability, which is the key to ensuring buttons and inputs are easily tappable.

Fitts's Law in Action: Real-World Example

Let's say you're building a financial dashboard with Wijmo's FlexChart, FlexGrid, and InputNumber components. You might apply Fitts's Law in the following ways:

Place most-used filters (InputNumber, ComboBox) next to the chart to minimize cursor movement.
Use large, clearly labeled buttons for common actions like "Export", "Refresh", or "Add Row".
Keep controls, like paging or sorting, near the grid they affect, so users don't have to spend time searching for them.

Conclusion

Fitts's Law is more than a design curiosity; it's a scientific foundation for user-centered interaction design. With Wijmo's thoughtfully designed components, you're already halfway there. By being mindful of distance, size, and placement, you can fine-tune your interfaces for speed, comfort, and efficiency.

The next time you're working on a UI component in your JavaScript application, ask yourself:

Are my buttons easy to reach and big enough to click?
Are related controls grouped close enough together?
Can I reduce how far users need to move their cursor?

Small changes in these areas can lead to significant improvements in usability, and your users will thank you for it.

How to Add a WPF Excel XLSX Viewer to Your Desktop Application

Chelsea Devereaux — Wed, 23 Apr 2025 18:27:49 +0000

Tutorial Concept
Learn to set up a WPF Excel Viewer to programmatically import Excel files using C#, customize worksheets, and prevent changes by end-users in a .NET WPF application.

What You Will Need

Visual Studio - This example uses VS2022
.NET 8+ WPF Application
NuGet Package: Mescius.Spread.WPF

Controls Referenced

If your WPF application needs to display or interact with Excel files, using a dedicated viewer is a clean and user-friendly solution. In this guide, we'll walk through how to add an Excel XLSX viewer to a WPF app using the WPF spreadsheet control, Spread.NET for WPF. You'll learn how to load a .xlsx file, lock down the worksheet, and allow users to edit only specific cells — perfect for budget forms, reports, or review-only sheets.

Steps to Implement a C# .NET Excel Viewer in Your WPF Application

Create a .NET C#/VB WPF Project in Visual Studio
Define the User Interface for the WPF Spreadsheet App
Import Excel (.xlsx) Files into the WPF App Excel Viewer
Protect the .NET Worksheet in the WPF Excel Viewer

Download a finished WPF sample app to follow along with the blog!

Create a .NET C#/VB WPF Project in Visual Studio

Open Visual Studio 2022 (pre or earlier) and create a New Project. Select WPF Application, name the project XLSX_Viewer_WPF, and select .NET 8.0 as the framework.

In the Solution Explorer, right-click the solution name and select Manage NuGet Packages for Solution. Search the NuGet.org package source for Mescius.Spread.Wpf and install the WPF spreadsheet component.

Define the User Interface for the WPF Spreadsheet App

In Visual Studio, open MainWindow.xaml in the editor. Open the VS Toolbox (CTRL+ALT+X) and notice a section named Spread for WPF. Drag and drop the GcSpreadSheet component onto the MainWindow.xaml design surface, preparing it to display Excel data in the WPF application.

Not seeing the MESCIUS Spread section in the Toolbox? Add it manually!

Users can edit the XAML element representing the spreadsheet component; for our needs, we will add the sheet name:

    <gss:GcSpreadSheet x:Name="spreadSheet1" HorizontalAlignment="Center" VerticalAlignment="Center"/>

Import Excel (.xlsx) Files into the WPF App Excel Viewer

Now that the GcSpreadSheet control is added to the WPF UI, let's load an Excel file into it. In this example, we'll import a .xlsx file bundled with the application itself—no file picker or user input is required.

Start by adding your Excel file to the project. In this example, we add a file titled EventBudget.xlsx to the project folder. This ensures the file is copied to your build output so it can be loaded at runtime.

Next, open MainWindow.xaml.cs and add the following code to invoke Spread's OpenExcel method, loading the above Excel file when the WPF spreadsheet application starts:

    using System;
    using System.IO;
    using System.Windows;
    using GrapeCity.Wpf.SpreadSheet;
    using GrapeCity.Spreadsheet.IO;

    namespace XLSX_Viewer_WPF
    {
        public partial class MainWindow : Window
        {
            public MainWindow()
            {
                InitializeComponent();
                LoadEmbeddedExcelFile();
            }
            private void LoadEmbeddedExcelFile()
            {
                try
                {
                    // Set the relative path to the Excel file in your project
                    string relativePath = "EventBudget.xlsx";

                    // Build the full path to the file in the output directory
                    string fullPath = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, relativePath);

                    // Import the Excel file using Spread for WPF
                    gcSpreadSheet.OpenExcel(fullPath, ExcelOpenFlags.None);
                }
                catch (Exception ex)
                {
                    MessageBox.Show($"Failed to load Excel file:\n{ex.Message}", "Error", MessageBoxButton.OK, MessageBoxImage.Error);
                }
            }
        }
    }

Notice that the application now opens a selected Excel file on load, and users can interact with the spreadsheet content.

Protect the .NET Worksheet in the WPF Excel Viewer

By default, all cells in the WPF worksheet are locked, but the cell locking that prevents editing only takes effect after protection is enabled. So first, ensure the cells you want to remain locked are untouched.

Before applying protection, unlock the cells or ranges where users should be able to input values. Below is an example that unlocks a few cells in column B (i.e., the "Budget" column) using the Locked Property:

    // Unlock the range you want users to be able to edit
    sheet.Cells["B4:B10"].Locked = false;

Once the necessary cells are unlocked, the next step is to protect the worksheet using the Protect method. This doesn't require a password and can be called directly. Applying protection activates the locking rules: unlocked cells remain editable while all others become read-only within the WPF viewer.

    // Protect the worksheet (this makes Locked cells read-only in the UI)
    sheet.Protect();

Run the WPF application and notice that users can only edit the cells contained in the unlocked B4:B10 range while the rest of the spreadsheet remains read-only, preventing any unauthorized editing.

Check out our Spread for WPF documentation to learn more about Worksheet Protection and Unlocking Cells.

C#/VB WPF Spreadsheet Components

This article only scratches the surface of the full capabilities of the Spread.NET WPF spreadsheet component. Review the documentation to see some of the many available features. Integrating a spreadsheet component into your applications allows you to customize your users' experience and provide them with familiar spreadsheet functionality that is all contained within your own controlled application.

How to Add a WinForms Rich Text Editor in a C# .NET App

Chelsea Devereaux — Wed, 23 Apr 2025 15:50:33 +0000

What You Will Need

ComponentOne WinForms Edition
Visual Studio 2022

Controls Referenced

Editor for WinForms

Tutorial Concept
This tutorial shows how to set up a rich text editing application using the C1Editor control and Xhtml as the data format. Learn how to load and save files, configure a modern, simplified ribbon toolbar, and more.

Offering users a rich text editing experience is essential for many desktop applications, whether used to edit articles, create formatted reports, or just add notes with links and images. Have you ever wondered how simple it is to bring this capability into your own app?

ComponentOne offers the C1Editor control that provides a simple yet effective way of adding rich text editing capabilities to your WinForms applications. In this blog, we will walk you through two simple ways to integrate this control so that users can easily create and edit rich content:

Build a Custom Toolbar to Implement Features via Code-Behind
Use the C1EditorRibbon for the Built-In Features (No Code Required!)

To demonstrate both approaches, we'll create a simple WinForms application that allows users to load HTML or XHTML files, format the content, make edits, and save their changes. So, let's get started!

Build a Custom Toolbar to Implement Features via Code-Behind

This approach is perfect when you want full control over the editor's features and to design your own toolbar. By handling actions in the code behind, the editing experience can be customized based on the application's requirements.

For this demo, let's implement some essential features of a rich text editor:

File Operations - Create a new file, open an existing one, and save changes.
Font Formatting - Change the font size and font face of the editor's content.

Let's start by creating a simple WinForms application and following the steps below:

Open Visual Studio and select File | New | Project to create a new Windows Form App.
Use the NuGet Package Manager to install the C1.Win.Editor and C1.Win.Command packages in your project.
Drag and drop the C1ToolBar and C1Editor control from the toolbox onto the form. In the C1ToolBar, place the buttons and combo boxes for the feature implementation.

The form layout should look like the image below:

Now that our layout is ready, let's add the functionality behind those toolbar buttons and combo boxes.

Implementing File Operations

First, we will implement basic file operations: New, Open, and Save.

New - Clicking the 'New' button will clear the editor content after prompting the user to save any unsaved changes:

    private void CreateNewDocument()
    {
        // Removes the "body" element from the editor, effectively creating a new document
        editorView.RemoveElementAsync(null, "body");
    }

Open - Pressing the 'Open' button lets users load an existing HTML or XHTML file into the editor:

    public void OpenDocument()
    {
        using (var dlg = new OpenFileDialog())
        {
            dlg.Filter = "HTML Files (*.html;*.htm)|*.html;*.htm|All Files (*.*)|*.*";
            if (dlg.ShowDialog() == DialogResult.OK && File.Exists(dlg.FileName))
            {
                // Load the document into the editor
                editorView.LoadDocumentAsync(Path.GetFullPath(dlg.FileName));

                // Apply default styles
                editorView.SetDefaultStylesAsync(null, true);
            }
        }
    }

Save: Clicking the 'Save' button allows users to store the current content in an HTML file:

     public bool SaveDocument()
     {
         using (SaveFileDialog dlg = new SaveFileDialog())
         {
             // Set default file name and filters for the save dialog
             dlg.FileName = "sampleFile";
             dlg.Filter = "HTML Files (*.html;*.htm)|*.html;*.htm|All Files (*.*)|*.*";
             dlg.DefaultExt = "html";
             dlg.AddExtension = true;
             if (dlg.ShowDialog() == DialogResult.OK)
             {
                 string filePath = dlg.FileName;
                 // Save the document asynchronously and check if the save operation was successful
                 if (editorView.SaveDocumentAsync(filePath) != null)
                 {
                     return true;
                 }
             }
         }
         // Return false if the user cancels or the save fails
         return false;
     }

Adding Font Formatting Options

Now that our file operations are working, let's add functionality to change the font family and font size of the text in the editor using the toolbar combo boxes. The step-by-step approach to achieve this is as follows:

Load the Default Content and Enable Editing - Begin by loading a sample HTML file into the editor once it's ready and turn on editing mode so users can make changes:

        private void editorView_C1EditorReady(object sender, EventArgs e)
        {
            string filename = @"Resources\\bookClub.html";
            if (File.Exists(filename))
            {
                editorView.LoadDocumentAsync(Path.GetFullPath(filename));
                editorView.DesignEdit = true; // Enable editing
            }
        }

2.Set Up the Font Combo Boxes with Initial Values: Next, fill the Font Face and Font Size combo boxes with some generic options:

        private void InitializeFontGroup()
        {
            // Populate the Font Face combo box with available system fonts
            foreach (FontFamily fontFamily in FontFamily.Families)
            {
                fontFaceComboBox.Items.Add(fontFamily.Name);
            }

            // Populate the Font Size combo box with common font sizes
            foreach (int size in new int[] { 8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 36, 48, 72 })
            {
                fontSizeComboBox.Items.Add(size.ToString());
            }

            // Keep the font group combo boxes in sync with the current text selection
            UpdateFontGroupBasedOnCurrentTextSelection();

            editorView.SelectedTextChanged += delegate
            {
                this.UpdateFontGroupBasedOnCurrentTextSelection();
            };
        }

3.Sync the Combo Boxes with the Selected Text: Using the code below, update the combo boxes to show the current font and size whenever users select some text:

        private async void UpdateFontGroupBasedOnSelection()
        {
            Font font = await editorView.GetSelectionFontInfoAsync();
            fontFaceComboBox.Text = font?.FontFamily.Name ?? "";
            fontSizeComboBox.Text = font?.Size.ToString() ?? "";
        }

4.Apply the Font and Size Changes: When users pick a new font or size from the combo boxes, we apply those changes to the selected text:

        // handing selection changed for fontFaceComboBox
        private void fontFaceComboBox_SelectionChangeCommitted(object sender, EventArgs e)
        {
            UpdateFontOnSelection("Face");
        }

        // handing selection changed for fontSizeComboBox
        private void fontSizeComboBox_SelectionChangeCommitted(object sender, EventArgs e)
        {
            UpdateFontOnSelection("Size");
        }

        // method to update the select font based on the changes in the font group combo-boxes
        public async Task UpdateFontOnSelection(string fontParameter)
        {
            Font font = await editorView.GetSelectionFontInfoAsync();

            if (font != null)
            {
                if (fontParameter == "Face")
                {
                    string fontFamilyName = fontFaceComboBox.Text;

                    editorView.SetFontAtSelectionAsync(new Font(
                        fontFamilyName,
                        font.Size,
                        font.Style,
                        font.Unit));
                }
                else if (fontParameter == "Size")
                {
                    editorView.SetFontAtSelectionAsync(new Font(
                        font.FontFamily,
                        float.Parse(fontSizeComboBox.Text),
                        font.Style,
                        GraphicsUnit.Point));
                }
            }
        }

There you have it—our custom toolbar is set and working!

Use the C1EditorRibbon for the Built-In Features (No Code Required!)

Now, let's make things even easier with another approach.

Instead of building the toolbar from scratch, we can simply use the C1EditorRibbon control already available in the form layout. This ready-made, Word-style ribbon is only available in the C1.Win.Editor package. All we need to do is place it on the form and connect it to the C1Editor control, as shown below:

    // attach the editor control to the ribbon
    editorRibbon.Editor = editorView;

Check out the following image to see it in action:

You can download the sample and follow along.

Conclusion

In this blog, we explored two ways to enhance your WinForms app with rich text editing—a manual approach with a custom toolbar and an effortless option with C1EditorRibbon. Whether you like customizing things your way or prefer a quicker plug-and-play setup, both approaches help you create a smooth and professional editing experience for your users.

You can experiment more with the C1Editor control by referring to its official documentation.

If you have any inquiries, please leave them in the comments section below. Happy Coding!

How to Load, Modify, and Save DOCX in C# .NET

Chelsea Devereaux — Mon, 31 Mar 2025 17:07:50 +0000

Tutorial Concept
Learn how to programmatically load, modify, and save Word .docx files in a server-side application using a .NET Word API. With this API, developers can read existing DOCX files, make modifications, and save the updated files seamlessly using C#.

What You Will Need

Visual Studio (This example uses VS2022)
.NET 8+
NuGet Packages: DS.Documents.Word

Controls Referenced

Document Solutions for Word - .NET Word API
Online Demo Explorer | Documentation | Other Word API Blogs

Enterprise-level software developers often need to programmatically manage Word documents in their applications, whether for document automation, content updates, or integrating Word processing into enterprise workflows. A powerful .NET Word API allows developers to efficiently load, modify, and save DOCX files without relying on Microsoft Word, ensuring seamless server-side document handling at scale.

With these APIs, developers can open existing Word documents, make precise modifications—such as updating text, inserting images, or adjusting formatting—and then save the updated files programmatically. This streamlined approach enhances efficiency, improves document consistency, and enables automation across business applications.

In this guide, we’ll demonstrate how to use Document Solutions for Word, a .NET Word API, to programmatically load, modify, and save DOCX files. You'll see how it simplifies document processing in enterprise applications while maintaining full control over content and formatting.

Steps to Generate a Word DOCX File Using C# .NET

Create a .NET Console Application – Includes installing a .NET Word API
Load an Existing DOCX File into a .NET Application - Invoking the Load Method
Update Images Contained in a DOCX Shape
Text Replacement with Regular Expressions
Add a Hyperlink to the Loaded DOCX File
Save the Updated Word .DOCX Document – Invoking the Save Method

Download a finished C# .NET 8 Console sample application here.

Create a .NET Console Application

Open Visual Studio 2022 and create a new Console App—for this example, we create a C# app and name it DsWord_Load_DOCX.

For this example, we will be using .NET 8.

Right-click the project in the Solution Explorer and choose Manage NuGet Packages. In the Package source at the top right, select NuGet.org. Click the Browse tab on the top left and search for "DS.Documents." On the left panel, select DS.Documents.Word.

Add the needed namespace to the Program.cs file:

    using GrapeCity.Documents.Word;

Initialize the server-side Word DOCX file instance by invoking the GcWordDocument class in the main function of Program.cs. This creates a new .NET Word document object.

    // Create a new Word document:
    GcWordDocument doc = new GcWordDocument();

Load an Existing DOCX File into the .NET Application

Invoke the .NET Word API’s Load method to open an existing MS DOCX file into an instance of the GcWordDocument class.

    // Load an existing Word document
    doc.Load("Flyer.docx");

Check out the Load an MS Word DOCX File online demo.

Update Images Contained in a DOCX Shape

This .NET Word API automates graphic updates in Word documents. It supports various shapes and fill types—like ImageFill—allowing users to simply supply new images and have them automatically integrated into the DOCX file programmatically. In our flyer, the image is accessed via the ImageFill property of the FillFormat class and replaced using the EmbeddedImageData’s SetImage method.

    // Update ImageFill for a shape
    var newImage = new FileStream("NewHouse.jpg", FileMode.Open);
    doc.Body.Shapes[6].Fill.ImageFill.SetImage(newImage, "image/jpg");
    newImage.Close();

Notice that the Flyer.docx file’s image has now been updated:

DOCX Text Replacement with Regular Expressions using C

The DsWord API simplifies updating dynamic content. In this example, a regular expression replaces the flyer’s ever-changing house price by matching a dollar sign followed by one or more digits. Enable regex matching by setting the RegularExpressions property to true in either the FindOptions or FindReplaceOptions class.

    // Find and replace text using regular expressions
    FindReplaceOptions fo = new FindReplaceOptions(doc);
    fo.RegularExpressions = true;
    doc.Body.Replace("\\$[0-9]+", "$50000", fo);

Below is the resulting document generated after executing the above-defined code to find and replace text.

Discover additional find and replace text in DOCX file techniques in our online explorer demos.

Add a Hyperlink to the Loaded DOCX File

The Document Solutions for Word’s API allows developers to easily convert plain text into a clickable hyperlink in a Word DOCX document. Using the Hyperlink class, you can automate this process, making it as simple as updating the document with the provided URL. For additional information, refer to the Links documentation.

    //Add a hyperlink
    var par = doc.Body.Paragraphs[18];
    par.GetRange().Runs[0].Delete();
    Hyperlink wlink = par.GetRange().Hyperlinks.Add(new Uri("http://www.example.com"), "", "Click to go to website.");

With the code above implemented, notice the updated DOCX files now have a hyperlink.

Save the Updated Word .DOCX Document using C

Save the server-side MS Word document using the APIs Save method of the DsWordDocument class.

    //Save the created Word file
    doc.Save("UpdatedDoc.docx");

Notice the updated and saved .NET DOCX file now contains the new image, updated price, and a hyperlink to the company's website.

Learn More About this C# .NET Word API

This article only scratches the surface of the full capabilities of Document Solutions for Word, our .NET Word API library. We recommend checking out another blog in this series, How to Programmatically Create Word DOCX Files in C# .NET, or visit our online demo explorer and documentation to learn more.

50 Top Tips for Better React App Development

Chelsea Devereaux — Mon, 31 Mar 2025 16:45:49 +0000

ReactJS remains one of the most popular JavaScript frameworks. Many developers use it in some form to build standalone apps or enhance other applications. For example, a C# developer might use the .NET core backend while using React to create the front end. Regardless of how you implement React, it’s always good to adhere to best practices to create functional products that perform as they should.

This article provides React developers with 50 examples of React concepts. You should always aim to maintain a clean, efficient, and scalable codebase that can handle projects as they grow in complexity. In the end, you should gain some insights into improving the quality of your React applications.

In this blog, we’ll review tips for:

Basic React Best Practices
Advanced React Development Techniques
React Performance Optimization
React Code Quality and Testing
React-Specific Features
Development Workflow

Basic React Best Practices

1. Use Capitals for Component Names

Make sure you capitalize the names of your components. This allows JSX to distinguish between HTML elements and custom components. Remember, React views lowercase names like <div> as a native HTML element. Any capitalized names will be handled as custom React components.

    // Capitalized function component
    function MyButton() {
        return <button>Click me!</button>;
      }

      // Capitalized arrow function component
      const MyHeader = () => <h1>Hello World!</h1>;

      // Class component with capitalized name
      class MyComponent extends React.Component {
        render() {
          return <div>Welcome!</div>;
        }
      }

      // Using the components
      function App() {
        return (
          <div>
            <MyHeader />
            <MyButton />
            <MyComponent />
          </div>
        );
      }

      export default App;

2. Organize Your React Components

Tools like Bit help streamline development by making it easier to share, manage, and collaborate on components across multiple projects. Bit allows you to treat every component as an independent package. They become easier to maintain and update without unnecessary code duplication.

3. Use Error Boundaries

Error boundaries are special components that catch JavaScript errors in a child component tree. They then log the errors and display a default UI versus the entire application crashing. Error boundaries isolate errors to the components they wrap, which allows the rest of the app to continue functioning.

    import React, { Component } from "react";

    class ErrorBoundary extends Component {
      constructor(props) {
        super(props);
        this.state = { hasError: false };
      }

      static getDerivedStateFromError(error) {
        return { hasError: true }; // Update state and show default UI
      }

      componentDidCatch(error, info) {
        console.error("Error caught by boundary:", error, info); // error details
      }

      render() {
        if (this.state.hasError) {
          return <h2>Something went wrong. Please try again.</h2>; // Default UI
        }
        return this.props.children; // show children
      }
    }

    export default ErrorBoundary;

4. Organize Your Files and Folders Logically

It’s always good to set up your components, hooks, and assets in a predictable way. This helps you maintain clean code that’s easier to maintain as your application grows.

5. Use CSS Modules to Avoid Global Conflicts

CSS modules are used to scope CSS locally to React components. You avoid issues like global namespace collisions or style leaks.

6. Separate State Business Logic from the UI

Separating your state business logic makes components cleaner and easier to read. If another developer on the team works on your app, they can quickly determine what items are responsible for logic versus rendering. The separation also makes it easier to run unit tests.

    // useProduct.js
    import { useState, useEffect } from "react";

    export function useProduct() {
      const [user, setProduct] = useState(null);

      useEffect(() => {
        fetch("/api/user")
          .then((res) => res.json())
          .then((data) => setProduct(data));
      }, []);

      return product;
    }

    // ProductItem.jsx
    import { useProduct } from "./useProduct";

    function ProductItem() {
      const product = useProduct ();

      return product ? <div>{product.name}</div> : <p>Loading...</p>;
    }

    export default ProductItem;

7. Use Image Compression

Image compression reduces an image’s file size without significantly impacting quality. Your React app loads faster and is more responsive to users. Compressing images also improves performance on mobile networks and reduces data usage for mobile users.

8. Use GZip Compression

GZip compression reduces the size of files sent from a server to a client. You can compress the size of assets, like JavaScript bundles and CSS, before sending them over a network. This results in reduced network latency and faster page loading.

9. Remove Unnecessary Comments

While comments are great for explaining the purpose of components and functions, adding too much detail can cause confusion. Remember to remove lines, like Console.log or debugger, that are put in place during development.

10. Avoid Performing Work Directly in Render

The render method should only depend on props and state. This area should have no side effects or need for heavy computations. Performing work in render can cause unexpected bugs and other performance issues. In this situation, you might implement useMemo for computations or useEffect for side effects.

    import { useMemo } from 'react';

    function OrderList({ orders }) {
      const filteredOrders = useMemo(() => {
        return orders.filter(order => order.isActive).sort((a, b) => a.name.localeCompare(b.name));
      }, [users]); // Recomputes only when orders changes

      return (
        <ul>
          {filteredOrders.map(order => <li key={order.id}>{order.name}</li>)}
        </ul>
      );
    }

11. Use Self-Closing Tags

Self-closing tags represent elements without child content. They make your components more compact and easier to read. Using self-closing tags reduces visible code clutter when you have a lot of elements in your app. They also comply with JSX syntax, which requires properly closing all tags.

    <>
    <img src="logo.png" alt="Logo" />
    <input type="text" placeholder="Enter name" />
    <br />
    <hr />
    <meta charSet="UTF-8" />
    <link rel="stylesheet" href="styles.css" />
    </>

12. Get Rid of Curly Braces When Passing String-Type Props

Eliminating curly braces when passing string-type props cleans up the clutter in your syntax. Other developers also have an easier time reading and understanding your code. Removing curly braces is also more consistent with HTML standards.

    <MyComponent title="Hello World" />

13. Hide Elements With No Children Using the CSS :empty Pseudo-Class

Using the :empty pseudo-class to select elements with no children can keep empty elements from taking up layout space. You don’t have to write more conditional logic to hide empty elements. Instead, you can write it once with CSS and automatically handle all empty elements.

CSS:

    p:empty {
        display: none;  /* Hide empty <p> tags */
      }

Apply CSS:

    p:empty {
        display: none;  /* Hide empty <p> tags */
      }

14. Keep Component Size Small

Avoid having big files full of components. Instead, split your components between multiple files in a way that makes sense.

Advanced React Development Techniques

15. Use Functional Components Over Class Components

Because functional components use plain JavaScript functions, they’re easier to read and are more concise. Class components use a lot of boilerplate, making it harder to perform the adjustments you need down the line.

Using functional components with React Hooks, like useState and useContext, allows you to handle state and lifecycle components without classes. You enjoy all the benefits of class components with cleaner syntax.

    //Class component example
    class Welcome extends React.Component {
      render(){
        return <h1>Hi, {this.props.name}</h1>
      }
    }

    //Example written as Functional Component
    const Welcome = ({name}) => <h1>Hi, {name}</h1>;

16. Aim for Reusability

Another significant reason to switch from class components to functional components is that they’re easier to reuse throughout different React applications. You can avoid making them hard to maintain by creating smaller components.

Below is an example of creating a Button that handles icons and has no other responsibilities. Making it modular allows you to use this code in different apps without doing a lot of reconfiguring.

    function Iconbutton({ onClick, iconClass}) {
      return (
        <button onClick={onClick}>
          <i className={iconClass}></i>
        </button>
      );
    }

    export default IconButton;

17. Perform Type Checking with PropTypes

PropTypes help you catch bugs by validating the types of props being passed to components. They ensure components receive the correct data types. For example, if you build a component that expects a string value but receives a number, it could lead to UI issues or runtime errors.

A PropType warns you when props don’t match the component’s expected type.

    import React from 'react';
    import PropTypes from 'prop-types';

    function UserCard({ name, age, isMember, hobbies }) {
      return (
        <div>
          <h2>{name}</h2>
          <p>Age: {age}</p>
          <p>Status: {isMember ? "Member" : "Guest"}</p>
          <ul>
            {hobbies.map((hobby, index) => <li key={index}>{hobby}</li>)}
          </ul>
        </div>
      );
    }

    // ✅ PropTypes type checking
    UserCard.propTypes = {
      name: PropTypes.string.isRequired,        //

18. Re-render Components Using the useState Hook

The useState hook allows you to reuse stateful logic already implemented in a separate component. Instead of using class-based components to maintain state, useState helps preserve the scope of a re-rendered component after a variable changes.

    import React, { useState } from 'react';

    function Counter() {
      const [count, setCount] = useState(0);

      return (
        <div>
          <p>Count: {count}</p>
          <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
      );
    }

    export default Counter;

19. Place State at Correct Level

Place state next to the nearest common ancestor when you have multiple components that need to share it. This keeps you from having to duplicate state in each component, allowing you to pass down data and functions through props.

20. Employ Composition Over Inheritance

Composition is a technique for combining simple components to create more complex ones. Think of it like putting Lego bricks together to create flexible, reusable UI structures. Composition lets you build independent components versus tight coupling between parent and child components.

    function Card({ title, content, footer }) {
        return (
          <div className="card">
            <h2>{title}</h2>
            <p>{content}</p>
            {footer}
          </div>
        );
      }

      function App() {
        return (
          <Card
            title="Welcome!"
            content="This is an example of a composable card component."
            footer={<button>Click Me</button>}
          />
        );
      }

21. Use Curried Functions to Reuse Logic

Curried functions are a functional programming technique. Instead of taking all arguments at once, curried functions take the first argument and then return another function that takes the following argument, etc. This powerful technique lets you reuse logic in apps requiring the need to pass partially applied functions as callbacks or props.

    const add = a => b => a + b;

    const addFive = add(10);  // Partially apply with '10'
    console.log(addTen(20));  //

React Performance Optimization

22. Utilize Hooks Over Class Lifecycle Methods

One of the most significant reasons to start using hooks is that they make state management and side effects easier to manage. Below is an example of using both to handle a button click, which causes a re-rerender and updates the document title.

    import { useState, useEffect } from 'react';

    const Counter = () => {
      const [count, setCount] = useState(0);

      useEffect(() => {
        document.title = `Count: ${count}`;
      }, [count]);

      return <button onClick={() => setCount(count + 1)
    };

23. Use Virtualization When Rendering Large Data Sets

Rendering a list or table with a lot of data can slow down your React app’s performance. Using virtualization alongside libraries, like react-windows, can help you deal with this problem. You only render currently visible data in the list, which makes it possible to set up lists of any size.

    import React from 'react';
    import { FixedSizeList as List } from 'react-window';

    const Row = ({ index, style}) => (
      <div style={style}>
        📝 Item #{index + 1}
      </div>
    );

    function VirtualizedList() {
      return (
        <List
          height={400}       // Height of the list viewport
          itemCount={1000}   // Total number of items
          itemSize={35}      // Height of each item
          width={300}        // Width of the list
        >
          {Row}
        </List>
      );
    }

    import VirtualizedList from './VirtualizedList';

    function App() {
      return (
        <div style={{ padding: '20px' }}>
          <h2> Virtualized List Example</h2>
          <VirtualizedList />
        </div>
      );
    }

    export default App;

24. Use Debouncing to Limit Excessive Function Calls

The debouncing technique is helpful when handling events like keystrokes or scrolling. Triggering a function too often can hinder your application's performance. Invoking a debounced function sets a specified delay. Firing the same event before the delay ends resets the function. Your function only executes after the event stops executing. This reduces lag in the application, improving overall performance.

    import React, { useState, useEffect } from 'react';

    function DebouncedInput() {
      const [inputValue, setInputValue] = useState('');
      const [debouncedValue, setDebouncedValue] = useState('');

      useEffect(() => {
        const handler = setTimeout(() => {
          setDebouncedValue(inputValue);
        }, 500); // 500ms debounce delay

        // Clear the timeout if inputValue changes before 500ms
        return () => clearTimeout(handler);
      }, [inputValue]);

      return (
        <div className="p-4 max-w-md mx-auto">
          <input
            type="text"
            value={inputValue}
            onChange={(e) => setInputValue(e.target.value)}
            placeholder="Type something..."
            className="w-full p-2 border rounded"
          />
          <p className="mt-2 text-gray-600">
            Debounced Value: <strong>{debouncedValue}</strong>
          </p>
        </div>
      );
    }

    export default DebouncedInput;

25. Optimize Performance With useMemo and useCallback

React components re-render after every prop or state change. Using hooks, like useMemo and useCallback, allows you to cache values and functions. That way, the app doesn’t have to perform intensive recalculations or recreations after each render. The useMemo hook caches calculation results and only recomputes after a dependency change, while the useCallback caches function references.

Example without using useMemo:

    function ExpensiveComponent({ number}) {
        const expensiveCalcluation = (num) => {
          console.log("Calculating...");
          return num * 2;
        };

        const result = expensiveCalculation(number); // every render gets run

        return <p>Result: {result}</p>;
      }

Example using useMemo:

    import { useMemo } from "react";

    function ExpensiveComponent({ number }) {
      const result = useMemo(() => {
        console.log("Calculating...");
        return number * 2; // Large calculation
      }, [number]); // Recaculates when number changes

      return <p>Result: {result}</p>;
    }

Example without useCallback:

    function Parent({ count }) {
        const handleClick = () => console.log("Clicked!");

        return <Child onClick={handleClick} />;
      }

      const Child = React.memo(({ onClick }) => {
        console.log("Child rendered");
        return <button onClick={onClick}>Click me</button>;
      });

Example with useCallback:

    import { useCallback } from "react";

    function Parent({ count }) {
      const handleClick = useCallback(() => {
        console.log("Clicked!");
      }, []); // Memoized function reference

      return <Child onClick={handleClick} />;
    }

26. Use Class Names or CSS-in-JS Libraries for Dynamic Styling

Even though they seem like a quick and easy solution, using inline styles can cause performance issues. It’s also hard to maintain them when you want to change the overall look of your React app. Class names make it easier to maintain the look and feel of your React app.

27. Avoid Inline Function Definitions

If you define functions inside render, return, or JSX inline, you may end up with performance issues and unneeded rerendering. Every new function consumes more memory and processing time, which affects the user experience.

28. Implement Dependency Optimization

Review your code and examine how much it relies on internal and external dependencies. Some of them may provide functionality that isn’t necessary. For example, if you’re using a library and only need 10 of the 50 methods available, see if you can remove any unnecessary functions.

Below is an example of optimizing the useEffect and useCallback dependencies:

    const getData = useCallback(() => {
        // get logic
      }, []); // Stable reference prevents unnecessary re-renders

      useEffect(() => {
        getData();
      }, [getData]);

29. Use CDNs

Content Delivery Networks (CDNs) are distributed servers that deliver web content. You can use CDNs in React to serve static assets like CSS files and images. Because CDNs automatically perform caching, you can reduce the need for repeated downloads. Most CDNs provide additional security protections like TLS/SSL encryption and firewall services.

30. Use Fragments Over DOM Nodes

Fragments let you group multiple elements without needing to add extra DOM nodes. You can avoid multiple <div> elements that complicate your DOM. Fewer DOM nodes also help your pages load faster and use less memory. This is helpful when working with large lists and deeply nested components.

    function App() {
        return (
          <>
            <h1>Hello World</h1>
            <p>Let's Start Learning React!</p>
          </>
        );
      }

31. Store Item IDs from a List Versus an Item

If you need to track selected items, try capturing the ID versus the item itself. This reduces your app’s state size and memory usage. You avoid having to deal with large objects with unnecessary data. IDs are more efficient and lightweight. You also reduce the chances of accidental mutations when working with more complex objects.

    function ItemSelector({ items }) {
        const [selectedItemId, setSelectedItemId] = useState(null);

        const selectedItem = items.find((item) => item.id === selectedItemId);

        return (
          <div>
            {items.map((item) => (
              <button key={item.id} onClick={() => setSelectedItemId(item.id)}>
                Select {item.name}
              </button>
            ))}
            {selectedItem && <p>Selected: {selectedItem.name}</p>}
          </div>
        );
      }

32. Generate Random Keys with Stable Keys

The key prop helps identify elements in lists and optimizes rendering. While you can use Math.random for this purpose, that can lead to performance degradation. Math.random generates keys after every render, which causes components to lose their state. Use a stable key list instead to keep your keys consistent. React will only update changed items and preserve component state.

    function StableKeyList({ items }) {
        return (
          <ul>
            {items.map(item => (
              <li key={item.id}>{item.name}</li< // Use a stable individual ID
            ))}
          </ul>
        );
      }

React Code Quality and Testing

33. Use Default Props for Safety

Default props add an additional safety layer to your React components by ensuring there are always valid values. Your component can still function using a default value if a prop is missing. This helps you avoid runtime errors like “Undefined is not an object.” This also means you don’t have to write as many conditional checks.

    function Greeting({ name = "Guest" }) {
        return <h1>Greetings, {name}!</h1>;
      }

      <>

        <Greeting /> // Renders: Greetings, Guest!
        <Greeting name="Peter" /> // Renders: Greetings, Peter!
    </>

34. Track Dangerous URLs

Tracking problematic URLs helps you prevent cross-site scripting (XSS) attacks, where hackers attempt to inject malicious scripts into your code. You can also stop attackers from manipulating URLs to disclose information within query strings or path parameters.

35. Use a Sanitization Library to Render HTML

Using a sanitization library, like DOMPurify, cleans your HTML and removes potentially harmful code before rendering it. Without sanitization, your app may be more vulnerable to attacks like session hijacking and credential theft.

36. Create Tests for All Code

You can catch errors early and minimize mistakes by testing your components. Testing ensures that components function as intended when implemented.

37. Apply the ES6 Spread Function

The ES6 spread operator syntax is used to copy, merge, and pass data in JavaScript. When used with React, you can simplify tasks (like prop passing, copying and updating state, and merging objects and arrays) without mutating data.

    const props = { name: 'Janet', age: 33, state: 'Florida' };
    <MyComponent {...props} />

38. Use Security to Enhance HTTP Authentication

React doesn’t automatically handle authentication. It requires secure backend systems to protect data exchanges. You want to prevent hackers from intercepting sensitive information like passwords. Adding additional security protocols keeps your app compliant with data privacy regulations like GDPR or CCPA.

39. Protect Against Faulty Authentication

Without strong authentication mechanisms, your React app could be vulnerable to data breaches and unauthorized access. Strengthening authentication protects against attacks like brute force and token theft. Use secure methods like OAuth2.0 or JSON Web Tokens (JWT) with signing algorithms like HS256.

40. Add Default XSS Protection with Data Binding

React’s data binding system provides default XSS protection. It automatically escapes content when rendering variables into the DOM. Adding XSS protection protects your app against malicious script injection into forms or URLs. You can also stop attackers from manipulating client-side data or defacing your UI.

Default React:

    function App() {
        const userInput = 'img src="xx" onerror="alert(\'XSS Attack Attempt\')" />;

        return <div>{userInput}</div>; // Renders as text, NOT as HTML
      }

With DomPurify:

    import DOMPurify from 'dompurify';

    function SafeComponent({ htmlContent }) {
      const sanitizedContent = DOMPurify.sanitize(htmlContent);
      return <div dangerouslySetInnerHTML={{ __html: sanitizedContent }} />;
    }

React-Specific Features

41. Use the React Context API for Global State

The Context API lets you manage global state without prop drilling (passing props down through multiple component layers). That means you can pass data directly to nested components without going through intermediate ones.

    import { createContext, useState, useContext } from "react";

    // Create context
    const ThemeContext = createContext();

    // provider component
    export function ThemeProvider({ children }) {
      const [theme, setTheme] = useState("light");

      const toggleTheme = () => {
        setTheme((prev) => (prev === "light" ? "dark" : "light"));
      };

      return (
        <ThemeContext.Provider value={{ theme, toggleTheme }}>
          {children}
        </ThemeContext.Provider>
      );
    }

    // Custom hook
    export function useTheme() {
      return useContext(ThemeContext);
    }

42. Use Map Functions to Render Arrays Dynamically

The .map() function lets you render UI elements directly from data arrays. It’s an excellent option when you need to display a list of products, users, or other item lists. You also eliminate the need to repeat JSX code for each item and improve the scalability of your React app.

    function DessertList() {
        const desserts = ["Chocolate Cake", "Banana Pie", "Vanilla Pudding"];

        return (
          <ul>
            {desserts.map((dessert, index) => (
              <li key={index}>{dessert}</li>
            ))}
          </ul>
        );
      }

43. Use Redux DevTools to Debug State

Redux is a browser extension that lets you track, inspect, and debug state and actions in a Redux-powered React app. You can see your entire Redux store at any point and inspect nested state structures without using console logging. The tool also performs tasks like replaying dispatched actions when testing various scenarios and modifying actions to watch real-time state responses.

You’ll first need to install the Chrome or Firefox extension.

    const props = { name: 'Janet', age: 33, state: 'Florida' };
    <MyComponent {...props} />

Development Workflow

44. Lazy Load Your Components

With lazy loading, you load components only when needed instead of all at once. This improves app performance and provides a better user experience.

45. Use Snippet Components

Snippet components are great when you need to plug in a piece of reusable code that performs a specific isolated functionality with no dependencies. You can build it once and use it within multiple React apps. You can tap into snippet libraries like ES7 React and JS Snippets.

46. Use Conditional Rendering

Conditional rendering lets you display different UI elements under specific conditions. It’s similar to adding if-else logic. Your application can dynamically adjust content based on user actions, data changes, or app state.

    function Greeting({ isLoggedIn }) {
        if (isLoggedIn) {
          return <h1>Welcome back!</h1>;
        }
        return <h1>Please sign in.</h1>;
      }

47. Use Higher Order Components (HoCs)

Higher-order components are functions that take components and return a more enhanced component. They’re put in place to reuse component logic and separate concerns. You also avoid the need to duplicate code throughout your application.

    import React from 'react';

    const withAuth = (WrappedComponent) => {
      return ({ isAuthenticated, ...props }) => {
        if (!isAuthenticated) return <p>Log in here</p>;
        return <WrappedComponent {...props} />;
      };
    };

    function Dashboard() {
      return <h1>Dashboard</h1>;
    }

    const ProtectedDashboard = withAuth(Dashboard);

    function App() {
      return <ProtectedDashboard isAuthenticated={true} />;
    }

    export default App;

48. Use Parent/Child Component to Manage Multiple Props

Set up parent components that hold state and pass data to smaller child components. Let the parent focus on logic and use child components for rendering. This structure simplifies management by confining data and logic updates to the parent.

Example of parent:

    import React, { useState } from 'react';
    import UserCard from './UserCard';

    function App() {
      const [user, setUser] = useState({
        name: 'Alice LEe',
        age: 55,
        state: 'Colorado',
        email: 'alicelee@email.com',
      });

      return <UserCard user={user} />;
    }

    export default App;

Example of child:

    function UserCard({ user }) {
        const { name, age, location, email } = user;

        return (
          <div className="p-4 border rounded">
            <h2>{name}</h2>
            <p>{age} years old</p>
            <p>State: {state}</p>
            <p>Email: {email}</p>
          </div>
        );
      }

      export default UserCard;

49. Implement Wishful Thinking

Wishful thinking is a programming technique in which you write code as though a component, feature, or function already exists. The goal is to focus on how you wish to use something before worrying about the implementation details. Wishful thinking speeds up prototyping and encourages developers to think in a way that puts usability first.

50. Distinguish Between Initial State and Current State

Your initial state is the starting value where your component mounts, while your current state represents the latest value after performing state updates. Differentiating between the two allows you to reset and reinitialize logic as needed. You can also maintain predictable state updates and improve component reusability.

    import { useState } from 'react';

    function Form() {
      const intitialFormState = { name: 'Luke Skywalker' };
      const [formData, setFormData] = useState(initialFormState);

      const handleChange = (e) => {
        setFormData({ ...formData, name: e.target.value });
      };

      const resetForm = () => setFormData(initialFormState);  // Resets to initial state

      return (
        <>
          <input value={formData.name} onChange={handleChange} />
          <button onClick={resetForm}>Reset</button>
        </>
      );
    }

Conclusion

Believe it or not, these tips only scratch the surface of how you can become a better React developer. Keep checking back for more tips and tricks to help improve the performance and reliability of your applications.

The Definitive Guide to WPF Controls

Chelsea Devereaux — Mon, 31 Mar 2025 15:51:49 +0000

WPF (Windows Presentation Foundation) is a modern .NET development framework for creating software applications that run on Windows Operating Systems. WPF provides a comprehensive set of application-development features that include UI controls, data binding, 2D and 3D graphics, animation, templates, documents, media, and more.

One of the key differences between WPF and its predecessor, Windows Forms (or WinForms), is the approach used to design the user interface and control templates. In this article, we examine everything about WPF controls, from standard availability to advanced customization.

WPF versus WinForms

WinForms was the preferred option for developing a desktop Windows application until .NET 3.0 when Microsoft added WPF to the .NET stack of frameworks. WPF added many improvements, including better data binding, styling, and performance enhancements. At the time of this writing, WPF is still the preferred Windows desktop development platform with .NET 9.0, as Microsoft announced new WPF features at Microsoft Build 2024.

WPF takes advantage of modern 2D and 3D graphics hardware, allowing Windows applications to more easily offload some graphic tasks to the GPU using DirectX rendering. This makes WPF the preferred framework for applications that need to focus on animations, styles, and media.

What is XAML?

One of the key differences of WPF is how developers create user interfaces. WPF was the first .NET platform to use XAML (eXtensible Application Markup Language) as the syntax for defining user interfaces. The application logic is still written in C# or VB.NET code, just like WinForms, but the declarative nature of XAML allows interfaces to be developed and designed in a straightforward approach. XAML works very similarly to HTML, allowing easy and responsive layout definitions.

WPF Controls Overview

WPF controls are reusable design elements that help developers implement a wide variety of features. You can think of a control toolbox like a box of Lego pieces that you use to build the application. UI controls include common software UI elements like buttons, text boxes, date pickers, toolbars, menus, lists, images, and much more.

Controls have an API (application programmable interface) that lets you configure how the control will work for your specific application. Consider a Button control, for example. It has a “Content” property, which can be set to what text you want displayed on the button. It also has size properties like “Width” and “Height.” It also has events triggers when actions occur, such as a “Clicked” event that fires when the user clicks the button. Complex controls have richer APIs.

Standard WPF Controls

The base controls included with .NET itself are often known as “standard” or “basic” controls. They are part of the base .NET libraries. Standard .NET WPF controls typically fall into four main categories: input, layout, data, and media (note: these groupings are unofficial and somewhat subjective).

Below is a table containing the standard WPF controls.

Let’s take a look at some common WPF control examples.

WPF Input Controls

Input controls are used to collect input from the user such as clicking and text-based input. The standard WPF controls include most basic input controls you need to create a rich data entry form. Each input control supports a “Value” or similar property representing the input value, which can be retrieved from code or through two-way data binding (read more on data binding in the MVVM section).

ComboBox example:

<ComboBox MinWidth="200" HorizontalAlignment="Left" ItemsSource="{Binding FontSizes}" SelectedIndex="0" IsEditable="True" />

WPF Layout Controls

Layout controls define the arrangement of their child elements. They are essentially containers that each have unique rules on how to arrange the controls contained within them. The WPF standard controls include almost all the typical layouts you would ever need, including:

Grid — arranges children into rows and columns
StackPanel — arranges children in a single horizontal or vertical row
WrapPanel — arranges children horizontally (or vertically) until they fit and creates additional rows (or columns) to fit all the children
DockPanel — arranges children along the edges of the container, with undocked children taking up the remaining space in the middle
Canvas — arranges children using absolute positioning (basically how WinForms positioned controls)

Grid example:

<Grid Margin="10">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition />
    </Grid.RowDefinitions>
    <TextBlock Text="My WPF Application" FontSize="36" Grid.Row=1 Grid.ColumnSpan="2" />
</Grid>

There are other layout-related controls, including Borders, Shapes, ScrollBars, and Splitters, which help enhance the visual aspect of the layout. The Window control acts as the application’s frame.

WPF Data Controls

Data controls are used for visualizing and binding to collections of data. The DataGrid is used to display and edit tabular data, and the ListView is a more straightforward bound list control. Unlike WinForms, WPF does not include charts besides the handy little ProgressBar.

The DataGrid control is often the central and most powerful part of the application, providing the most data-centric functionality in one control. Users can view, edit, and analyze their data with one powerful control. The standard WPF DataGrid control supports basic functions like data binding, sorting, cell formatting, column reordering, selection, grouping, and row details.

WPF DataGrid control

Since WPF does not include many data-bound controls, you may consider adding some third-party controls like the FlexGrid. Third-party WPF controls extend the common ones with more features and styles as well as expand the toolbox to include many more.

WPF FlexGrid Datagrid Control

WPF Media Controls

Media controls are used to display files such as images, videos, and documents. With WPF, you can more easily display high-quality video and audio files in your desktop application using the MediaElement.

MediaElement example:

<MediaElement Source="media/numbers-aud.wmv" />

How to Get Started with Standard WPF Controls

The best place to start learning is the new WPF Gallery Preview app in the Windows Store. Microsoft created this as a one-stop resource for learning about the WPF UI tools and control features. This developer tool demonstrates WPF controls and styles for .NET 9 and onwards.

WPF Gallery Preview Windows App

Continue reading this blog to expand on topics like styles and data binding.

Custom WPF Controls

Additional controls and features can be achieved by customizing the standard controls or personally creating new controls. WPF features a built-in architecture for creating custom controls more easily than with WinForms due to XAML. You can customize existing controls in two ways: with Styles and Templates. You can create your own custom controls with User Controls or license production-ready third-party controls from the community. Let’s look closer at each of these areas.

How to Customize Standard Controls with Styles and Templates

One of the great features of WPF and other XAML frameworks is Styles. Styles allow us to create reusable, encapsulated sets of properties for any UI element. For instance, a Style can be used to customize the appearance of Buttons across your entire application. Plus, implicit and explicit styles allow you to manage the styling scope further.

An implicit style has no “Key” set, so it will apply to every targeted UI element within its scope.
A Style defined within a Window has a scope of just that Window.
A Style defined within the App.xaml file has an application-wide scope.

Example:

It’s recommended to put styles in your App.xaml file so every form and window in the application can access it if necessary. This example creates a Style to create red buttons.

<Application x:Class="TestWpfDemoApp.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:TestWpfDemoApp"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <Style x:Key="RedButtonStyle" TargetType="Button">
            <Setter Property="Background" Value="Red" />
        </Style>
    </Application.Resources>
</Application>

Then, throughout your UI, you can reference the style like this:

<Button Content="Button 3" Style="{StaticResource RedButtonStyle}"/>

If you remove the Key, the style will automatically apply to every button!

Styles are limited to the public API of the UI control. To customize beyond that, you must customize the control template. For example, the WPF Button control is limited to appearing as a rectangle. If you wish to create a circular button, you could create a User Control, which we’ll discuss next, or customize the Button’s control XAML template.

To learn more about customizing the control templates, see How to Create a Template for a Control (WPF.NET).

How to Create Custom User Controls

Visual Studio includes a UserControl (WPF) file template that can be used to create a reusable, custom control. A user control can be composed of standard controls. You could use it to create a data entry form that’s used several times in the application, or you can use it to create a custom control.

WPF includes several primitive elements that help create custom elements. For example, you could create a user control with an Ellipse and a TextBlock to create a round button.

You can reference your custom user controls throughout your application using the “local” XML namespace.

Third-Party WPF Controls and Components

Microsoft made the .NET frameworks extensible, allowing developers to extend the capabilities of their own applications further. Third-party control suites typically fill the gap by adding essential UI controls that are missing from the basic set (like charts!), as well as providing more built-in features for datagrids and input controls.

While you may find some free WPF controls on GitHub, Microsoft also has a Community Toolkit that provides additional controls like InkCanvas and Maps. You can even invest in professionally developed UI controls from companies like DevExpress, MESCIUS (formerly GrapeCity), Progress (formerly Telerik), and SyncFusion. Unlike most free control suites, these come with complete samples and documentation and are regularly updated and tested. You can save a lot of development time by licensing a third-party WPF control suite rather than implementing those custom controls independently.

Top Custom WPF Controls

Since we can’t possibly list every third-party WPF control, we will share what we consider to be some of the most useful ComponentOne WPF controls.

WPF Chart Controls

Since charts are not included in the standard toolbox but are essential for business applications and dashboards, they are a very useful control to license from a control vendor. Plus, they are complex and difficult to write from scratch independently. For example, the ComponentOne FlexChart package includes 2D WPF charts that support all common chart features with high-performing Direct2D rendering.

WPF FlexChart Control

WPF Reports and PDF Libraries

The standard WPF controls include basic document generation and XPS support. That’s fun, but what you really need is a powerful report generator and PDF viewer. These features are commonly found in custom, off-the-shelf libraries such as FlexReport and FlexViewer.

WPF FlexViewer Control

WPF DataGrid Controls

The WPF .NET DataGrid control provides most of the basic features you need, but what it really lacks is an elevated design. It requires a lot of customization to achieve a modern, fluent design. A more attractive and powerful WPF datagrid control is the FlexGrid datagrid control. The benefits of using a third-party datagrid, like FlexGrid, are better performance, more themes, and more built-in features like column and row freezing, cell merging, and transpose views.

WPF DataGrid (left) and ComponentOne FlexGrid (right)

WPF Scheduler Controls

When it comes to data and time editing and event scheduling, the standard WPF controls only include simple editors and a calendar. Building a custom scheduler as rich as Microsoft Office is a tall order, so this is a great use case for licensing third-party components. This C1Scheduler WPF control provides month, week, day, and timeline views along with complete Outlook-style appointment editing dialogs.

WPF Scheduler Control

WPF Docking Controls

Desktop applications often include many tabs and panels, making the user interface complex. Your favorite productivity tools, like Adobe Premiere, Adobe Photoshop, and Visual Studio, utilize docking tabs that allow end-users to rearrange their personal workspaces. This is another library that would be quite complicated to implement using only the WPF TabControl. The C1DockControl for WPF provides two different docking experiences from which you can choose.

WPF DockControl

How to Add WPF Controls to Your .NET Applications

Windows Forms provides one of the most productive ways to create desktop apps based on the visual designer provided in Visual Studio.

How to Add Standard Controls Through the Designer

UI controls can be added to a XAML file by dragging and dropping them from the toolbox. First, let’s start by creating the .NET WPF application that targets .NET 9.

Open Visual Studio (you can use the free Visual Studio community).
Create a new “WPF App” project.
Select .NET 8 (Long Term Support) as the Target Framework.
Open the default MainWindow.xaml file.

Drag and drop some buttons and other controls to test it out. Note that some controls can be nested in others by declaring them within the tags of the parent. This is known as the Content of the parent control. Some controls only allow a single child as its Content, but you can work around this by creating a single layout control (such as a Grid) as the content and then placing many controls within the Grid.

How to Add Third-Party WPF Controls

Third-party WPF controls are also added to the UI from the toolbox, but first, we must add them to the toolbox. There are two methods for adding third-party controls to the toolbox: DLL reference and NuGet package.

DLL Reference — This is the original approach and can be used if you’ve downloaded a library assembly file (dll) for your third-party control. Right-click the toolbox and select “Choose Items…”. From there, you can browse and locate your library.
NuGet Package — This is the preferred way to work with all .NET 5+ components. Under the Visual Studio “Tools” menu, you can launch the “NuGet Package Manager” for the solution. Then, browse for your library from the public nuget.org source or any custom source. Once the package is installed, the controls within it will appear in your toolbox.

The major difference between these approaches is that adding the DLLs to the toolbox does not add them to the project. The control must be dropped to the design surface for the project reference to be added. By using the NuGet package, you are adding the project reference first.

Data Binding with MVVM Design Principles

MVVM (Model-View-ViewModel) is a popular code architecture that takes advantage of WPF’s data binding capabilities. Once you begin any WPF development, you probably won’t escape the discussion surrounding MVVM, as it is widely regarded as one of the best practices.

In a nutshell, following MVVM simply means that all business logic (C# code) is separated into your ViewModel and Model C# files and not tightly tied to your UI code. Maintaining this clean separation between application logic and the UI helps address many different development issues and makes an application easier to test, maintain, and scale.

The Model is really just the data schema that defines each business object.

Model example:

public class Product
{
    public int ProductId { get; set; }
    public string ProductName { get; set; }
    ...
}

The View Model is essentially the data model that includes all the business logic directly related to the UI View. Note how the data is initially loaded — this may vary for real applications.

ViewModel example:

internal class MainViewModel : INotifyPropertyChanged
{
    private List<Product> _products;
    public List<Product> Products {
        get
        { 
            if(_products == null)
            {
                LoadData();
            }
            return _products;
        }
    }

    private async Task LoadData()
    {
        _products = await Northwind.LoadProductsAsync();
        NotifyPropertyChanged("Products");
    }

    public event PropertyChangedEventHandler PropertyChanged;

    // This method is called by the Set accessor of each property.  
    // The CallerMemberName attribute that is applied to the optional propertyName  
    // parameter causes the property name of the caller to be substituted as an argument.  
    private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

The View is our XAML UI. Note that a key piece to this puzzle is the DataContext. Every WPF UI element, including the Window itself, features a DataContext property.

View example:

<Window
        ...
        xmlns:local="clr-namespace:TestWpfDemoApp"
        xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" 
        Title="My WPF App" Height="450" Width="800">
    <Window.DataContext>
        <local:MainViewModel />
    </Window.DataContext>
    <Grid>
        <c1:FlexGrid ItemsSource="{Binding Products}"/>
    </Grid>
</Window>

Conclusion

WPF was released with .NET 3.0 as a potential replacement for WinForms. To this day, both platforms remain viable solutions for developing .NET desktop applications. The main difference is that WPF components are implemented using XAML, which makes it easier to implement data binding and customize the UI appearance.

XAML Facilitates Easier Data Binding

WPF (and other XAML-based frameworks, like WinUI) allow you to set properties and data binding directly in the markup. WPF is typically considered more MVVM-friendly as data binding is very straightforward, thanks to the DataContext concept. This makes it very easy to separate UI logic from business logic.

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

XAML Makes It Easy to Customize Appearance

XAML-based components are inherently more customizable with styles and control templates. Styles are a great way to create a unified appearance across your application. If you need to customize a WPF UI control further, you can customize its XAML template, which is generally considered a step easier than overriding WinForms renderers but still not the easiest task for an average developer.

WPF UI Controls with Custom Styles

Many third-party libraries offer a rich API for appearance customization that saves a lot of development time. ComponentOne WPF controls provide extensive Brush and Color properties, customizing the appearance of controls without the need for themes or custom templates. Plus, certain built-in themes, like Google’s Material and Microsoft Office-inspired themes, are provided.

How to Customize C# .NET Scheduler Appointment Dialogs

Chelsea Devereaux — Fri, 28 Mar 2025 20:18:44 +0000

What You Will Need

ComponentOne WinForms Edition
Visual Studio 2022

Controls Referenced

Scheduler for WinForms

Tutorial Concept
In this second C# .NET Scheduler tutorial, we show how to create a custom appointment dialog that is different from the standard Appointment object.

Previously, we showed you how to build a C# .NET scheduling Windows app using the ComponentOne Scheduler for WinForms control.

In part two, we’ll go a step further by replacing the default appointment dialog in C1Schedule with a custom one. This new dialog will include fields that match our specific needs, making the app more useful and easier to work with.

Whether you're building an app for healthcare, education, or personal productivity, the ability to customize appointment details can make the scheduler more specific to address your unique business needs.

Let's walk through the implementation in easy steps to create the custom appointment dialog:

Why Customize the Appointment Form
How to Create a Custom Appointment Form
- Initialize the Custom Appointment Form
- Bind Form Fields with the Appointment
- Show the Custom Appointment Form

Why Customize the Appointment Form

Below is the default appointment form that you get with C1Schedule.

Default Appointment Form for C1Schedule

It provides all supported features of the appointment object model in one dialog. The three main reasons you may want to customize the form include:

Simplifying the form by removing elements you don’t need
Adding additional form elements to support your unique requirements
Customizing the style and appearance beyond ComponentOne themes

A common scheduling application scenario involves supporting appointments for multiple users. To accomplish this with C1Scheduler, you can use the Resources, Contacts, and Categories as custom data entities for each appointment (circled above). It’s pretty flexible, but the UI for managing these can be customized to better suit your requirements.

For instance, rather than having the user modify the “Contacts” list to schedule an appointment for a particular user (such as a doctor), we may simply want to display a drop-down with available doctors.

Next, let’s customize the appointment form to add a drop-down for available doctors in our fictional healthcare company.

How to Create a Custom Appointment Form

The first step is to create the custom form in your project by adding a new Windows Form and arranging all the UI controls. Let’s take a look at our custom appointment form below:

Custom Appointment Form with Doctor Field

In this custom form, we incorporated a Ribbon to provide advanced options, such as setting the appointment importance and recurrence. These features make the dialog more interactive and user-friendly.

We also tailored it to our medical appointment data by displaying the “Doctor” field. This allows the end-user to set the doctor from any appointment dialog.

You can download the completed sample project for the full code to see how it’s created. Below are the key steps to implement the custom appointment dialog:

Initialize the Custom Appointment Form

When the custom appointment form is initialized, we can access the Scheduler and Appointment data in the constructor. From here, we can initialize the form by binding it to appointment data.

    public AppointmentForm(C1Schedule scheduler, Appointment appointment)
    {
        _scheduler = scheduler;
        Appointment = appointment;

        InitializeComponent();
        Initialize();
    }

See the attached sample above for the complete implementation.

Bind Form Fields with the Appointment

With the custom appointment form in place, the next step is to bind its fields to the corresponding appointment properties. This ensures that when editing an existing appointment, its details are prefilled in the dialog, providing a seamless user experience.

For example, we initialize the text box that is bound to the appointment’s Subject in the code below:

    private void Initialize()
    {
        // initialize subject text box
        _txtSubject.DataBindings.Clear();
        _txtSubject.DataBindings.Add(new Binding("Text", _appEdited, "Subject", false, DataSourceUpdateMode.OnPropertyChanged));

        // initialize rest of form
        ...
    }

Most importantly, for our custom form, we need to bind the “Doctor” combobox. To achieve this, we will use the scheduler’s Contacts storage. The name of the combobox in our example is “_cmbOwner.”

    _cmbOwner.DataBindings.Clear();
    _cmbOwner.DataSource = _scheduler.DataStorage.OwnerStorage.Contacts;
    _cmbOwner.DataBindings.Add(new Binding("SelectedItem", _appEdited, "Owner", true, DataSourceUpdateMode.OnPropertyChanged));
    _cmbOwner.SelectedIndexChanged += new EventHandler(_cmbOwner_SelectedIndexChanged);

Additionally, we update the owner when the selected index changes, ensuring that all scheduled appointments are accurately stored and managed.

    private void _cmbOwner_SelectedIndexChanged(object sender, EventArgs e)
    {
        _appEdited.Owner = (Contact)_cmbOwner.SelectedItem;
        MakeTitle();
    }

By implementing this binding, users can effortlessly create and modify appointments without manually re-entering details.

Show the Custom Appointment Form

With the custom appointment dialog successfully created and bound to the appointment properties, the final step is to ensure it is displayed in place of the default appointment dialog when interacting with C1Schedule.

To achieve this, we need to handle the BeforeAppointmentShow event. This event allows us to cancel the default dialog and display our custom appointment form instead.

Below is the code snippet demonstrating this implementation:

       private void appointmentScheduler_BeforeAppointmentShow(object sender, C1.C1Schedule.CancelAppointmentEventArgs e)
       {
           // Don't show built-in form
           e.Cancel = true;

           // show custom form
           AppointmentForm form = new AppointmentForm(appointmentScheduler, e.Appointment);
           form.Show(this);
       }

This approach ensures that whenever a user clicks on an appointment, our custom appointment dialog appears instead of the default one, providing a personalized scheduling experience. Note that some code is omitted from the snippet, so you should download the complete sample to see additional logic.

Below is a final look at how the custom appointment dialog works in C1Schedule:

Conclusion

In this blog, we have learned how to efficiently implement a custom appointment, from designing the UI to handling user interactions and ensuring smooth functionality. ComponentOne Scheduler for WinForms is a great solution to manage appointments, meetings, and events while offering various customization options. To learn more about the C1Scheduler control, you can check out the documentation.

We hope you found this guide easy and helpful. If you have any questions or suggestions, feel free to share them in the comments. Happy coding!