WinForms — Early Access Preview (v21.2)

WinForms Team Blog
09 September 2021

Our next major release (v21.2) is just around the corner and all active DevExpress Universal or DXperience subscribers can explore our newest features months before official release. Point your browser to the DevExpress Download Manager and download our WinForms Early Access Preview (EAP) v21.2 build to review the features outlined in this blog post.

Early Access and CTP builds are provided solely for early testing purposes and are not ready for production use. This build can be installed side by side with other major versions of DevExpress products. Please backup your project and important data before installing Early Access and CTP builds.

Please remember that this EAP does not include all features/products we expect to ship in our v21.2 release cycle. We are working hard to finalize all v21.2 features/capabilities and once we have more information to share, we’ll post updates on this channel.

HTML & CSS Templates

The DevExpress WinForms 2021 Roadmap briefly outlined our plans regarding HTML & CSS template support. In this v21.2 EAP build, you will find four primary updates to our HTML-CSS Template engine:

  • HtmlTemplateControl — a brand-new control designed to render the template assigned to it. You can use it to create a variety of UI elements including buttons, toolbars, search panels, etc.
  • HtmlTemplatePopup — like the HtmlTemplateControl, this new component renders HTML-CSS templates, and displays results as a pop-up menu.
  • ItemsView for the DevExpress WinForms Data Grid control — a Data Grid View compatible with web templates. This View has no default data representation. Its appearance and record layout is driven by the template assigned to it.
  • Template support for existing DevExpress controls. The Data Grid Tile View and Gantt Control are the UI first controls with built-in web template support (more are on the way).

We've used these four items to construct a new "Chat Client App" demo (available in the DevExpress WinForms Demo Center and on GitHub). This demo simulates a chat client application and was built almost exclusively with HTML-CSS templates.

We expect to extend HTML-CSS template support over the next year and to:

  • Increase the number of DevExpress controls that support templates. WinExplorerView, Scheduler and Tree List are among the first candidates for future upgrade.
  • Increase the number of supported HTML tags. At present, our internal engine only supports a limited set of HTML tags. As such, you cannot simply copy complex HTML layouts found on the web and paste it into our controls. Of course, our ultimate objective is to deliver parity between DevExpress WinForms templates and native HTML markup. For now, you can use the following small trick to check whether your template is compatible with our controls: insert it into the HtmlTemplateControl designer and its built-in syntax editor will highlight unsupported tags and values.

  • We will also continue to evolve our WinForms Demo Center module to better explain how to use web mark-up and demonstrate how to leverage its potential to design UI elements within your app (and share sample templates with others).

Data Grid

In addition to HTML-CSS features mentioned above (templates support for the Tile View and our brand-new Items View), this EAP includes Search mode support for our recently introduced column in-header search box. In our previous major release, this option was only available in Filter mode — values that did not match entered strings were hidden. In v21.2, you can set the OptionsFilter.InHeaderSearchMode property to "TextSearch". When InHeaderSearchMode is set to "TextSearch", our WinForms Data Grid highlights matching values and leaves non-matching values visible.

End-users can press Ctrl+Up/Ctrl+Down or F3/Shift+F3 to navigate between matching records.

This new search feature is limited to matches within visible data rows (collapsed and group rows are ignored). This feature is also limited to client (non-server) mode and is recommended for data sources with 100,000 rows or less.

Gantt Control

You can now use HTML-CSS templates to customize the appearance of the following Gantt Control elements:

  • Tasks, Summaries, and Milestones
  • Regular and Summary Task Progresses
  • Regular, Summary and Milestone Task Baselines
  • Text Labels
  • Interaction tooltips
  • Split Tasks

To create a template, use the editor dialog (invoked when you click the ellipsis button next to the GanttControl.HtmlTemplates property in Visual Studio Property Grid). When your template is ready, handle the GanttControl.QueryItemTemplate event to assign it to a required element type.

void GanttControl1_QueryItemTemplate(object sender, QueryItemTemplateEventArgs e) {
    switch(e.ItemType) {
        case GanttChartItemType.Task:
        case GanttChartItemType.SummaryTask:
            e.Template.Assign(template1);
            break;
        case GanttChartItemType.Progress:
        case GanttChartItemType.SummaryTaskProgress:
            e.Template.Assign(template2);
            break;
        case GanttChartItemType.TextLabel:
            e.Template.Assign(template3);
            break;
    }
}

Windows 11 Support

Microsoft is rolling out Windows 11 later this year, and as you might expect, we're doing everything possible to ensure compatibility with Microsoft’s newest OS. In addition to compatibility-related considerations, we’ve also updated our UI to better match the Windows 11 user experience. Your DevExpress forms will now include rounded corners to match the look and feel of Windows 11. Note: This change applies to applications using both vector and raster skins.

These updated forms do not have shadows/skinned borders when using Office-inspired skins. We'd love to hear your feedback on the appearance of this new window (whether you think certain skins should ship with standard square corners). Note that you can always modify the static WindowsFormsSetting.AllowRoundedWindowCorners setting to manually control the appearance of form corners (this setting is functional only in apps running on Windows 11).

Diagrams

The DevExpress WinForms v21.2 EAP allows you to use the designer to configure the WinForms Diagram Control in .NET.

Scheduler

With our v21.2 EAP, you will be able to set custom appointment or column widths as needs dictate.

Column width is specified by the View.ColumnWidth property. The View.ColumnWidthMode property must be set to "Fixed". In this mode, you can enable the View.AppointmentDisplayOptions.StretchAppointments property so that appointments stretch horizontally to occupy the entire column width.

To specify the custom appointment width, use the View.AppointmentDisplayOptions.AppointmentWidth property. This setup is available when the View.ColumnWidthMode is set to "Auto". You can modify the View.AppointmentDisplayOptions.StretchAppointments property to specify whether rightmost appointments ignore custom width settings and occupy free column space.

These settings are available in Day, Work Week and Full Week Views, and only when appointments are not groupped by dates.

Charts - Customizable Empty Points

The DevExpress Chart Control can process gaps in a data source as empty points (points with undefined values). These gaps can now be visualized using different style options (based on Series view type). You can fully customize the appearance of point markers, line and area segments used to display empty points.

You can also draw “mock” points instead of gaps (based on values of neighboring Series points). To use this feature, set the series view’s EmptyPointOptions.ProcessPoints property to Interpolate.

Documentation: Empty Points (WinForms)

Demo: Empty Points (WinForms)

Charts - Fast (Swift) Point Series

We added a new lightweight Swift Point Series optimized to quickly render large data sets as a scatter (XY) plot.

The following chart summarizes the benefits of a Swift Point versus a regular Point Series with default settings enabled:

Documentation: SwiftPointSeriesView

Demo: Swift Point View (WinForms)

New Heat Map Control

v21.2 includes a new WinForms Heatmap Control that you can use to plot heatmap charts. Heatmaps help visualize data using a tabular layout (through color variations).

The following is a summary of Heatmap related features included in this release:

  • Binding to various data source types
  • Unbound mode support
  • Multiple coloring algorithms
  • Zoom and scroll operation support
  • Cell highlighting modes
  • Tooltip support
  • Titles
  • Cell labels

Documentation: HeatmapControl

Demo: Heatmap - Color Providers

Maps - Lambert Azimuthal Equal-Area projection support

This release includes support for a new projection type – the European Terrestrial Reference System 1989 - Lambert azimuthal equal-area (ETRS89-LAEA) projection. To enable this new projection, set the GeoMapCoordinateSystem.Projection property to "Etrs89LambertAzimuthalEqualAreaProjection".

You can use this projection to display European Union (EU) maps with minimal distortion.

Demo: Map Projections (WinForms)

Reports

WinForms Report Viewer - DirectX Support

Our WinForms Document Viewer control now supports DirectX rendering for both user interface elements and the report document. The benefits of DirectX rendering are numerous and include:

  • Up to 80% faster document rendering
  • Smoother scrolling experience
  • Enhanced responsiveness in multi-page mode
  • Enhanced glyph rendering quality thanks to DirectWrite

The following videos help demonstrate the power of DirectX rendering:

Localization - Translation Strings CSV Import/Export

You are now able to export report localization strings to a CSV file and use it to translate report elements with the help of third-party services. In addition, our Localization Editor can import translations made within a CSV file and apply it to a report.

PDF Content - Embed PDFs into Report Pages

The XRPdfContent report control exposes a new GenerateOwnPages property – a property that manages operation mode. This control can act like a subreport when the property is disabled. With the help of a control placeholder, you can limit the area to scale and embed PDF files directly into your report.

This new mode will be useful when:

  • You need to embed PDF file content into a report with common headers/footers (headers/footers will be printed on PDF file pages as well).
  • You need to print specific content (pictures, bar codes, page numbers, a report watermark) over the contents of your PDF file.
  • You need to design a pre-printed form and use a PDF file as a watermark.
  • You need to create a report document with an A4 paper kind and include a PDF file with different page dimensions.
If you’ve yet to explore the capabilities of the XRPdfContent report control, refer to the following article for more information: Reporting - Merge PDF Documents into Your Report (v20.1).

Upcoming Features

While the following features/capabilities did not make our first EAP, they will ship in our v21.2 release cycle.

Office-Inspired UI Controls (DevExpress Spreadsheet, Rich Text Editor, and PDF Viewer)

Accessible PDF Export

Our upcoming release will allow you to export your spreadsheet and rich text documents to tagged (accessible) PDF files. We expect to fully support PDF/A-1a, PDF/A-2a, PDF/A-3a, and PDF/UA standards. You will be able to generate accessible PDFs in code or via user interface elements.

Custom Font Loading Engine

Our desktop Rich Text Editor and Spreadsheet controls (v21.2) will allow you to use fonts not installed on a given system. This feature allows you to avoid font substitution when you display, print, or export (to PDF) documents with non-standard fonts. You will be able to load necessary fonts from files, streams, or byte arrays. These fonts will be available to all instances of the DevExpress Spreadsheet and Rich Text Editor within a given project.

Set Print Options in Print Preview

v21.2 will add a new Settings pane to the Spreadsheet control’s Print Preview window. This pane will allow you to specify the following print-related settings:

  • Select spreadsheet content to print. You will be able to print the entire workbook or a specific portion of your document.
  • Specify the number of copies to print.
  • Customize page settings (document orientation, paper size, and page margins).
  • Define scaling options.

File Dialogs

We expect to release a stand-alone component that tweaks DevExpress WinForms Data Grid, Tree List, and Breadcrumb Editor controls so that you could use them to create custom file & folder managers.


Your Feedback Matters

As always, we welcome your thoughts and feedback. Please comment below or submit a support ticket via the DevExpress Support Center for more information on what we have planned for v21.2.

Free DevExpress Products – Get Your Copy Today

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We’ll be happy to follow-up.
Eaton Z.
Eaton Zveare

I use Office 2019 skins with FormBorderEffect.Shadow. Are you saying that will be ignored on Windows 11 if you set AllowRoundedWindowCorners to true?

Also, didn't I read somewhere you were working on new office skins to mimic the next office version? Is that coming in 21.2?

9 September 2021
Dmitry (DevExpress)
Dmitry (DevExpress)

@Eaton New Office-inspired themes will be most likely released in v22.1, when the Microsoft Office 2021 itself goes live. Publishing skins based on software that is still in insider preview mode and can change is a risk we'd rather not take.

As for the FormBorderEffect property, I'll need to check it on a sample app first to be sure. I'll get back to you in the next comment.

9 September 2021
Konstantin Balashov
Konstantin Balashov
What about performance in compare with default controls when HTML & CSS Templates are used?

9 September 2021
Anders Wang
Anders Wang

Hi,

@Dmitry, When the "wrap words by hieroglyphs" feature can be added to richeditcontrol?Is there any plan? 

9 September 2021
Customer69806
Mikael 69806
will round corners be set without having to do anything? if it is win11 then the corners are round and for win10 without round corners with the same compilation?

I use 2019 skin and if I got it right it will not work if you use the default setting?

The best thing would be that it worked without you even have to think about it. The application knows which operating system is being used and adapts to it.

Regards Mikael


9 September 2021
Daniel Hüttenberger
Daniel Hüttenberger

What about bindable TimeRegions in XtraScheduler?

We won't use hard coded lunch breaks! And our customers too ;)

10 September 2021
dbSoft
dbSoft
Our company was looking Chat Ui. It will be perfect for our needs!
10 September 2021
Phillip Brand
Phillip Brand
Can't wait to work with the HTML templates! Great work!
10 September 2021
dbSoft
dbSoft
Are we know release date of stable version?
10 September 2021
Dmitry (DevExpress)
Dmitry (DevExpress)

@Eaton Any DevExpress properties that control shadows are not in effect, only native Windows 11 shadows are shown. 


@Konstantin Performance has always been our top priority. We're using a highly optimized HTML parser and the DirectX rendering engine, so templated apps are as fast as your regular desktop apps.


@Anders I'll pass your question to our Office team, thank you.


@Mikael yes, you won't have to do anything in Win 11, and in Win 10 forms will have regular square corners.


@Daniel I'm not aware of such plans, but I personally think that's a very reasonable suggestion. I'll discuss this with our Scheduler devs, thanks for the idea.


@dbSoft v21.2 will be out in a few weeks, no specific date yet.

 

10 September 2021
Peter Sørensen
Peter Sørensen

Very nice features.

Can I install this EAP in VS 2022 preview ?

10 September 2021
DÖNÜŞ ŞENEL
Dönüş ŞENEL
Great news, thanks Devexpress.  

So what about the design time problems for Winforms .NET 5 and later?
 
10 September 2021
Christopher Jay
Christopher Jay
Great work.  Love the rounded corners on Win 11.  Please do not get rid of the existing shadow options for Windows 10 even though Windows 11 will use the native shadows.

10 September 2021
Benjamin Hofmann
Benjamin Hofmann
Thanks for the update!

Will we finally see the Advanced Customization Form also for TreeList?
10 September 2021
Dmitry (DevExpress)
Dmitry (DevExpress)

@Peter, @DÖNÜŞ:  VS2022 and .NET 6 support will be included in the final v21.2 release. As for design-time issues in .NET 5 — or any other .NET Core version for that matter — nothing has changed. We keep working in both directions: making everything possible to update our existing design-time engine onto somewhat finished Core API, and simultaneously working on a completely custom solution.


@Christopher:  Sure, Windows 10 environment should not be affected in any manner. The new form UI is only for new OS versions.


@Benjamin:  Yes, in fact, it is already implemented. We did not include it in the Early Access Preview build, but you'll see it either in beta or final v21.2 release.

10 September 2021
Eaton Z.
Eaton Zveare
@Dmity: To clarify, if I want my app to look the same as it does on Windows 10 (no rounded corners, with a FormBorderEffect), I will need to explicitly disable AllowRoundedWindowCorners? Or are you saying FormBorderEffect doesn't work on Windows 11 at all?
10 September 2021
Heiko Mueller
Heiko Mueller
HTML/CSS rendering takes WinForms development to a whole new level. This has so much potential. What a great addition! Thank you very much for continued supporting WinForms on such a great way! 
10 September 2021
Phillip Brand
Phillip Brand

I have some questions regarding the HTML rendering:

1. As it seems, it is rendered natively correct? So no web view of some kind?

2. Is it possible to allow selection of text just like in web controls?

3. Is it (or will it be) possible to place any control inside the HTML just like with TextEdits right now? Like Grids or Charts for example?

4. Will it be possible to extend the Templating engine, or use it “easily” with our own controls?

10 September 2021
Frederic Vancraeyveldt
Frederic Vancraeyveldt
Will it be available for the new embarcadero delphi XE11?
12 September 2021
Dmitry (DevExpress)
Dmitry (DevExpress)

@Eaton Rounded corners and shadows are two separate cases, let's not mix them together. To get rid of rounded corners in Windows 11, yes, you'll need to disable this property. With shadows, it's a bit more complicated. FormBorderEffect shadows are replaced by native Windows 11 shadows, at least for now.

We roll out these Early Access Preview builds to collect user feedback and make updates before the official release is out, so if the current behavior concerns you, please share how you'd like to see things going. Am I correct that you'd like to have skin shadows instead of native Windows 11 shadows? Are you using the "Glow" FormBorderEffect mode?

13 September 2021
Dmitry (DevExpress)
Dmitry (DevExpress)

@Phillip  great questions, thank you.


Yes, all templates are DirectX-rendered within regular desktop controls, it's not a web view. And yes, we've made it possible to embed controls inside HTML (see the Application UI Design article for an example). We haven't tested embedding heavy controls like Grids and Charts, but the core support is definitely there.


As for the other two questions, the short answer is "we'll act according to the feedback". We'd love to see how our customers use this feature in their apps, what are the real use cases, and what may be stopping devs to try HTML in their projects. Same goes for templating custom controls: creating new UI elements in HTML can prove to be a more viable solution. Please contact us via the Support Center if you have a specific scenario in mind, we'll be happy to discuss it and find the best possible option .

13 September 2021
Eaton Z.
Eaton Zveare
@Dmitry: Ok, so the shadows on Windows 11 are used no matter what you change FormBorderEffect to be. I currently set that to Shadow. If Windows 11 shadows are the same or better, then there will be no complaints (-:
13 September 2021
dbSoft
dbSoft

I have tested HtmlTemplateControl  in preview release and it looks awesome !! It seems that we will design again many of our controls!! Please consider adding a tool that will  automatically simulate css and html code for us.

Also why these options are not implemented native in devexpress controls? Such a radius and padding?Why there is need to add html and css code? Thank you Devexpress once more!!!

14 September 2021
Stephen J White
Stephen J White
Hi Dmitry,

Just out of curiosity, are there any known major limitations for the HTML rendering at this point (I.E. Are there particular scenarios you are aware of that it doesn't support and you do not see DevExpress trying to support it)? I presume it isn't possible to use a web assembly / Blazor component inside of a Windows Form application in this fashion, correct? 
14 September 2021
Dmitry (DevExpress)
Dmitry (DevExpress)

@dbSoft thank you, it's great to hear this! We'll do our best to keep impressing you with this feature.

Our controls do not commonly have padding or border-radius settings because such settings are governed by DevExpress skins. You can always modify these values in Skin Editor, which is a preferable approach compared to explicitly setting them directly for a control.

As for the automatic code simulation tool — could you please share more details on this? Our HTML-CSS code designers have a preview panel that allows you to instantly preview the result of a code you type. Also, you can use our Demo Center with on-the-fly compilation to test your markup. Did you mean something more sophisticated?

15 September 2021
Dmitry (DevExpress)
Dmitry (DevExpress)

@Stephen at this moment it's a bit early to claim any current limitations are by-design and will have to stay. We're collecting user feedback and are open to any suggestions.

The only thing that we consider as "by-design" is the global idea behind this feature: to alternate the way you customize and layout controls. If you want a round button, making a corresponding HTML template is much easier than messing with custom control painters, changing skins, and handling CustomDraw events. This is the main purpose of this feature, and it's not meant to introduce a native web platform inside WinForms. So no, no JS or Blazor support is in the cards.

15 September 2021
dbSoft
dbSoft

@Dmitry  Thank you Dmitry  for your answer.

About first question. We need to create a button with rounded edges but holding the same skin colors and effects. But we do not want to change the way the buttons appear from the whole project.

If there is a way to do this, please let us know

About second question, our team needs to do more research on how to design a button, because they do not know from html or css code. It would be easier if there was a tool that could simulate the code, giving it some parameters. Facilitating our developers to create a new element. Something like the link below

https://www.bestcssbuttongenerator.com/

15 September 2021
Mahmud Karimov
Mahmud Karimov
There was promise of 3 new features for Dashboard control early year. Are they still on track?
16 September 2021
Tobias Schaller
Tobias Schaller
Please try to release some VS2022/.NET 6 (EAP/Beta/Preview,...) stuff prior to the final release of v21.2. Due now .NET 6 is RC I have to start a project on this (and need to use DevExpress WinForms controls).

Is it possible to use rounded corners on Win10, too ?
16 September 2021
Dmitry (DevExpress)
Dmitry (DevExpress)

@dbSoft You can use DXSkinColors in our HTML templates (colors from the DevExpress.LookAndFeel.DXSkinColors.FillColors and DevExpress.LookAndFeel.DXSkinColors.ForeColors classes). Instead of setting the specific color value, you can simply type, for instance, "@Primary" or "@ControlText", and a color that matches the current skin will be applied.


As for your second question, we surely would like to help anyone who is not quite familiar with HTML/CSS to hit the ground running. But in a slightly different way: instead of a code generation tool, we've made the "HTML Best Practices" module in our Demo Center. It demonstrates basic techniques and illustrates how to solve the most popular tasks. We'll add more samples to the "how-to" library over time. Since these demos allow you to edit code at runtime and instantly see the result, it's a perfect sandbox where you can take your first steps: just use our sample markup and try to make some edits.

16 September 2021
Dmitry (DevExpress)
Dmitry (DevExpress)
@Mahmud If you refer to the "Under Consideration" section of the Dashboards Roadmap released in February, that was hardly a promise, more like the ideas we'll explore. From this list, you can expect the "Non-Visual Dashboard Export component for all supported platforms" feature, and most likely, the "Per-Monitor V2 Support". Other features that won't make it to the v21.2 release are still in the backlog, and will likely be released in future versions.
16 September 2021
Dmitry (DevExpress)
Dmitry (DevExpress)

@Tobias Sure, supporting the latest versions of .NET Core and Visual Studio is always one of the highest priority tasks. We'll do our best to release it as soon as possible.


Rounded corners on Windows 10 — not at this moment. This property does not "round" corners itself, it just lets Windows do the job. And since only Windows 11 has rounded corners, this is the only OS version where the AllowRoundedWindowCorners setting is in effect.

16 September 2021
CRM-49a54daa-6c16-4310-9f10-0ce9c7ea3f22
Lakra4k
What's the day of official launch?
28 September 2021
Dmitry (DevExpress)
Dmitry (DevExpress)
@Customer194978 we're in the code freeze stage now, getting things ready. Aiming for mid-October to roll out the v21.2 beta, the official release should be available a couple of weeks after that.
28 September 2021
Claes Wikemar
Claes Wikemar

Hi,

Been testing your HtmlTemplate system on WinExplorerView and noticed some issues.


1. When GroupColumn is set it seems to make the first item not be Drawn properly. Html+Css is there but the item data isn't displayed. (Though when click on a button the e.DataIten carries all the proper info with it.

2. The visible items doesn't seem to be proper. I tried it on Large  ViewStyle and when scrolling down with either Arrow Keys on keyboard or even using the scrollbar doesn't seem to scroll properly. Get's stuck etc.

3. I got a Null exception at random while scrollng: 

An unhandled exception of type 'System.NullReferenceException' occurred in DevExpress.Data.Desktop.v21.2.dll

4. Is it possible to use ${} within a DIV ID in order for a div to connect to different classes in the ccs so lets say in the Car's Price example you get different background/text colors depending on value from a Parameter of the Object? Like a OnSale parameter or something?


Looking really good otherwise. Can see a great deal of potential with this.

 

18 October 2021
Dmitry (DevExpress)
Dmitry (DevExpress)

@Claes A huge thank you for testing HTML templates and contacting us with this. As with any "newborn" feature it is extremely important for us to know your real usage scenarios and issues you come across. I see that all of these issues have already been reported as Support Center tickets, so I expect there will be no trouble fixing them.

As for the last question, we have something similar in mind, yes. But at this moment, we're just collecting user feedback and focusing on multiple directions at once. Probably, the most important of them is to support more HTML/CSS attributes and tags: this feature is a brand-new way to design WinForms apps, and it can be challenging to design something awesome with a limited tag/attribute set. So our top priority right now is this. For now, you can probably use the CustomizeItemTemplate event that we expect to implement in the official v21.2 release. This event will allow you to modify HTML templates at runtime, for example, change color values depending on your custom criteria. Hopefully, it will serve as a decent workaround until we implement native multi-class support.

21 October 2021
Doug Bess
Doug Bess
Microsoft Office 365 released an update today with a new Ribbon Look and Feel. The corners of the ribbon are rounded and the Tabs are borderless. Are there any plans to create a DevExpress Ribbon that have the same look and feel and Office 365?
17 November 2021
Dmitry (DevExpress)
Dmitry (DevExpress)
@Doug we haven't discussed that in particular, but our Ribbon control has always received all the newest Microsoft Office features: collapsed mode, "File" main menu, "Simplified" state in Office 2019, and so on. So I'd say yes, it should be available in future updates.
9 December 2021

Please login or register to post comments.