WinForms Tips & Tricks — HTML & CSS Syntax Editor

WinForms Team Blog
30 November 2021

It’s been a couple of weeks since we released our WinForms HTML & CSS Templates option (an entirely new approach to WinForms app design). The DevExpress HTML & CSS Template option for the WinForms platform allows you to re-imagine/re-design our data-aware controls (at present, you can apply templates to our WinForms Data Grid, Scheduler and Gantt Control), and create fully custom UI elements like buttons, editors, toolbars and more (courtesy of the HtmlContentControl and HtmlContentPopup components).

To specify a web-template for a control or component, click the ellipsis button next to the appropriate property (for instance, SchedulerControl.Views.DayView.HtmlTemplates.AllDayAppointment) within the Visual Studio Property Grid and use our Template Editor. This tool uses a built-in Syntax Editor to facilitate the use of templates.

In this post, I’ll show you how to leverage this Syntax Editor and maximize its potential.

WinForms Syntax Editor

Before we start, let me answer a question that might have already popped into your mind: "Are you going to ship a stand-alone Syntax Editor now that you have created one for editing templates?". Well, it's not that simple.

Our embedded Editor is a "set it and forget it" kind of thing: it was built to work with a limited set of supported keywords (HTML tags and CSS parameters that we currently support). If we were to ship it as a stand-alone tool, it would require much more than this. As an absolute minimum, a Syntax Editor would require us to support external dictionaries that you could import to teach the Editor new languages. And it will need to support popular languages out-of-the-box (so you don't need to manually teach it, say, SQL or Markdown). These are costly features to implement, and we do not have plans to include them in our 2022 development cycle.

Intelligent Code Completion

If you already tried DevExpress WinForms HTML templates, you probably know about this feature. Our code-completion aid can:

  • Suggest HTML tag names, CSS property names, and parameter values as you type.
  • Suggest names for existing CSS styles when you type class="" inside HTML elements, or create new styles if no class with such a name was found.
  • Add newlines and tabulations to keep your templates well-formatted and easy to read.

To manually trigger automatic suggestions, press the Ctrl+Space shortcut.

Navigation

Select an opening or a closing HTML tag and the Editor will instantly highlight the other half of this tag. You can also find tags by hovering over elements in the "Preview" panel. Double-click an element to keep the corresponding tag highlighted after you move the mouse cursor away from this panel.

Hold Ctrl and hover over class names assigned to HTML elements (the caret will change to a pointer). Click any class name to instantly scroll the CSS panel (up or down) to this class.

Finally, you can press Ctrl+F to invoke a search box. Click its drop-down button to activate "Find & Replace" mode.

Data Bindings and External Images

If a control is bound to a data source, type ${} and enter a source field name to retrieve values from this field. For example, <img src="${Photo}"> creates an image bound to the "Photo" data field. Instead of manually entering a data field name, press the Ctrl+Space hotkey to view the field list.

The same shortcut allows you to retrieve images from an external image collection. Populate a DevExpress SvgImageCollection with icons and assign this collection to a control's HtmlImages property. Once done, you can press Ctrl+Space to quickly insert images from this collection to your HTML elements.

Also note that "Edit HTML Images..." option in the context menu — it allows you to edit the HtmlImages collection without leaving the Template Editor.

Tell Us What You Think

Undoubtedly, HTML & CSS Templates are one of the most significant (and exciting) features introduced to our WinForms product line in years. This technique is spring-loaded for exciting design solutions that simply aren't available with traditional API-based techniques (see our Create Your First Web Template using DevExpress video on YouTube or the Chat Client demo). We cannot wait to see your design ideas and learn how you expect to apply this feature in your next WinForms app. We encourage you to share template-based projects via private Support Center tickets (we'd be happy to publish the most impressive solutions via a separate blog post). As always, feel free to post any questions and thoughts in the comment section below.

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.
Dom Sinclair
Dom Sinclair
>These are costly features to implement, and we do not have plans to include them in our 2022 development cycle.

So you're not actually ruling it out as a potential standalone control.  It would be a nice addition.
30 November 2021
dbSoft
dbSoft
We have already implemented HtmlControls in our project! The first thing we adapted in our project was something we were looking for a long time ago... Chat UI. So html-css controls fit perfect for our need now.
30 November 2021
Government Data Miner
Government Data Miner
Would be amazing to have a simple Html inline WYSIWYG editor to support end user data entry of all of the supported Html tags provided via DevExpress through these controls - it really is the missing link in this collection of controls.
30 November 2021
Jonatas Hudler
Jonatas Hudler

HTML+CSS templating is a great feature addition, refreshes Winforms capabilities to a long extent. I think this kind of feature greatly differentiate Devexpress from other vendors. Kudos to the team and keep up the bold vision!

I just wish you change your vision regarding the Syntax editor. I stand with @Dom Dinclair. Maybe you can reconsider for a long(er) term roadmap.

30 November 2021
Hedi Guizani
Hedi Guizani

What i m realy waitting for is

-agonistic dashboard custom items (html css on winform)

-(html css) diagram elements very useful for complex interctive diagrams like workflow (can replace the now obsolète ms workflow)

-some kind of blazor compatibility (the template can be used in blazor project /i m thinking xaf here)

-this feature can be usefull in xaf (replace the heavy layout engine), or immediatly bring the grid formedit feature agonisticly to life.

And much more..

Keepup the great work


1 December 2021
Lior
Jim
I'll backup Dom Sinclair, I would also love to see a Syntax Editor as part of the DevExpress controls suite
2 December 2021
Dmitry (DevExpress)
Dmitry Korovin (DevExpress)

Thank you all for the replies, we pay attention to each and every comment.


Also, we kindly ask you to take the survey if you are interested in this feature. It's short, and it would greatly help us to prioritize our next steps.

2 December 2021
Paolo KALC
Paolo KALC
Add to XAF
6 December 2021
Dmitry (DevExpress)
Dmitry Korovin (DevExpress)
@Paolo XAF modules are built with the same DevExpress WinForms controls that you find on your Visual Studio Toolbox. So whenever we implement a feature for a stand-alone control, this feature is automatically available for XAF users. If you need assistance on how to access individual controls inside an XAF module, please create a new Support Center ticket - our support engineers will be happy to help.
6 December 2021
Markus Doerig
Markus Doerig

I've voted for more CSS/Html Support as Priority.

As more "compatible" you are as less you need to provide special documentation for this Feature.


For example, i would like to use position: absolute, relative, fixed (with top:0, etc.) which seems not yet supported, but it's understandable because this makes the placement quiet difficult to determine.



10 December 2021
Dmitry (DevExpress)
Dmitry Korovin (DevExpress)

@Markus yes, absolutely, this parameter is extremely important in making web layouts. We already have it on our "To Do" list.

Also, we encourage all HTML-CSS users to share their ideas and templates. That would be a tremendous help in prioritizing which tags and properties should be supported in the first place.

13 December 2021
André Litfin
André Litfin
Well done 👍 Global CSS Styles usable for all components via the Visual Editor would be great.
20 December 2021
CRM-3f068466-f874-40ba-8434-c66cad2a96f0
Customer268339

I tried the merge tokens on the class attribute, it doesn't work. any idea how to accomplish dynamic class / style formatting? 

<p class="${CodeType}">${CodeType}</p>      

.Abort{
	color: Red;
}
.Active{
	color: Blue;
}

here the CodeType could be eitheir Abort or Active. 

9 June 2022

Please login or register to post comments.